Free Coding Ebook 👉 Get Now
Create Responsive Hamburger Menu Using Pure CSS Only
Hey, learners. Today we will discuss the pure CSS magic by making a Responsive Hamburger Menu, as said in the title, using only CSS (and a little HTML, of course.)
First, let us start with the basics and then deep dive into the magic of CSS.
What is a Hamburger Menu?
ADVERTISEMENT
Hamburger Menu is one of the specialized menus used for navigation links in a website. There are also other types of menu types like the kebab menu, popularly known as the three dots menu. These menu types help to raise the design side of a website when it is made responsive.
50+ HTML, CSS & JavaScript Projects With Source Code
How to Make a Hamburger Menu?
While there are many ways to design the working of it, which includes the functions of JS, using CSS makes it more intriguing and a concept involving pseudo-classes and more CSS concepts that a developer should know.
First, let us see the output and then dive into the code part of that.
Working:
So, as we have seen in the video, its work is simple. We click on it and, it displays the nav link. It is common to see this type of menu on small screens.
Let us see the code.
First, the HTML part:
| Code by | Aneesh Malapaka |
| Project Download | Link Available Below |
| Language used | HTML and CSS |
| External link / Dependencies | No |
| Responsive | Yes |
In the HTML code, we are creating a checkbox with a label, when clicked as a response to display the menu items.
We then create a navbar using the nav tag containing the unordered list containing list items of the menu items we need.
Let’s now style the HTML.
CSS:
First, let’s style the main body, nav, and list.
100+ JavaScript Projects With Source Code ( Beginners to Advanced)
Since the opacity of ul and input is zero, we cannot see that for a while.
ADVERTISEMENT
Next part of the code, we add the styling for labels by using the pseudo-elements ::before and ::after.
ADVERTISEMENT
If those are new to you, the ::before is a pseudo-element applied to the selector of CSS to add content before the actual content is present.
ADVERTISEMENT
The ::after specifies the content after the actual content present in the document.
ADVERTISEMENT
ADVERTISEMENT
This creates the hamburger lines and, 50% of the job is complete (phew!)
Now, the rest of the code deals with how to change the CSS of the labels when they are clicked. What happens to the list and makes it a teeny bit responsive.
First, the transforming of the labels when clicked.
I am also posting the part of code that enables us to do that. Then you can see the codepen part of the whole thing.
/* From here we deal with css that changes when the *checkbox* label is checked, i.e., the hamburger lines are clicked. */
#menu:checked + label {
width: 0;
transition: 0.4s;
left: 2%;
transform: scaleX(30px);
}
#menu:checked + label::before {
transform: rotate(45deg);
}
#menu:checked + label::after {
transform: rotate(-45deg);
}
The codepen part of the above code combined with the rest.
*NOTE THAT IT IS NOT YET RESPONSIVE FOR THE CODEPEN OUTPUT WINDOW*
10+ Javascript Projects For Beginners With Source Code
Now add the last bit of code to make the ul visible and complete the hamburger menu for a normal website.
#menu:checked ~ ul { transition: 1s; left: 0; top: 65px; opacity: 100%; }
To verify, your code should produce an output that looks like this, on interaction with the menu.
The next part makes the code responsive to small screens and, satisfies its meaning of existence in the world of websites. This responsive code is just an example for some devices and shows that it is suitable for small screens.
/* Lets make it responsive */
@media screen and (max-width: 674px) {
li {
list-style: none;
color: #000;
border: 1px solid #c7bebe;
position: relative;
left: -40px;
padding: 10px;
width: 130%;
font-size: 1.4em;
}
}
@media screen and (max-width: 500px) {
li {
list-style: none;
color: #000;
border: 1px solid #c7bebe;
position: relative;
left: -40px;
padding: 10px;
width: 120%;
font-size: 1.4em;
}
ul {
background-color: #fff;
position: relative;
top: 65px;
width: 20%;
transition: 0.5s;
left: -15%;
opacity: 0;
}
}
@media screen and (max-width: 400px) {
li {
list-style: none;
color: #000;
border: 1px solid #c7bebe;
position: relative;
left: -40px;
padding: 10px;
width: 129%;
font-size: 1.4em;
}
}
It is now the end of the code of the pure CSS hamburger menu. But wait, learner. This is not the end of the knowledge you can gain. Check out our blogs to learn more and become the best developer.
Simple Portfolio Website Using Html And Css With Source Code
For any queries or doubts, feel free to reach me by mail at aneeshmalapaka@gmail.com or contact the page on Instagram @codewith_random for more wonderful stuff.
I hope you understood the code and learned something new.
Until next time, with a new topic 🙂
Written By: Aneesh Malapaka.
Which code editor do you use for this Hamburger Menu coding?
I personally recommend using VS Code Studio, it’s straightforward and easy to use.
is this project responsive or not?
Yes! this is a responsive project
Do you use any external links to create this project?
No!
