Responsive jquery mobile menu

Responsive Mobile Menu Tutorrial for web designers and developers. Using this code you can easily make a responsive mobile menu for your website. In this tutorial i'm using some jquery code and css media queries.

CSS CODE

body{margin:0px;padding:0px;font-family:Arial, Helvetica, sans-serif;font-size:13px;}
#mob-menu{display:none;height:40px;background:#0066cc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuNRaprh4nT1TeiEK3kc_Uf9T8HG8GsFepboCNlfpDnt2Yg74wPxJoKIHGlQ6gqqD18SeYfeTF6A0kmq5_Lkep4LDHqyEvhhNk-N_3tkGxy-a0g8ijf0C7dkunu-FwYz6YYyuh2sk7tkKU/s1600/menu-bg.png) 10px 8px no-repeat;color:#fff;line-height:40px;font-size:16px;width:100%;text-indent:50px;cursor:pointer;}
#nav{display:table;margin:auto;}
#nav ul{margin:20px 0px 0px 0px;padding:0px;list-style:none;height:40px;background:#06C;}
#nav ul li{float:left;}
#nav ul li a{display:block;height:40px;line-height:40px;color:#fff;font-size:16px;text-decoration:none;padding:0px 15px;}
#nav ul li a:hover{background:#222;}
@media screen and (max-width:768px)
{
 body{padding-top:40px;}
 #mob-menu{display:block;}
 #mob-menu{position:fixed;top:0px;}
 #nav ul{position:absolute;width:100%;margin:0px;height:auto;display:none;left:0px;top:40px;background:#222;}
 #nav ul li{float:none;border-bottom:solid 1px #333;}
 #nav ul li a:hover{background:#444;}
}

Jquery Code

$(function(){
  $('#mob-menu').on('click', function(e) {
    e.preventDefault();
    $('ul').slideToggle();
   });

 });

HTML Code

Menu



Home
About Us
Services
Our Profile
Contact Us
Home
About Us
Services
Our Profile
Contact Us




Responsive Mobile Menu

Download File Used in this example

Total Downloads: