Super Tiny Responsive Toggle Menu with jQuery and CSS3

A simple responsive jQuery navigation script that converts your navigation menu into a dropdown toggle menu on small screens with only 3 lines of Javascript.

Usage:

1. Create a link that will be served as a toggle button on small screen devices.

<a href="#" class="resToggle">☰</a>

2. Create a navigation menu for your website.

<nav class="the-nav">
<ul>
<li><a href="#"> Menu 1 </a></li>
<li><a href="#"> Menu 2 </a></li>
<li><a href="#"> Menu 3 </a></li>
..
</ul>
</nav>

3. All the Html for the toggle menu should be like this.

<header class="the-header clearfix">
<a href="#" class="resToggle">☰</a>
<nav class="the-nav">
<nav class="the-nav">
<ul>
<li><a href="#"> Menu 1 </a></li>
<li><a href="#"> Menu 2 </a></li>
<li><a href="#"> Menu 3 </a></li>
..
</ul>
</nav>
</nav>
</header>

4. The CSS to style the toggle menu and set the responsive breakpoint using CSS3 media queries.

*, *:after, *:before {
box-sizing: border-box;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
ul {
margin: 0;
padding: 0;
}
.the-header {
background: #fa5a62;
}
.the-header .logo {
display: inline-block;
color: white;
float: left;
padding: 0 10px;
}
.the-header a {
color: white;
text-decoration: none;
}
a.resToggle {
display: none;
}
.the-nav {
display: inline-block;
float: right;
}
.the-nav li {
display: inline-block;
transition: all 0.3s;
}
.the-nav li a {
display: block;
padding: 30px 15px;
}
.the-nav li:hover a {
background: #fc414e;
}
@media screen and (max-width: 768px) {
a.resToggle {
display: inline-block;
float: right;
padding: 30px;
}
a.resToggle:hover {
background: #fc414e;
}
.the-nav {
display: none;
width: 100%;
}
.the-nav.active {
display: block;
}
.the-nav li {
display: block;
border-bottom: 1px solid #fb767c;
}
.the-nav li a {
padding: 15px 10px;
}
}

5. Include the latest version of jQuery javasript library at the bottom of your website.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

6. Initialize the toggle menu as follows.

<script>
$('.resToggle').click(function(){
$('.the-nav').toggleClass('active');
});
</script>

---

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