Create Responsive Hamburger Menu Using Pure CSS Only

Create Responsive Hamburger Menu Using Pure CSS Only

 
Create Hamburger Menu Using Pure Css
Create Hamburger Menu Using Pure Css

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.

 

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 byAneesh Malapaka
Project DownloadLink Available Below
Language usedHTML and CSS
External link / DependenciesNo
ResponsiveYes
Hamburger Menu Table

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 [email protected] 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!



Tags: , ,

Leave a Reply