Minimalist Pull Down Nav Menu with jQuery and CSS
File Size: | 4.4 KB |
---|---|
Views Total: | 4175 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A short tutorial about creating a smooth, multi-level, pull down navigation menu from a nested <nav>
list. Smooth animations based on jQuery slideUp & slideDown functions.
How to use it:
1. Create a normal navigation using nested Html lists.
<nav> <ul> <li> <a href="">Menu 01</a> <ul> <li><a href="">Menu 01-01</a></li> <li><a href="">Menu 01-02</a></li> <li><a href="">Menu 01-03</a></li> <li><a href="">Menu 01-04</a></li> </ul> </li> <li> <a href="">Menu 02</a> <ul> <li><a href="">Menu 02-01</a></li> <li><a href="">Menu 02-02</a></li> </ul> </li> <li> <a href="">Menu 03</a> <ul> <li><a href="">Menu 03-01</a></li> <li><a href="">Menu 03-02</a></li> <li><a href="">Menu 03-03</a></li> <li><a href="">Menu 03-04</a></li> <li><a href="">Menu 03-05</a></li> <li><a href="">Menu 03-06</a></li> </ul> </li> <li> <a href="">Menu 04</a> <ul> <li><a href="">Menu 04-01</a></li> </ul> </li> </ul> </nav>
2. The CSS rules to reset the styling of all UL
elements.
nav > ul { font-size: 1em; list-style: none; margin: 0; padding: 0; }
3. The CSS rules to style the pull down menu & sub menus.
nav { width: 960px; margin: 100px auto 0px; font-size: 16px; } nav > ul > li { width: 240px; float: left; position: relative; } nav > ul > li a { display: block; background: #16a085; color: #fff; padding: 5px 0px; text-align: center; text-decoration: none; } nav > ul > li a:hover { background: #1abc9c; } nav > ul > li > ul { position: absolute; width: 100%; left: 0px; top: 100%; display: none; }
4. Include the necessary jQuery JavaScript library at the end of the document.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
5. The JavaScript to active the pull down navigation menu.
(function ($) { 'use strict'; $.fn.pulldown = function (option) { var elm = this, options, delaySpeed = 100; options = $.extend({ slideSpeed: 300 }, option); elm.find('ul>li').hover(function () { $('>ul', $(this)) .stop(true, false) .slideDown(options.slideSpeed); }, function (){ $('>ul', $(this)) .delay(delaySpeed) .slideUp(options.slideSpeed); }); return this; } })(jQuery); $('nav').pulldown();
This awesome jQuery plugin is developed by ourhorizon29. For more Advanced Usages, please check the demo page or visit the official website.