Pure CSS Hamburger Menu | Create css menu hamburger - codewithrandom

Pure CSS Hamburger Menu | Create css menu hamburger - codewithrandom


Pure CSS Hamburger Menu | Create css menu hamburger - codewithrandom

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.)

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.

video


video


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:

See the Pen HambugerCSS by Aneesh Malapaka (@DeepCoder001) on CodePen.


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.

See the Pen HambugerCSS by Aneesh Malapaka (@DeepCoder001) on CodePen.


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.

See the Pen HambugerCSS by Aneesh Malapaka (@DeepCoder001) on CodePen.

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*

See the Pen HambugerCSS by Aneesh Malapaka (@DeepCoder001) on CodePen.


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.

See the Pen HambugerCSS by Aneesh Malapaka (@DeepCoder001) on CodePen.

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 to show 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.

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.

Check out more.....


Post a Comment

Previous Post Next Post