Hi coders I am back with another fantastic project in this project I created a Hamburger Menu Design Using HTML and CSS
I also share a complete source code with my readers and followers it is free of cost, not any subscription to get the source code of this project. You can download these code files and use them for free.
What is the Hamburger Menu?
A hamburger menu is a navigational tool that is typically represented by three horizontal lines. It is used to hide a menu and reveal it when a user clicks, taps, or touches the icon.
Hamburger menus are often used on mobile websites and apps, as they allow for a more compact and efficient navigation experience.
About This Project
This project was created by the codingpakistan team to help students learn coding and programming in a simple way. If you want to join our team please follow us on Instagram.
| Created by | Coding Pakistan |
| Languages | HTML and CSS |
| Source Code | Available Below |
| Preview | Take Preview |
How to Create a Hamburger Menu
There are some steps to create this type of Hamburger Menu using HTML, and CSS, which are given below.
- The first step is to create one folder.
- Open this folder in Vs Code Editor and create two files in HTML and CSS,
- Make sure the HTML file extension is (.html) and the CSS file extension is (.css).
- After creating files, you link a CSS file with an HTML file with the help of this line code. (<link rel=”stylesheet” href=”style.css”>)
- The last step is copying and pasting the given code into your files.
Hamburger Menu – Source Code
HTML FILE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Navbar 13</title>
<link rel="stylesheet" href="style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
</head>
<body>
<nav>
<img src="logo.svg" />
</nav>
<div class="overlay"></div>
<button class="burger" onclick="toggleMenu()">
<i class="fa-solid fa-bars"></i>
<i class="fa-solid fa-close"></i>
</button>
<aside>
<a>Home</a>
<a>Install</a>
<a>Blog</a>
<h3>Product</h3>
<a>Why SurrealDB?</a>
<a>Features</a>
<a>Releases</a>
<a>Roadmap</a>
<a>Documentation</a>
<button>Join cloud waitlist</button>
</aside>
<main>
<article>
<img src="1.png" />
<div>
<name> Chris Hay, CTO at IBM iX </name>
<p>
It's fast, small, can run on browser, edge and cloud. It can handle
large data. It can run in-memory like redis or disk like sqlite and
it can run multi-cluster. It can sync between cloud and edge. And to
top of it off, it can also run as a graphdb. It's interesting.
</p>
</div>
</article>
<article>
<img src="2.png" />
<div>
<name> Chris Hay, CTO at IBM iX </name>
<p>
It's fast, small, can run on browser, edge and cloud. It can handle
large data. It can run in-memory like redis or disk like sqlite and
it can run multi-cluster. It can sync between cloud and edge. And to
top of it off, it can also run as a graphdb. It's interesting.
</p>
</div>
</article>
<article>
<img src="3.png" />
<div>
<name> Chris Hay, CTO at IBM iX </name>
<p>
It's fast, small, can run on browser, edge and cloud. It can handle
large data. It can run in-memory like redis or disk like sqlite and
it can run multi-cluster. It can sync between cloud and edge. And to
top of it off, it can also run as a graphdb. It's interesting.
</p>
</div>
</article>
<article>
<img src="4.png" />
<div>
<name> Chris Hay, CTO at IBM iX </name>
<p>
It's fast, small, can run on browser, edge and cloud. It can handle
large data. It can run in-memory like redis or disk like sqlite and
it can run multi-cluster. It can sync between cloud and edge. And to
top of it off, it can also run as a graphdb. It's interesting.
</p>
</div>
</article>
<article>
<img src="5.png" />
<div>
<name> Chris Hay, CTO at IBM iX </name>
<p>
It's fast, small, can run on browser, edge and cloud. It can handle
large data. It can run in-memory like redis or disk like sqlite and
it can run multi-cluster. It can sync between cloud and edge. And to
top of it off, it can also run as a graphdb. It's interesting.
</p>
</div>
</article>
<article>
<img src="6.png" />
<div>
<name> Chris Hay, CTO at IBM iX </name>
<p>
It's fast, small, can run on browser, edge and cloud. It can handle
large data. It can run in-memory like redis or disk like sqlite and
it can run multi-cluster. It can sync between cloud and edge. And to
top of it off, it can also run as a graphdb. It's interesting.
</p>
</div>
</article>
<article>
<img src="7.png" />
<div>
<name> Chris Hay, CTO at IBM iX </name>
<p>
It's fast, small, can run on browser, edge and cloud. It can handle
large data. It can run in-memory like redis or disk like sqlite and
it can run multi-cluster. It can sync between cloud and edge. And to
top of it off, it can also run as a graphdb. It's interesting.
</p>
</div>
</article>
</main>
<script type="text/javascript">
const toggleMenu = () => document.body.classList.toggle("open");
</script>
</body>
</html>
CSS FILE
body {
margin: 0;
background: rgb(27 32 44 / 100%);
color: #f9f9f9;
font-family: "Euclid Circular A", "Poppins";
}
* {
box-sizing: border-box;
}
nav {
position: sticky;
z-index: 1;
top: 0;
width: 100%;
height: 88px;
padding: 0 30px;
display: flex;
align-items: center;
justify-content: space-between;
background: rgb(27 32 44 / 70%);
-webkit-backdrop-filter: blur(5px);
-moz-backdrop-filter: blur(5px);
-ms-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
backface-visibility: hidden;
transform: translateZ(0px);
transition: 0.3s;
}
nav img {
height: 40px;
}
.burger {
position: fixed;
z-index: 3;
top: 0;
right: 0;
display: grid;
place-items: center;
padding: 0;
width: 82px;
height: 82px;
font-size: 30px;
color: #f9f9f9;
background: transparent;
border: 0;
cursor: pointer;
}
.burger i:last-child {
display: none;
}
body.open .burger i:first-child {
display: none;
}
body.open .burger i:last-child {
display: block;
}
.overlay {
position: fixed;
z-index: 2;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgb(27 32 44 / 70%);
visibility: hidden;
opacity: 0;
backdrop-filter: blur(6px);
transition: 0.3s;
}
body.open .overlay {
visibility: visible;
opacity: 1;
}
main {
padding: 10px 30px;
}
article {
display: flex;
gap: 16px;
padding: 20px;
max-width: 400px;
margin: 0 auto 32px;
border-radius: 16px;
background-color: #272e3c;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.1),
inset 0 1px 1px rgba(255, 255, 255, 0.1);
}
article img {
height: 60px;
}
article name {
color: rgb(255 255 255 / 50%);
}
article p {
margin: 8px 0 10px;
font-size: 14px;
line-height: 1.6;
}
nav button {
background: transparent;
border: 0;
cursor: pointer;
}
aside {
position: fixed;
z-index: 2;
top: 0;
right: 0;
display: flex;
flex-direction: column;
width: 260px;
height: 100%;
padding: 18px 20px 20px;
background: #272e3c;
box-shadow: 0 0 20px rgb(0 0 0 / 70%);
translate: 100% 0;
transition: 0.3s;
}
body.open aside {
translate: 0;
}
aside a {
display: flex;
align-items: center;
height: 50px;
}
aside h3 {
margin: 40px 0 10px;
color: #989cad;
font-weight: 400;
font-size: 16px;
}
aside button {
background: linear-gradient(-60deg, #8700ff, #ff009e);
color: #f7f7f7;
border: 0;
height: 60px;
border-radius: 30px;
font-family: inherit;
font-size: 16px;
margin-top: 20px;
}