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
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>
Create top navbar
Now we have created Top Navigation menu 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>
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>
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>
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;
}
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;
}
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;
}
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;
}
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;
}
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;
}
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;
}
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");
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");
})
})
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");
})
})
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");
})
Hopefully from this article you have learned how I created this Responsive Side Navigation Bar using HTML CSS and JavaScript.
Related Post:
- Responsive Footer HTML CSS
- International Schools in Bangalore
- Simple Stopwatch using JavaScript
- Preschools in Whitefield
- javaScript Password Generator
- International Schools in Hyderabad
- Sidebar Menu Using HTML CSS
If you like the design, please comment. You can download the required with the help of this link.
You can visit my blog for more tutorials like this. 😊
https://www.foolishdeveloper.com/
Top comments (9)
Thank you for breaking it down in steps and it's very helpful!
Great work
Thank you
Great work
Thank you
Great post, very clear
Thank you
Great post !
Thank you