Create A Responsive Slide Toggle Navigation with jQuery and CSS

A responsive, full width, mobile first navigation which allows you to reveal a slide menu using jQuery slideToggle() function.

How to use it:

1. Create a list of links for your navigation.

<div class="menu">
  <ul>
    <a href="#">
    <li>I. Home</li>
    </a> <a href="#">
    <li>II. About</li>
    </a> <a href="#">
    <li>III. Services</li>
    </a> <a href="#">
    <li>IV. Blog</li>
    </a> <a href="#">
    <li>VI. Contact</li>
    </a>
  </ul>
</div>

2. The CSS to style the navigation menu.

.menu {
  background: #1abc9c;
  display: none;
  width: 100%;
}

.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

.menu ul li {
  color: #fff;
  font-size: 12px;
  letter-spacing: 2px;
  padding: 15px 0;
  text-transform: uppercase;
}

.menu ul li:hover { background: #16a085; }

.menu a {
  text-decoration: none;
  color: #fff;
}

3. Create a link to toggle the navigation menu.

<a href="#" class="toggle">toggle</a>

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

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 

5. The JavaScript to reveal the navigation menu as you click the toggle link.

$(document).ready(function(){
  $(".toggle").click(function(){ 
    $(".menu").slideToggle(700);
  });
});

---

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