Responsive jquery mobile menu

by Nikhil Mangal

HTML

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<div id="mob-menu">Menu</div>
<div id="nav">
  <div>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Our Profile</a></li>
      <li><a href="#">Contact Us</a></li>
      <li><a href="#">Home</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Our Profile</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
  </div>
</div>
<h1 align="center">Responsive Mobile Menu</h1>

CSS

body {
  margin: 0px;
  padding: 0px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
}

#mob-menu {
  display: none;
  height: 40px;
  background: #0066cc url(http://2.bp.blogspot.com/-yntO6wkJlhM/VU2V5zFSVXI/AAAAAAAADFE/_pMaJyv7Kmw/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;
  }
}

</style>

JavaScript

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

})