Create Slide Out Navigation Menu with jQuery and CSS

In current web trends, slide out navigation menus are very common in responsive design. The slide out menus are very flexible and functional with many advantages like it saves space, remove clutter from page and makes website more readable by putting all the emphasis on the content. Previously we have published tutorial to create dynamic tree-view menus with PHP and MySQL and get huge response from our readers. Many of them requested to also publish tutorial to create slide out and slide in navigation menu.

So in this tutorial you will learn how to create slide out and slide in navigation menu with jQuery and CSS. The tutorial explained in easy steps with live demo and also link to download source code of live demo.

Also, read:

As we have covered this tutorial with live demo to create slide out and slide in navigation menu with jQuery and CSS, so the file structure for this example is following.

index.php
style.css
slide.js

Steps1: Create Slide Navigation Menu HTML
First in index.php, we will create slide navigation menu HTML.

<div id='slide_nav'>     
	<p id="slide_nav_button">☰</p>
</div>
<ul id='slide_menu'>  
	<li><a href="#">Home</a></li>
	<li><a href="#">About</a></li>
	<li><a href="#">Contact</a></li>
	<li><a href="#">Tutorial</a></li>
	<li><a href="#">Advertise</a></li>
</ul>

Steps2: Add Style to Slide Navigation Menu HTML
Then in style.css, we will add styles to slide navigation menu HTML.

body {
  margin:0px auto;
  padding:0px;
}
#slide_nav {
  background-color:black;
  width:100%;
  height:60px;
  line-height:60px;
  color:white;
  font-family:helvetica;
  font-size:25px;
  padding-left:10px;
  box-sizing:border-box;
}
#slide_nav_button {
  width:90px;
  cursor:pointer;
}
ul {
  display:none;
  padding:0px;
  margin:0px;
  width:200px;
  height:90%;
  background-color:#2E2E2E;
  position:absolute;
  box-shadow:inset 0px 0px 50px 0px #6E6E6E;
}
#slide_menu li {
  border-bottom:1px solid #424242;
}
#slide_menu li:hover {
  width:201px;
  background-color:#2E2E2E;
  box-shadow:inset 0px 0px 50px 0px #848484;
  -webkit-transition: all 300ms linear;
  -ms-transition: all 300ms linear;
  transition: all 300ms linear; 
}
#slide_menu li a {
  height:50px;
  line-height:50px;
  display:block;
  color:silver;
  text-decoration:none;
  font-size:18px;
  font-family: helvetica;
  padding-left:10px;
}
#slide_menu li:hover a {
  padding-left:25px;
  color:white;
  -webkit-transition: all 200ms linear;
  -ms-transition: all 200ms linear;
  transition: all 200ms linear;
}
#page_content {
  margin-top:40px;
  text-align:center;
  font-family: helvetica;
}

Steps3: Make Navigation Menus Slide Out and Slide In
Now finally in slide.js, we will handle functionality to make navigation menu slide out and slide when click on menu icon using jQuery animate() function.

$(document).ready(function(){
  $("#slide_nav_button").click(function(){
    $('#slide_menu').animate({width:'toggle'},300);
  });
});

Latest Tutorials

Popular Tags