DEV Community

Cover image for Create a Hamburger Menu using only HTML and CSS!!!
Subhransu Patra
Subhransu Patra

Posted on

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

#html #css #beginners #frontenddeveloper 
<p>Hello</p>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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 😁

Top comments (0)