Smooth and Responsive Drop Down Menu With CSS3 and jQuery
File Size: | 65.3KB |
---|---|
Views Total: | 6180 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.