Smooth and Responsive Drop Down Menu With CSS3 and jQuery

In today's tutorials we're going to creating a responsive drop down menu with smooth tradition effect using CSS3 and jQuery.

How to use it:

1. HTML Markup

<div class="top">
  ...
  <a href="#" class="menu"><span>≡</span> Menu</a>
</div>
</header>

<div class="drawer">
<nav>
  <ul class="nav nav-tabs nav-stacked">
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
  </ul>
</nav>
...

2. The CSS

.top {
  background: #212121;
  color: #fff;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  z-index: 2;
  overflow: hidden;
}
a.menu {
  position: absolute;
  z-index: 3;
  border:1px solid white;
  text-decoration: none;
  top: 1.6em;
  right: 1.6em;
  color: #fff;
  text-transform: uppercase;
  font-size: 0.65em;
  padding: 0.4em 0.7em;
  border-radius: 4px;
}
a.menu span {
  font-size:1.6em;
  vertical-align: -0.15em;
}
nav ul {
list-style:none;
}
nav ul li a {
display: block;
text-decoration: none;
background: rgba(0,0,0,0.3);
color: white;
padding: 1em;
margin-bottom: 1px;
}
.drawer {
  -webkit-transform: translate3d(0, -131px, 0);
  -moz-transform: translate3d(0, -131px, 0);
  -o-transform: translate3d(0, -131px, 0);
  transform: translate3d(0, -131px, 0);
  -webkit-transition:-webkit-transform 0.25s linear;
  -moz-transition:-moz-transform 0.25s linear;
  -o-transition:-o-transform 0.25s linear;
  transition:transform 0.25s linear;
}
.drawer.active {
  -webkit-transform: translate3d(0,129px,0)
  -moz-transform: translate3d(0,129px,0)
  -o-transform: translate3d(0,129px,0)
  transform: translate3d(0,129px,0)
}

/* Fallbacks */

.no-csstransforms .top {
  position: static;
}

.no-csstransforms .drawer nav {
  display: none;
}

.no-csstransforms .drawer.active nav {
  display: block;
}

3. Include necessary javascript files on your page

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

4. Javascript

<script type="text/javascript">
    $('.menu').click(function(e){
      $('.drawer').toggleClass('active');
      e.preventDefault();
    });
</script>

---

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