Creating our own hamburger menu using CSS

            

     

      Hamburger menu

            Hamburger menu is a kind of menu that almost resembles the real hamburger. Hence, it is called so. We can use it in our navigation bar. So lets see how we can design our own hamburger menu using CSS and a little bit  of javascript.

            Step 1:

           Open Visual Studio Code and create index.html, style.css files which we will be using. Within your body add two empty divs.

    Step 2:

       Now we will go forward and write some basic CSS for our index.html

        

    

       Step 3:

        Now we are going to add pseudo classes ::before and ::after for our        hamburger button. These are going to be our top and bottom lines in our            hamburger menu. So lets go ahead few CSS to those pseudo classes.

        

     Step 4:

           Don't panic about the open class that I have added. We will cover that shortly. We are going to add some javascript code to add and remove a particular class called open which will indicate the hamburger menu has been clicked. For that purpose we are going attach an event listener to our hamburger button.

        Step 5: 

            Finally our hamburger menu is ready. Go ahead and give it a try. Here is how our final hamburger menu will look like.