Left Side Menu With Css and Jquery
Here is the tutorial of Left Side Menu With Css and Jquery, you can add this menu to your website simply by adding css and jquery code. This menu also worked in responsive designes
HTML
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<div id="menulink">Open Menu</div>
<div id="left-menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<div>
hello
</div>
CSS
body{margin:0px;padding:0px;}
#menulink{width:100%;background:#009900;color:#fff;height:40px;line-height:40px;text-indent:10px;cursor:pointer;}
#left-menu{width:200px;height:100%;position:fixed;background:#333;margin-left:-200px;}
#left-menu ul{margin:0px;padding:10px 0px;width:100%;list-style:none;}
#left-menu ul li{}
#left-menu ul li a{color:#fff;text-decoration:none;display:block;padding:12px 10px;text-transform:uppercase;border-bottom:solid 1px #000;}
#left-menu ul li a:hover{background:#000;}
JavaScript
$(document).ready(function(){
$count=1;
$('#menulink').click(function(){
if($count%2!=0)
{
$('#left-menu').animate({"marginLeft":"0px"},500,function(){
$('#menulink').html("Close Menu");
});
$count++;
}
else
{
$('#left-menu').animate({"marginLeft":"-200px"},500,function(){
$('#menulink').html("Open Menu");
});
$count++;
}
});
});