Simple Responsive Navigation Using jQuery


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

Article By
Javed Ur Rehman is a passionate blogger and web developer, he loves to share web development tutorials and blogging tips. He usually writes about HTML, CSS, JavaScript, Jquery, Ajax, PHP and MySQL.
  1. Thank you very much sir.

    I really have been looking for a simpler way to do responsive menus but this is really what I need.

Leave a Reply

Your email address will not be published. Required fields are marked *