Minimalist Responsive Nav Menu with jQuery and CSS

A jQuery & CSS/CSS3 based menu that utilizes media queries to detect the screen size and turns the regular navigation into a toggleable dropdown menu with a smooth sliding effect in mobile view.

How to use it:

1. Create a normal navigation menu for your website.

<div class="menu">
  <div class="openMenu">Open Menu</div>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Works</a></li>
    <li><a href="#">Serivces</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">About</a></li>
  </ul>
</div>

2. The basic CSS styles to create a horizontal navigation menu on desktop.

.menu {
  overflow: hidden;
  background-color: #FC6D58;
  border-bottom: 5px solid #34495E;
}

.menu ul li { float: left; }

.menu ul li a {
  display: block;
  padding: 10px 20px;
  color: #fff;
}

.menu ul li a:hover { background-color: #34495E; }

3. Uses CSS3 media queries to set the breakpoint and transform the horizontal menu into a dropdown menu with a toggle control.

.openMenu {
  background-color: #2C3E50;
  padding: 10px;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  display: none
}

@media (max-width: 700px) {

.openMenu { display: block }

.menu ul { display: none }

.menu ul li { float: none }

.menu ul li a {
  border-right: none;
  border-bottom: 1px solid #555
}
}

@media (min-width: 700px) {

.menu ul { display: block!important }

}

4. Include the latest version of jQuery library at the bottom of the web page.

<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>

5. The JavaScript to enable the responsive menu.

$(function(){
  var a = 0;
  $('.openMenu').click(function(){
    if ( a == 0 ){
      $(this).text('Hide');
      a++;
    } else {
      $(this).text('Open');
      a = 0;
    }
    $(this).next('ul').slideToggle(500);
  });
});

---

This awesome jQuery plugin is developed by kocakmhmt. For more Advanced Usages, please check the demo page or visit the official website.