Simple Responsive Css Menu

Responsive menu is the first requirment for responsive web designes. So this is the simplest tutorial of Simple Responsive Css Menu with minimum use of jquery, just copy and paste this code in your website.

CSS

#menu {
 height:50px;
 background:#222;
 width:100%;
 background:#222;
}
#menu {
 padding:0px;
 list-style:none;
 margin:0px auto;
}
#menu li {
 float:left;
}
#menu li a {
 display:block;
 height:50px;
 line-height:50px;
 color:#fff;
 text-decoration:none;
 padding:0px 30px;
 -webkit-transition-duration:.5s;
}
#menu li a:hover {
 background:#444;
}
#pull {
 display:none;
 color:#fff;
 height:50px;
 line-height:50px;
 text-align:center;
 font-size:18px;
 cursor:pointer;
 background:#222;
}
@media screen and (max-width:768px) {
#menu li a {
 padding:0px 10px;
}
}
@media screen and (max-width:480px) {
#pull {
 display:block!important;
}
#menu {
 display:none;
 height:auto;
 background:#333;
}
#menu li {
 float:none;
}
}

Jquery

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

 })

HTML

Menu +

Home
About Us
Features
Contact Us

Download File Used in this example View Live Demo

Total Downloads: