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

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;}

Jquery

$(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++;
   }
  });
 });

HTML

Open Menu

 

     
Home
        
About Us
        
Services
        
Contact Us
    

Download File Used in this example View Live Demo