<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 😁
Top comments (0)