How to make a simple Side Navigation Bar (side navbar) using HTML, CSS, and Javascript ?

by keshav

side-nav-bar.png

In this article, we will learn how to make a simple side navigation bar (side navbar) using HTML, CSS, and Javascript. The design is responsive and the code is easy to understand.

You can see the live demo of this side navigation bar in this link. 

The use of a side nav bar is common these days. You can see many branded websites using some kind of side navigation bar, so why not use it on your own site. The video and the source code attached to this article will teach you to step by step to create a simple side navigation bar on your own.

To create the side nav bar we have created a div inside which the list of required menu items is placed. Icons for the menu is used from Google Icons. While creating a side nav bar the major role is always played by the CSS.  The design is responsive. For the screen size less than 600px, the navigation bar will be hidden and a hamburger menu will be displayed. Upon clicking that hamburger menu, the side navigation will be displayed. All this code is given below. We recommend you watch the following video along with the code. It will help you to understand the code better.

NOTE (MISSED IN VIDEO) : 

To make the design responsive add the following code in CSS.

 @media screen and (max-width:600px) {
            .side-nav{
                display: none;
            }
            #ham{
                display: block;
            }
        }
VIDEO:
CODE:


See the Pen
responsive sidenav by Vidyasheela (@_vidyasheela)
on CodePen.


Download the HTML file from this link.
Also, Read:

No Comments

Post a Comment

Website Components