In this post, we will learn how to create side navigation using JavaScript. Side navigation improves the user experience of the website. With its help, it is easy to visit various pages of the website.


How To Create A Sidebar Menu with JavaScript ?


Create A Sidebar Menu

Example of different types of sidebar menus

Sidebar Overlay
Sidebar Overlay With Animation
Sidebar Push
Sidebar Push with Opacity
Sidebar Full Screen Width

Some sidebars are not working properly due to some reasons. Therefore, you practice by copy-pasting the code in your code editor. alert-warning

To create a sidebar menu, we follow this following steps:

Step (1) : In this first step, we write HTML code as follows:

<div class="side-bar" id="sidebar">
<a class="closebtn" href="javascript:void(0)" onclick="closeSidebar()">×</a>
<a href="#">Latest News</a>
<a href="#">Tutorials</a>
<a href="#">What Is</a>
<a href="#">How To</a>
</div>
<span class="sidebarSpan" onclick="openSidebar()">Sidebar Overlay</span> code-box

Step (2) : In this step, we write CSS code as follows:

.side-bar {
height: 100%;
width: 0;
position: fixed;
z-index: 9999;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 60px;
}
.side-bar a {
padding: 6px 6px 6px 30px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
}
.side-bar a:hover {
color: #fff;
text-decoration: none;
}
.side-bar .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
}
.sidebarSpan {
display: inline-block;
background-color: #333;
color: #fff;
padding: 8px;
margin: 5px 0;
cursor: pointer;
}
@media screen and (max-height:450px) {
.side-bar {padding-top: 15px;}
.side-bar a {font-size: 18px;}
} code-box

Step (3) : Now in this step three we will write code for different sidebars as follows:

Sidebar Overlay

function openSidebar() {
document.getElementById("sidebar").style.width = "250px";
}

function closeSidebar() {
document.getElementById("sidebar").style.width = "0";
} code-box

Sidebar Overlay With Animation

Add this CSS code to .side-bar class as follows:
.side-bar {
transition: margin-left 0.5s;
} code-box

Add this JavaScript code as follows:
function openSidebar() {
document.getElementById("sidebar").style.width = "250px";
}

function closeSidebar() {
document.getElementById("sidebar").style.width = "0";
code-box

Sidebar Push

In the sidebar push, we will make the width of the sidebar 250px and give the main content a 250px margin from the left side. So that whenever the sidebar is open, the main content can also be pushed from the left side.
function openSidebar() {
document.getElementById("sidebar").style.width = "250px";
document.getElementById("outer-wrapper").style.marginLeft = "250px";
}

function closeSidebar() {
document.getElementById("sidebar").style.width = "0";
document.getElementById("outer-wrapper").style.marginLeft = "0";
} code-box

Sidebar Push with Opacity

Whenever the sidebar is open, we will change the background color of the body so that the opacity effect is visible.
function openSidebar() {
document.getElementById("sidebar").style.width = "250px";
document.getElementById("outer-wrapper").style.marginLeft = "250px";
document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}

function closeSidebar() {
document.getElementById("sidebar").style.width = "0";
document.getElementById("outer-wrapper").style.marginLeft = "0";
document.body.style.backgroundColor = "white";
} code-box

Sidebar Full Screen Width

In order to show the sidebar on full screen, we will make the width of the sidebar 100% and make the sidebar in the center with the help of text-align:center.
function openSidebar() {
document.getElementById("sidebar").style.textAlign = "center";
document.getElementById("sidebar").style.width = "100%";
}

function closeSidebar() {
document.getElementById("sidebar").style.width = "100%";
} code-box

Summary

In this post we learn how to create a sidebar menu with JavaScript. You try to make it yourself. I hope you make. If you face any problem, then comment and tell us. Keep visiting the blog to read more similar posts.

Post a Comment

Previous Post Next Post