Do you want to create the best navigation menu? Then you have come to the right place! In this article, we will create a sidebar menu using HTML, CSS & JavaScript.
SideMenu is a component that displays a vertical menu with a collapsible drop-down sub-menus. It allows you to customize the main screen, manage menu items, add icons and badges, and apply custom styles.
Table of Contents
Introduction
To design the best sidebar menu using HTML, CSS & JavaScript, display the navigation pane to the left of the web page content. Always use collapsible, fully automatic, responsive side navigation.
This article will teach you how to create an excellent sidebar menu using HTML, CSS & JavaScript. You can even try out different sticky navigation bars. Without delay, let us start by following a few simple steps.
Watch the full tutorial on YouTube
If you prefer watching video tutorials over reading articles, you can watch the complete tutorial on the Sidebar Menu using HTML, CSS & JavaScript on my YouTube channel. If needed, you can access the complete source code here. While you are at it, do subscribe and like the content.
Source code for the Sidebar Menu using HTML, CSS & JavaScript
Creating the HTML Structure
The first step is to create a file named index.html with the default HTML boilerplate code for the sidebar menu.
Create three divs, one with the class name ‘content’, another with the class name ‘open’, and the last one with the class name ‘sidebar’. The content div contains a heading element, and the open div contains a span element with an onclick value of openbar() and a bars icon.
The sidebar div contains three divs: one with the class name ‘close’, another with the class name ‘title’, another with the class name ‘social’, and an unordered list with the class name ‘links’.
The close div contains a span element with an onclick value of closebar() and a times icon. Then, the unordered list contains multiple list items for the nav links. Finally, the social div contains multiple <i> tags with the Font Awesome icons for social links.
Refer to the following HTML code and paste it into the file named index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Sidebar Menu</title>
</head>
<body>
<div class="content">
<h2>Sidebar Menu <br> Using HTML and CSS</h2>
</div>
<div class="open">
<span class="fa fa-bars" onclick="openbar()"></span>
</div>
<div class="sidebar" id="sidebar">
<div class="close">
<span class="fa fa-times" onclick="closebar()"></span>
</div>
<div class="title">
SideBar
</div>
<ul class="links">
<li><a href="#"><i class="fa fa-home"></i>Home</a></li>
<li><a href="#"><i class="fa fa-qrcode"></i>Dashboard</a></li>
<li><a href="#"><i class="fa fa-user"></i>Profile</a></li>
<li><a href="#"><i class="fa fa-bell"></i>Notification</a></li>
<li><a href="#"><i class="fa fa-envelope"></i>Contact US</a></li>
<li><a href="#"><i class="fa fa-power-off"></i>Logout</a></li>
</ul>
<div class="social">
<i class="fa fa-instagram"></i>
<i class="fa fa-youtube-play"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
</div>
</div>
<script>
function openbar(){
let sidebar = document.getElementById("sidebar");
sidebar.style.left = "0";
}
function closebar(){
let sidebar = document.getElementById("sidebar");
sidebar.style.left = "-250px";
}
</script>
</body>
</html>Styling with CSS
For styling, create a new file named style.css and add a style link to the HTML head to link to the CSS file. Remember to follow this step; otherwise, the CSS will not work for any HTML class or element.
Style the body element to take up the entire width and height of the viewport with a relative positioning. The content div is styled to have absolute positioning, and the heading element is styled to have center text alignment and a font size of 40 pixels.
The open div is styled to have an absolute positioning, and the open div’s span element is styled to have an absolute positioning with a font size of 30 pixels, a line height of 35 pixels, a white text color, a background of #333, a border radius of 4 pixels, and a pointer cursor.
Now, the sidebar div is styled to have an absolute positioning with a background of #222 and a transition of 0.5 seconds. The close div’s span is styled to have an absolute positioning with a white text color, a background of #444, a border radius of 4 pixels, and a pointer cursor.
Then, the title div is styled to have a font size of 25 pixels, a line height of 60 pixels, a white text color, and a solid gray border-bottom. The list items of the links div are styled to have a block display, no list style, a line height of 60 pixels, and a cursor pointer.
Finally, the social div is styled to have absolute positioning, and the <i> tag is styled to have a font size of 25 pixels with a white text color, a background of #444, a center text alignment, a pointer cursor, a border radius of 5 pixels, and a transition of 0.5 seconds.
Copy and paste the following CSS code into the file named style.css:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
body{
width: 100%;
height: 100vh;
position: relative;
}
.content{
position: absolute;
top: 40%;
left: 40%;
}
.content h2{
text-align: center;
font-size: 40px;
}
.open{
position: absolute;
left: 0;
}
.open span{
position: absolute;
top: 20px;
left: 35px;
font-size: 30px;
line-height: 35px;
padding: 6px 10px;
color: white;
background: #333;
border-radius: 4px;
cursor: pointer;
}
.sidebar{
width: 250px;
position: absolute;
left: -250px;
top: 0;
height: 100%;
background: #222;
transition: 0.5s;
}
.sidebar .close span{
position: absolute;
top: 5px;
right: 10px;
padding: 7px;
color: white;
background: #444;
border-radius: 4px;
cursor: pointer;
}
.sidebar .title{
padding-left: 60px;
font-size: 25px;
line-height: 60px;
color: white;
border-bottom: 2px solid gray;
}
.sidebar .links li{
list-style: none;
display: block;
width: 100%;
line-height: 60px;
border-left: 5px solid transparent;
border-bottom: 2px solid gray;
cursor: pointer;
}
.sidebar .links li:hover{
background: #333;
border-left: 5px solid cornflowerblue;
}
.sidebar .links li a{
text-decoration: none;
color: white;
font-size: 20px;
padding-left: 40px;
transition: 0.5s;
}
.sidebar .links li:hover a{
color: cornflowerblue;
letter-spacing: 1.2px;
}
.sidebar .links li a i{
margin-right: 5px;
}
.sidebar .social{
width: 100%;
position: absolute;
bottom: 30px;
left: 20px;
}
.sidebar .social i{
width: 45px;
font-size: 25px;
color: white;
background: #444;
padding: 10px;
text-align: center;
margin-right: 5px;
cursor: pointer;
border-radius: 5px;
transition: 0.5s;
}
.sidebar .social i:hover{
background: cornflowerblue;
transform: translateY(-10px);
}Following the above steps, you can create an excellent sidebar menu using HTML, CSS & JavaScript. You will get access to the complete source code shown in the video by clicking on the button below.
Conclusion
In this article, we saw how to create a sidebar menu using HTML, CSS & JavaScript. I encourage you to build your own custom sidebar menu and add additional features. If you are still stuck or have any questions, please leave them in the comment section, and I will be happy to help as soon as possible.
Must Visit: Perfect Pricing Card Design Using HTML and CSS
FAQ
How to create a sidebar menu using HTML CSS & JavaScript?
To create a sidebar menu using HTML, CSS & JavaScript, create three divs: one with the class name ‘content’, another with the class name ‘open’, and the last one with the class name ‘sidebar’. Finally, apply appropriate styling.
What is the side menu in HTML5?
SideMenu is a component that displays a vertical menu with a collapsible drop-down sub-menus. SideMenu allows you to manage menu items, add icons and badges, and apply custom styles.