DEV Community

Cover image for Responsive Side Navigation Bar in HTML CSS and JavaScript
Shantanu Jana
Shantanu Jana

Posted on

Responsive Side Navigation Bar in HTML CSS and JavaScript

In this article you will learn how to create Responsive Sidebar Menu using HTML CSS JavaScript. Earlier I shared with you the design of making many more types of Responsive Side Navigation Bar.

I created this project with the help of HTML CSS and JavaScript. First I created a top menu bar. The top menu bar has a logo and a menu button. Then I created a site bar here that contains a lot of icons and menu items.

Besides, sidebar can be activated through hover here. Below I have shared a video tutorial for you which will help you to know how to make this Responsive Side Navigation Bar step by step.

Normally only icons can be seen, texts will be hidden. However, when you click on this menu button, you will see the full sidebar with text and icons.

As the width of the bar is 70px under normal conditions, it can be easily used for any responsive device.

HTML code of Side Navigation Bar

Below I have given the HTML code which is essential for creating this sidebar. However, I have explained these codes step by step. If you have difficulty copying the code, you can use the source code download link.

Basic html structure

The code below is basically the basic structure of this sidebar to which I have added all the HTML code.

<div class="wrapper hover_collapse">

<!-- Top bar -->

<!-- Sidebar -->

</div>
Enter fullscreen mode Exit fullscreen mode

Create top navbar

Now we have created Top Navigation using the following HTML codes. There's a logo here and I've added a menu button.

<div class="top_navbar">
<!-- logo -->
    <div class="logo">Foolish Dev</div>
<!-- menu button -->
   <div class="menu">
     <div class="hamburger">
     <i class="fas fa-bars"></i>
     </div>
   </div>

</div>
Enter fullscreen mode Exit fullscreen mode

Create sidebar
Now we have created the basic structure of the sidebar. The code below was originally used to create the basic structure of the sidebar. In this code I will add all the menu items.

<div class="sidebar">

</div>
Enter fullscreen mode Exit fullscreen mode

The following HTML code helps to add menu icons and text in this sidebar. Here I have added 7 menu items. You can increase or decrease the amount as you need.

<div class="sidebar_inner">
  <ul>
      <li>
      <a href="#">
    <span class="icon"><i class="fa fa-qrcode"></i></span>
    <span class="text">Dashboard</span>
      </a>
      </li>

      <li>
      <a href="#">
    <span class="icon"><i class="fa fa-link"></i></span>
    <span class="text">Shortcuts</span>
      </a>
      </li>
      <li>
      <a href="#">
    <span class="icon"><i class="fa fa-eye"></i></span>
    <span class="text">Overview</span>
      </a>
      </li>
      <li>
      <a href="#">
    <span class="icon"><i class="fa fa-book"></i></span>
    <span class="text">Event</span>
      </a>
      </li>
      <li>
      <a href="#">
    <span class="icon"><i class="fa fa-question-circle"></i></span>
    <span class="text">About</span>
      </a>
      </li>
      <li>
      <a href="#">
    <span class="icon"><i class="fa fa-pen"></i></span>
    <span class="text">Service</span>
      </a>
      </li>
      <li>
      <a href="#">
    <span class="icon"><i class="fa fa-id-card"></i></span>
    <span class="text">Contact</span>
      </a>
      </li>
  </ul>
</div>

Enter fullscreen mode Exit fullscreen mode

CSS code of Responsive Sidebar Menu

The following css codes have helped to design the web page.

*{
 font-family: 'Baloo Paaji 2', cursive;
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 list-style: none;
 text-decoration: none;
}

body{
 background: #f5f5f5;
}
Enter fullscreen mode Exit fullscreen mode

I have designed the top navigation bar using the following codes. Here the width of the top navigation bar is 100% and height: 60px is used.

I used light black as its background color and top: 0, left: 0 helped to keep it at the very top of the webpage.

.top_navbar{
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 60px;
 background: #323233;
 box-shadow: 1px 0 2px rgba(0,0,0,0.125);
 display: flex;
 align-items: center;
}
Enter fullscreen mode Exit fullscreen mode

top navigation bar
Now I have designed the logo. I have used font-size: 25px to increase the text size.

.top_navbar .logo{
 width: 250px;
 font-size: 25px;
 font-weight: 700;
 padding: 0 25px;
 color: white;
 letter-spacing: 2px;
 text-transform: uppercase;
 border-right: 1px solid #f5f5f5;
}
Enter fullscreen mode Exit fullscreen mode

designed the logo
Now I have designed the menu icon. Font-size: 25px has been used to enlarge the menu icon.

.top_navbar .menu{
 width: calc(100% - 250px);
 padding: 0 25px;
 display: flex;
 justify-content: space-between;
 align-items: center;
}

.top_navbar .hamburger{
 font-size: 25px;
 cursor: pointer;
 color: white;
}

.top_navbar .hamburger:hover{
 color: #007dc3;
}
Enter fullscreen mode Exit fullscreen mode

designed the menu icon
Now I have designed the basic sidebar. Here sidebar width: 220px, height: 100% is used and its background color is dark blue.

.sidebar{
 position: fixed;
 top: 60px;
 left: 0;
 width: 220px;
 height: 100%;
 background: #042331;
}
Enter fullscreen mode Exit fullscreen mode

designed the basic sidebar
Now has designed the menu items in the sidebar. Here I have used padding: 16px 25px to keep some distance between each item.

.sidebar ul li a{
 display: block;
 padding: 16px 25px;
 border-bottom: 1px solid #03374e;
 color: #0e94d4;
}

.sidebar ul li a .icon{
 font-size: 18px;
 color: white;
 vertical-align: middle;
}

.sidebar ul li a .text{
 margin-left: 19px;
 color: #fff;
 font-family: sans-serif;
 font-size: 18px;
 letter-spacing: 2px;
}

.sidebar ul li a:hover{
 background: #0e94d4;
 color: #fff;
}
Enter fullscreen mode Exit fullscreen mode

designed the menu items
Using the following CSS codes, we have reduced the width of the sidebar and hidden the text in it. Under normal circumstances the sidebar will be only 70 px in length and the tests will be completely hidden.

.hover_collapse .sidebar{
 width: 70px;
}

.hover_collapse .sidebar ul li a .text{
 display: none;
}
Enter fullscreen mode Exit fullscreen mode

hidden the text

JavaScript of Responsive Side Navigation Bar

I have done basic design of this sidebar using html and css above. Now using some amount of JavaScript I have arranged the menu button and hover effect here.

I have determined the constants of the three class functions one by one.

var li_items = document.querySelectorAll(".sidebar ul li");
var hamburger = document.querySelector(".hamburger");
var wrapper = document.querySelector(".wrapper");
Enter fullscreen mode Exit fullscreen mode

Now I have instructed what kind of change will take place when you move the mouse in this sidebar.

As I said before, when you hover the mouse over it, the sidebar will hold its full size and the text will be visible.

Here I have given the instruction that when you do "mouseenter" then "hover_collapse" will be removed which means "hover_collapse" will be removed from the sidebar.

Removing "hover_collapse" means the sitebar will retain its old shape.

li_items.forEach((li_item)=>{
   li_item.addEventListener("mouseenter", ()=>{

    li_item.closest(".wrapper").classList.remove("hover_collapse");

  })
})
Enter fullscreen mode Exit fullscreen mode

Now I have instructed what kind of change will happen when you "mouseleave". Then "hover_collapse" will be added again, meaning the text will be completely hidden.

li_items.forEach((li_item)=>{
   li_item.addEventListener("mouseleave", ()=>{

    li_item.closest(".wrapper").classList.add("hover_collapse");

   })
})
Enter fullscreen mode Exit fullscreen mode

Above we have arranged to make the menu bar functional by hover. Now I have activated the menu button.

When you click on the menu button, the sidebar retains its old shape. For this I have taken the help of "classList.toggle".

When you first click, "hover_collapse" will be removed from the sidebar, and when you click again, "hover_collapse" will be added to the sidebar.

hamburger.addEventListener("click", () => {

    hamburger.closest(".wrapper").classList.toggle("hover_collapse");
})
Enter fullscreen mode Exit fullscreen mode

Hopefully from this article you have learned how I created this Responsive Side Navigation Bar using HTML CSS and JavaScript.

If you like the design, please comment. You can download the required source code with the help of this link.

You can visit my blog for more tutorials like this. 😊
https://www.foolishdeveloper.com/

Discussion (9)

Collapse
cheribc profile image
Heather B Cooper

Thank you for breaking it down in steps and it's very helpful!

Collapse
franklin45web profile image
franklin45-web

Great work

Collapse
shantanu_jana profile image
Shantanu Jana Author

Thank you

Collapse
mangirima profile image
Kevin omanga

Great work

Collapse
shantanu_jana profile image
Shantanu Jana Author

Thank you

Collapse
amauryperalta28 profile image
Amaury R. Peralta Febles

Great post, very clear

Collapse
shantanu_jana profile image
Shantanu Jana Author

Thank you

Collapse
thomasbnt profile image
Thomas Bnt

Great post !

Collapse
shantanu_jana profile image
Shantanu Jana Author

Thank you