ADVERTISEMENT

Create Hamburger Menu Using Pure Css

Telegram Group Join Now

ADVERTISEMENT

Create Hamburger Menu Using Pure Css

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 hamburger menu, as said in the title, using only CSS (and a little HTML, of course.)

ADVERTISEMENT

ADVERTISEMENT

First, let us start with the basics and then deep dive into the magic of CSS.

 

ADVERTISEMENT

 

ADVERTISEMENT

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.

ADVERTISEMENT

First, let us see the output and then dive into the code part of that.

 

 

ADVERTISEMENT

Working:

ADVERTISEMENT

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:

 

ADVERTISEMENT

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. 

ADVERTISEMENT

We then create a navbar using the nav tag containing the unordered list containing list items of the menu items we need.

ADVERTISEMENT

Let’s now style the HTML.

ADVERTISEMENT

CSS:

ADVERTISEMENT

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.

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

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 knowledge you can gain. Check out our blogs to learn more and become the best developer.

50+ HTML, CSS & JavaScript Projects 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!

ADVERTISEMENT

Telegram Group Join Now

Share on:

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT