Create a Hamburger Menu using only HTML and CSS!!!
Tags: html, css, beginners, frontenddeveloper
Published: 2021-12-20 06:09:13

```
<p>Hello</p>
```

Previous Chapter [Chapter 2 (Part 2)](https://inform-our-world.github.io/Saqha/CH%202.2)

Inform Our World [Link here](https://inform-our-world.github.io/)

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.](https://dev.to/subhransuindia/how-to-remove-underline-in-tag-3k5m)

Thank you for your time 😁