Demo Download

When creating a responsive website, you will also need to create a responsive navigation, today I will explain how to create a simple responsive navigation using jQuery and CSS.

Note: Don’t forget to include the jQuery library in the header or footer on the web page.

HTML

<div class="links">
<a href="#" class="showhide"></a>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Blog</a></li>
</ul>
</nav>
</div>

CSS

body, ul{
	padding:0px; margin:0px;
	}
nav ul {
	list-style: none;
	}
nav ul li a{
	color:#000;
	text-decoration: none;
	float:left;
	box-shadow: rgba(255,255,255,0.24) 0 1px 0 0 inset,#fff 0 0px 0 0;
	line-height: 20px;
	font-weight: 100;
	font-size: 20px;
	padding: 5px 18px;
	}
nav ul li a:hover{
	background-color: #0067ab;
	color:#FFFFFF;
	}
.showhide{
	display:none;
	background:url(responsive-icon.jpg) no-repeat;
	width:25px;
	height:20px;
	position: absolute;
	right: 5px;
	top: 5px;
	opacity: 1;
	transition: 1s;
	}
.showhide:hover{
	opacity: .8;
	}
@media only screen and (max-width: 790px) {
.showhide{
	display:block;
	}
nav {
	display:none;
	}
nav ul li a{
	float: none;
	display: block;
	}
}

Note: Don’t forget to change image source URL in the above class .showhide background.

jQuery

$(document).ready(function(){
 $(".showhide").click(function(){
 $("nav").slideToggle("slow");
 });
});

Add the above jQuery in your footer or header but I recommend in footer.

Note: Do not forget to include the meta name=”viewport” in your head section. Otherwise responsive layout will not work in your mobile devices or smart phones but work only in your computer browser. Below is the script to include in your header section.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

If you found this tutorial helpful so share it with your friends, developer groups and leave your comment.

Facebook Official Page: All PHP Tricks

Twitter Official Page: All PHP Tricks