Hello readers, Today in this blog you’ll learn how to create a Side Navigation Menu Bar using HTML CSS & jQuery. Earlier I have shared a Responsive Dropdown Menu Bar using only HTML & CSS. Now, it’s time to create a side navigation menu bar in jQuery.
The sidebar can be used to encourage the reader or visitors to read the more detailed main article. For example, a sidebar can be made that lists the major points of the main article, content, or asks questions about the information that will be given in the main article as a way to entice readers to read the whole main section.
In this Sidebar, there are some menu items and when you click on the specific icon this web page scroll and show you the clicked section. That means when click on the about section the page will scroll down and show you the about section. In the menu items you can see there is a small vertical line on the left corner of items. That line is used to inform that which item is active now.
If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Side Navigation Menu Bar).
Video Tutorial of Side Navigation Menu Bar in jQuery
I used jQuery to only show or hide the sidebar. All this design based in HTML & CSS. If you’re a beginner you can also create this type of sidebar menu. If you like this program (Side Navigation Menu Bar) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down.
You might like this:
Sidebar Menu using HTML CSS & jQuery [Source Codes]
To create this program (Side Navigation Menu Bar). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file. First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.
<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Side Menu Bar</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#gallery">Gallery</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#feedback">Feedback</a></li>
<li><a class="contact" href="#contact">Contact</a></li>
</ul>
<section>
<i class="fas fa-bars"></i>
<div class="sec1"></div>
<h2 id="about">
About Section
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem eveniet asperiores error tempora ea nobis ut quos fugiat commodi doloribus aut dolore quibusdam fuga, excepturi modi ipsa rerum nisi qui repellat, facilis hic impedit praesentium? Doloremque autem hic blanditiis, tempora? Magni reiciendis fugit consequatur nam, voluptate laudantium voluptatum veritatis aut libero, cumque non quo possimus officiis a! Qui tempora tenetur, fuga quos at provident nihil nobis illum quibusdam. Nemo odit error nostrum, aliquid et quas in optio nesciunt tempore minus saepe architecto recusandae ipsam. Explicabo et rerum, iure odio! Amet ad sunt beatae vero corporis dicta sint provident laborum tenetur?
</p>
<div class="sec2"></div>
<h2 id="portfolio">
Portfolio Section
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem eveniet asperiores error tempora ea nobis ut quos fugiat commodi doloribus aut dolore quibusdam fuga, excepturi modi ipsa rerum nisi qui repellat, facilis hic impedit praesentium? Doloremque autem hic blanditiis, tempora? Magni reiciendis fugit consequatur nam, voluptate laudantium voluptatum veritatis aut libero, cumque non quo possimus officiis a! Qui tempora tenetur, fuga quos at provident nihil nobis illum quibusdam. Nemo odit error nostrum, aliquid et quas in optio nesciunt tempore minus saepe architecto recusandae ipsam. Explicabo et rerum, iure odio! Amet ad sunt beatae vero corporis dicta sint provident laborum tenetur?
</p>
<div class="sec3"></div>
<h2 id="gallery">
Gallery Section
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem eveniet asperiores error tempora ea nobis ut quos fugiat commodi doloribus aut dolore quibusdam fuga, excepturi modi ipsa rerum nisi qui repellat, facilis hic impedit praesentium? Doloremque autem hic blanditiis, tempora? Magni reiciendis fugit consequatur nam, voluptate laudantium voluptatum veritatis aut libero, cumque non quo possimus officiis a! Qui tempora tenetur, fuga quos at provident nihil nobis illum quibusdam. Nemo odit error nostrum, aliquid et quas in optio nesciunt tempore minus saepe architecto recusandae ipsam. Explicabo et rerum, iure odio! Amet ad sunt beatae vero corporis dicta sint provident laborum tenetur?
</p>
<div class="sec4"></div>
<h2 id="services">
Services Section
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem eveniet asperiores error tempora ea nobis ut quos fugiat commodi doloribus aut dolore quibusdam fuga, excepturi modi ipsa rerum nisi qui repellat, facilis hic impedit praesentium? Doloremque autem hic blanditiis, tempora? Magni reiciendis fugit consequatur nam, voluptate laudantium voluptatum veritatis aut libero, cumque non quo possimus officiis a! Qui tempora tenetur, fuga quos at provident nihil nobis illum quibusdam. Nemo odit error nostrum, aliquid et quas in optio nesciunt tempore minus saepe architecto recusandae ipsam. Explicabo et rerum, iure odio! Amet ad sunt beatae vero corporis dicta sint provident laborum tenetur?
</p>
<div class="sec5"></div>
<h2 id="feedback">
Feedback Section
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem eveniet asperiores error tempora ea nobis ut quos fugiat commodi doloribus aut dolore quibusdam fuga, excepturi modi ipsa rerum nisi qui repellat, facilis hic impedit praesentium? Doloremque autem hic blanditiis, tempora? Magni reiciendis fugit consequatur nam, voluptate laudantium voluptatum veritatis aut libero, cumque non quo possimus officiis a! Qui tempora tenetur, fuga quos at provident nihil nobis illum quibusdam. Nemo odit error nostrum, aliquid et quas in optio nesciunt tempore minus saepe architecto recusandae ipsam. Explicabo et rerum, iure odio! Amet ad sunt beatae vero corporis dicta sint provident laborum tenetur?
</p>
<div class="sec6"></div>
<h2 id="contact">
Contact Section
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem eveniet asperiores error tempora ea nobis ut quos fugiat commodi doloribus aut dolore quibusdam fuga, excepturi modi ipsa rerum nisi qui repellat, facilis hic impedit praesentium? Doloremque autem hic blanditiis, tempora? Magni reiciendis fugit consequatur nam, voluptate laudantium voluptatum veritatis aut libero, cumque non quo possimus officiis a! Qui tempora tenetur, fuga quos at provident nihil nobis illum quibusdam. Nemo odit error nostrum, aliquid et quas in optio nesciunt tempore minus saepe architecto recusandae ipsam. Explicabo et rerum, iure odio! Amet ad sunt beatae vero corporis dicta sint provident laborum tenetur?
</p>
<div class="sec7"></div>
</section>
<script>
$(document).ready(function(){
$('i').click(function(){
$('ul').toggleClass('ul_show');
$('section').toggleClass('slide_image');
});
$('li').click(function(){
$(this).addClass('active').siblings().removeClass('active');
});
});
</script>
</body>
</html>
Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
*{
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
}
html{
scroll-behavior: smooth;
}
body{
font-family: montserrat;
}
ul{
position: fixed;
top: 0;
left: 0;
margin-left: -240px;
width: 240px;
background: #1e1e1e;
height: 100vh;
overflow-y: auto;
transition: all .3s;
}
ul li{
height: 65px;
outline: none;
}
ul li a{
display: block;
height: 100%;
width: 100%;
line-height: 70px;
font-size: 20px;
color: white;
padding-left: 10%;
background: #1e1e1e;
border-top: 1px solid rgba(255,255,255,.1);
border-bottom: 1px solid black;
border-left: 5px solid transparent;
}
li a.contact{
border-bottom: 1px solid rgba(0,0,0,.5);
}
.active a{
color: #B93632;
border-left: 5px solid #B93632;
background: #1B1B1B;
}
section{
margin-left: 0px;
transition: all .3s;
}
i{
position: fixed;
margin: 20px 25px;
font-size: 40px;
color: orangered;
cursor: pointer;
}
.sec1{
margin-left: -20px;
background: url(home.jpg) no-repeat;
background-size: cover;
height: 100vh;
}
.sec2{
margin-left: -20px;
background: url(about.jpg) no-repeat;
background-size: cover;
height: 100vh;
}
.sec3{
margin-left: -20px;
background: url(portfolio.jpg) no-repeat;
background-size: cover;
height: 100vh;
}
.sec4{
margin-left: -20px;
background: url(gallery.jpg) no-repeat;
background-size: cover;
height: 100vh;
}
.sec5{
margin-left: -20px;
background: url(services.jpg) no-repeat;
background-size: cover;
height: 100vh;
}
.sec6{
margin-left: -20px;
background: url(feedback.jpg) no-repeat;
background-size: cover;
height: 100vh;
}
.sec7{
margin-left: -20px;
background: url(contact.jpg) no-repeat;
background-size: cover;
height: 100vh;
}
h2{
font-size: 40px;
padding: 15px 20px;
}
p{
padding: 0 20px 10px 20px;
text-align: justify;
}
.ul_show{
margin-left: 0px;
}
.slide_image{
margin-left: 260px;
}
That’s all, now you’ve successfully created a Side Navigation Menu Bar in HTML CSS & JavaScript. If your code not work or you’ve faced any errors/problems then please comment down or contact us from the contact page.
