Create a Hamburger Menu using only HTML and CSS!!!
source link: https://dev.to/subhransuindia/create-a-hamburger-menu-using-only-html-and-css-12ki
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Create a Hamburger Menu using only HTML and CSS!!!
<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 😁
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK