Responsive Side Navigation Bar in HTML CSS and JavaScript
Tags: html, webdev, beginners, tutorial
Published: 2021-11-22 15:42:48

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. 

✅ **Watch Live Preview** 👉👉  [Responsive Sidebar Menu](https://www.foolishdeveloper.com/2021/11/responsive-sidebar-menu-using-html-css.html) 

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.

{% youtube dZUARXDQEBw %}

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](https://www.foolishdeveloper.com/2021/11/responsive-sidebar-menu-using-html-css.html) link.

**Basic html structure**

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

```html
<div class="wrapper hover_collapse">

<!-- Top bar -->

<!-- Sidebar -->

</div>
```
**Create top navbar**

Now we have created [Top Navigation menu](https://www.foolishdeveloper.com/2021/05/responsive-top-navigation-menu-bar.html) using the following HTML codes. There's a logo here and I've added a menu button.
```html
<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>
```
**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.
```html
<div class="sidebar">

</div>
```
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.
```html
<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>

```

## CSS code of Responsive Sidebar Menu

The following css codes have helped to design the web page.
```css
*{
 font-family: 'Baloo Paaji 2', cursive;
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 list-style: none;
 text-decoration: none;
}

body{
 background: #f5f5f5;
}
```
I have designed the top navigation bar using the following codes. Here the width of the [top navigation bar](https://www.foolishdeveloper.com/2021/05/responsive-top-navigation-menu-bar.html) 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.
```css
.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;
}
```
![top navigation bar](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o8p7rpucvix0ase5wluo.jpg)
Now I have designed the logo. I have used `font-size: 25px` to increase the text size.
```css
.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;
}
```
![designed the logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9jt8lpfjoy3m8smt9c9j.jpg)
Now I have designed the menu icon. `Font-size: 25px` has been used to enlarge the menu icon.
```css
.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;
}
```
![designed the menu icon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k1titwywo8ebk29b0lov.jpg)
Now I have designed the basic sidebar. Here sidebar `width: 220px`, `height: 100%` is used and its background color is dark blue.
```css
.sidebar{
 position: fixed;
 top: 60px;
 left: 0;
 width: 220px;
 height: 100%;
 background: #042331;
}
```
![designed the basic sidebar](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ja3fffg25nbcysk2zgc1.jpg)
Now has designed the menu items in the sidebar. Here I have used `padding: 16px 25px` to keep some distance between each item.
```css
.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;
}
```
![designed the menu items](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/us3rugjcypumf070oe2k.jpg)
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.
```css
.hover_collapse .sidebar{
 width: 70px;
}

.hover_collapse .sidebar ul li a .text{
 display: none;
}
```
![hidden the text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y23hsfdekanwafwksl8a.jpg)
## 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.
```javascript
var li_items = document.querySelectorAll(".sidebar ul li");
var hamburger = document.querySelector(".hamburger");
var wrapper = document.querySelector(".wrapper");
```

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.
```javascript
li_items.forEach((li_item)=>{
   li_item.addEventListener("mouseenter", ()=>{
 
	li_item.closest(".wrapper").classList.remove("hover_collapse");
 
  })
})
```

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.
```javascript
li_items.forEach((li_item)=>{
   li_item.addEventListener("mouseleave", ()=>{
 
	li_item.closest(".wrapper").classList.add("hover_collapse");
 
   })
})
```

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.

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

	hamburger.closest(".wrapper").classList.toggle("hover_collapse");
})
```
Hopefully from this article you have learned how I created this **Responsive Side Navigation Bar using HTML CSS and JavaScript**. 
**Related Post:**
1. [Simple Footer HTML CSS](https://www.foolishdeveloper.com/2021/09/responsive-footer-design.html) 
2. [Make a Todo List using JavaScript](https://www.foolishdeveloper.com/2021/11/todo-list-javascript.html)
3. [Simple Stopwatch using JavaScript](https://www.foolishdeveloper.com/2021/10/simple-stopwatch-using-javascript.html)
4. [Javascript Age Calculator](https://www.foolishdeveloper.com/2021/07/javascript-age-calculator.html)
5. [Random Password Generator with JavaScript](https://www.foolishdeveloper.com/2021/07/random-password-generator-javascript.html)
6. [Automatic Image Slider in Html, CSS](https://www.foolishdeveloper.com/2021/07/automatic-image-slider.html) 
7. [Sidebar Menu Using HTML CSS](https://www.foolishdeveloper.com/2021/06/sidebar-menu-using-html-css-javascript.html) 

If you like the design, please comment. You can download the [required source code](https://www.foolishdeveloper.com/2021/11/responsive-sidebar-menu-using-html-css.html) with the help of this link.

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