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?

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.

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:

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 Code:

First, let's style the main body, nav, and list.

Since the opacity of ul and input is zero, we cannot see that for a while.

Next part of the code, we add the styling for labels by using the pseudo-elements ::before and ::after.

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.

The ::after specifies the content after the actual content present in the document.

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);
}

NOTE THAT IT IS NOT YET RESPONSIVE FOR THE CODEPEN OUTPUT WINDOW

Now add the last bit of code to make the ul visible and complete the hamburger menu for a normal website.

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.

I hope you understood the code and learned something new.

Until next time, with a new topic :)

Written By: Aneesh Malapaka.