How To Create Responsive Menu

In this tutorial i will teach you How To Create Responsive Menu or How To Create Responsive Navigation Menu .What is Responsive: The menu automatically changes to one of three different layouts depending on the browser window size.We are using HTML, CSS and Jquery to accomplish this.

HTML:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>How To Create Responsive Menu</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> 
<link href="Style.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var pull = $('#pull');
menu = $('nav ul');
menuHeight = menu.height();
$(pull).on('click', function (e) {
e.preventDefault();
menu.slideToggle();
});
$(window).resize(function () {
var w = $(window).width();
if (w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
});
</script>
</head>
<body>
<h2 class="h2">How To Create Responsive Menu</h2>
<div>

<!--menu-->
<nav class="clearfix">  
<ul class="clearfix">  
<li><a href="#">Home</a></li>  
<li><a href="#">About Us</a></li>  
<li><a href="#">Services</a></li>  
<li><a href="#">Products</a></li>  
<li><a href="#">Career</a></li>  
<li><a href="#">Contact Us</a></li>    
</ul>  
<a href="#" id="pull">Main Menu</a>  
</nav>
</div>


<!--hr-->
<hr />

<!--footer-->
<div class="footer">
<p>&copy; 2013 All rights reserved by HighTechnology.in
<a href="http://hightechnology.in" target="_blank">HighTechnology.in</a>
| Hosting Partner <a href="http://www.grootstech.com" target="_blank">Grootstech Solutions</a></p>
</div>
</body>
</html>

CSS:

body
{
margin:0px auto;
padding-top:40px;
width:100%;
font-family:Candara;
}
.h2
{
text-align:center;
}
.hr
{
padding-top:60px;
border-bottom:solid 2px rgba(0,0,0,0.4);
}
.footer
{
width: 100%;
text-align: center;
padding-top: 0px;
font-size: 16px;
}

/*menu css start here*/
nav {  
height: 40px;  
width: 100%;  
background: #000;  
font-size: 14px;   
position: relative;  
float:left; 
}  
nav ul {  
padding: 0;  
margin: 0 auto;  
width: 600px;  
height: 40px;  
}
nav li {  
display: inline;  
float: left;  
}
.clearfix:before,  
.clearfix:after {  
content: " ";  
display: table;  
}  
.clearfix:after {  
clear: both;  
}  
.clearfix {  
*zoom: 1;  
}
nav a {  
color: #fff;  
display: inline-block;  
width: 100px;  
text-align: center;  
text-decoration: none;  
line-height: 40px;  
} 
nav li a {  
border-right: 1px solid #ccc;  
box-sizing:border-box;  
-moz-box-sizing:border-box;  
-webkit-box-sizing:border-box;  
}  
nav li:last-child a {  
border-right: 0;  
}
nav a:hover, nav a:active {  
background-color: #808080;  
} 
nav a#pull {  
display: none;  
}    

/*Media (Tablets)*/
@media screen and (max-width: 600px) {  
nav {   
height: auto;  
}  
nav ul {  
width: 100%;  
display: block;  
height: auto;  
}  
nav li {  
width: 50%;  
float: left;  
position: relative;  
}  
nav li a {
border-bottom: 1px solid #ccc;        
border-right: 1px solid #ccc;  
}  
nav a {  
text-align: left;  
width: 100%;  
text-indent: 25px;  
}  
}  

/*Mobile devices*/
@media only screen and (max-width : 480px) {  
nav {  
border-bottom: 0;  
}  
nav ul {  
display: none;  
height: auto;  
}  
nav a#pull {  
display: block;  
background-color: #000;  
width: 100%;  
position: relative;  
}  
nav a#pull:after {  
content:"";  
background: url('icon.png') no-repeat;  
width: 30px;  
height: 30px;  
display: inline-block;  
position: absolute;  
right: 15px;  
top: 10px;  
}  
}  
@media only screen and (max-width : 320px) {  
nav li {  
display: block;  
float: none;  
width: 100%;  
}  
nav li a {  
border-bottom: 1px solid #808080;  
}  
}