Sidebar Navigation Menu with jQuery | Responsive Menu bar using HTML CSS and jQuery

This is a tutorial blog for learn how to create a navigation bar using HTML CSS and jQuery. This is best blog for you to create a navigation bar using HTML CSS and jQuery.

Video Tutorial for "Sidebar Navigation Menu"

This is a tutorial video for learn how to create a navigation bar using html css and jquery. This is best video for you for create a navigation bar using html css

Sidebar Navigation Menu with jQuery [Source Code]

This source code can help you to create Sidebar Navigation Menu using jQuery. You can use your own images for this project.

jQuery library Source

You can also download this source code through the given link. Click here to download source code

HTML Code

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=1">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

<header class="header"><!--header-start-->
    <div class="logo">
      LOGO
    </div>
    <a href="#" class="nav_ico">
      <span></span>
      <span></span>
      <span></span>     
    </a>
</header><!--header-end-->

<div class="nav-overlay"> </div>
<nav class="side_nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</nav>

<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
</body>
</html>

CSS Code

Copy

*,*:after,*:before{
  box-sizing: border-box;
}
body {
  background: white;
  font-family:arial;
  font-size: 16px;
  margin: 0;
}

.header{
  background: #000;
  padding: 20px 60px;
  color: #fff;
  position: relative;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  font-size: 30px;
  font-weight: 700;
}
.nav_ico {
  display: inline-block;
  width: 30px;
  transition: all 0.3s ease-in-out;
}
.nav_ico.active {
  margin-right: 140px;
}
.nav_ico span {
  transition: all 0.3s ease-in-out;
  height: 2px;
  display: block;
  margin: 4px 0;
  background: white;
}
.nav_ico span:first-child,
.nav_ico span:last-child {
  width: 70%;
  margin: 0 15%;
}
.nav_ico.active span:first-child {
  transform: rotate(45deg);
  transform-origin: 10px 2px 0;
  width: 100%;
  margin: 0;
}
.nav_ico.active span:last-child {
  transform: rotate(-45deg);
  transform-origin: 5px -2px 0;
  width: 100%;
  margin: 0;
}
.nav_ico.active span:nth-child(2) {
  opacity: 0;
}
.nav-overlay {
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: 998;
  background: transparent;
  transition: all 0.3s ease-in-out;
  pointer-events: none;
}
.nav-overlay.active {
  background: rgba(0, 0, 0, 0.7);
  pointer-events: auto;
}

.side_nav{
  position: fixed;
  right: 0;
  top: 0;
  width: 260px;
  height: 100vh;
  background: #000;
  z-index: 999;
  padding-top: 100px;
  transition: all 0.3s ease-in-out;
  transform: translateX(100%);
}
.side_nav.active{
  transform: translateX(0%);
}
.side_nav ul{
  padding: 0;
  margin: 0;
  list-style: none;
}
.side_nav ul li{
  margin: 0;
}
.side_nav ul li a{
  display: block;
  color: #fff;
  font-size: 24px;
  text-decoration: none;
  padding: 15px 30px;
  border-bottom: 1px solid;
  background: linear-gradient(to right,#fff,#fff);
  transition: all 0.3s ease-in-out;
  background-size: 0% 100%;
  background-repeat: no-repeat;
  background-position: right center;
}
.side_nav ul li a:hover{
  background-size: 100% 100%;
  color: #000;
}

JavaScript Code

Copy

$(document).ready(function() {
	$(".nav_ico").click(function(){
		$(this).toggleClass("active");
		$(".side_nav,.nav-overlay").toggleClass("active");
		
		return false
	});
});