Create a Hamburger Menu using only HTML and CSS!!!

<p>Hello</p>

Previous Chapter Chapter 2 (Part 2)

Inform Our World Link here

Hamburger menu using only HTML and CSS? Ya, it is definitely possible {Not Kidding}. Using JavaScript for creating a Hamburger Menu is a little bit of difficult if you are new to the world of coding. (I literally found out difficult to create a Hamburger Menu using JS). But I have a solution for this...

Many people do not know this amazing tagname <details>

But only using (also <summary>) these two tags, we can make a Hamburger menu.

First create the HTML file...

<!DOCTYPE html>
<html lang="en">
<head>
<title>Hamburger Menu</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  margin: 0;
}
</style>
</head>
<body>

</body>
</html>

then add <details> tag in the body...

<!DOCTYPE html>
<html lang="en">
<head>
<title>Hamburger Menu</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  margin: 0;
}
</style>
</head>
<body>

<details>

</details>

</body>
</html>

then add <summary> tag under <details> tag.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Hamburger Menu</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  margin: 0;
}
</style>
</head>
<body>

<details>
<summary>Hello There!</summary>
</details>

</body>
</html>

Then add the content...

<!DOCTYPE html>
<html lang="en">
<head>
<title>Hamburger Menu</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  margin: 0;
}
</style>
</head>
<body>

<details>
<summary>Hello There!</summary>
<a href="https://inform-our-world.github.io/">My Website</a>
<a href="https://inform-our-world.github.io/Saqha/CH 2.2">Latest Chapter</a>
</details>

</body>
</html>

And yeah, your hamburger menu is created. But can you notice a thing. That is the arrow before the text. We can hide it too!!!

Just add...

<!DOCTYPE html>
<html lang="en">
<head>
<title>Hamburger Menu</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  margin: 0;
}
details > summary {
list-style: none;
}
</style>
</head>
<body>

<details>
<summary>Hello There!</summary>
<a href="https://inform-our-world.github.io/">My Website</a>
<a href="https://inform-our-world.github.io/Saqha/CH 2.2">Latest Chapter</a>
</details>

</body>
</html>

To make it more appropriate,

<!DOCTYPE html>
<html lang="en">
<head>
<title>Hamburger Menu</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  margin: 0;
}
details > summary {
list-style: none;
}
details {
cursor: pointer;
}
</style>
</head>
<body>

<details>
<summary>Hello There!</summary>
<a href="https://inform-our-world.github.io/">My Website</a>
<a href="https://inform-our-world.github.io/Saqha/CH 2.2">Latest Chapter</a>
</details>

</body>
</html>

Hamburger Menu is created!!!

To hide the underline in <a> tag, see the previous post...

How to remove underline in <a href=""> tag.

Thank you for your time 😁

Blog

Create a Hamburger Menu using only HTML and CSS!!!

Subhransu Patra

Join Our Newsletter. No Spam, Only the good stuff.

Related