jQuery Responsive Multi-Level Menu Plugin - Dlmenu
File Size: | 26.5 KB |
---|---|
Views Total: | 74306 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

An extremely simple and responsive jQuery plugin that allows you to create multi-level drop down menu with subtle effects (sliding, fading, scale up, or scale down). Each sub-menu in this menu will be shown in its own context, making the “parent” level disappear, good for saving space for menus which have a lot of content.
Features:
- Demo1: The submenu will slide and fade in from the right while the previous level rotates slightly and disappears in the back.
- Demo2: The submenu will slide to the side and fade out. Going a level deeper will slide the submenu from the right; going back will slide from the left.
- Demo3: The submenu will fade in and scale up from the back and the current level will fade out and move down.
- Demo4: The submenu will scale up from the back and fade in while the current level scales up and fades out.
- Demo5: The submenu will scale down from the front while the current level scales down and fades out.
How to use it:
1. Include jQuery library and jquery.dlmenu.js on your web page
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="js/jquery.dlmenu.js"></script>
2. Markup html structure
<div id="dl-menu" class="dl-menuwrapper"> <button>Open Menu</button> <ul class="dl-menu"> <li> <a href="#">Fashion</a> <ul class="dl-submenu"> <li class="dl-back"><a href="#">back</a></li> <li> <a href="#">Men</a> <ul class="dl-submenu"> <li class="dl-back"><a href="#">back</a></li> <li><a href="#">Shirts</a></li> <li><a href="#">Jackets</a></li> <li><a href="#">Chinos & Trousers</a></li> <li><a href="#">Jeans</a></li> <li><a href="#">T-Shirts</a></li> <li><a href="#">Underwear</a></li> </ul> </li> <li> <a href="#">Women</a> <ul class="dl-submenu"> <li class="dl-back"><a href="#">back</a></li> <li><a href="#">Jackets</a></li> <li><a href="#">Knits</a></li> <li><a href="#">Jeans</a></li> <li><a href="#">Dresses</a></li> <li><a href="#">Blouses</a></li> <li><a href="#">T-Shirts</a></li> <li><a href="#">Underwear</a></li> </ul> </li> <li> <a href="#">Children</a> <ul class="dl-submenu"> <li class="dl-back"><a href="#">back</a></li> <li><a href="#">Boys</a></li> <li><a href="#">Girls</a></li> </ul> </li> </ul> </li> <li> <a href="#">Electronics</a> <ul class="dl-submenu"> <li class="dl-back"><a href="#">back</a></li> <li><a href="#">Camera & Photo</a></li> <li><a href="#">TV & Home Cinema</a></li> <li><a href="#">Phones</a></li> <li><a href="#">PC & Video Games</a></li> </ul> </li> <li> <a href="#">Furniture</a> <ul class="dl-submenu"> <li class="dl-back"><a href="#">back</a></li> <li> <a href="#">Living Room</a> <ul class="dl-submenu"> <li class="dl-back"><a href="#">back</a></li> <li><a href="#">Sofas & Loveseats</a></li> <li><a href="#">Coffee & Accent Tables</a></li> <li><a href="#">Chairs & Recliners</a></li> <li><a href="#">Bookshelves</a></li> </ul> </li> <li> <a href="#">Bedroom</a> <ul class="dl-submenu"> <li class="dl-back"><a href="#">back</a></li> <li> <a href="#">Beds</a> <ul class="dl-submenu"> <li class="dl-back"><a href="#">back</a></li> <li><a href="#">Upholstered Beds</a></li> <li><a href="#">Divans</a></li> <li><a href="#">Metal Beds</a></li> <li><a href="#">Storage Beds</a></li> <li><a href="#">Wooden Beds</a></li> <li><a href="#">Children's Beds</a></li> </ul> </li> <li><a href="#">Bedroom Sets</a></li> <li><a href="#">Chests & Dressers</a></li> </ul> </li> <li><a href="#">Home Office</a></li> <li><a href="#">Dining & Bar</a></li> <li><a href="#">Patio</a></li> </ul> </li> <li> <a href="#">Jewelry & Watches</a> <ul class="dl-submenu"> <li class="dl-back"><a href="#">back</a></li> <li><a href="#">Fine Jewelry</a></li> <li><a href="#">Fashion Jewelry</a></li> <li><a href="#">Watches</a></li> <li> <a href="#">Wedding Jewelry</a> <ul class="dl-submenu"> <li class="dl-back"><a href="#">back</a></li> <li><a href="#">Engagement Rings</a></li> <li><a href="#">Bridal Sets</a></li> <li><a href="#">Women's Wedding Bands</a></li> <li><a href="#">Men's Wedding Bands</a></li> </ul> </li> </ul> </li> </ul> </div>
3. Include required css file on your page
<link rel="stylesheet" type="text/css" href="css/component.css" />
4. Call the plugin
<script> $(function() { $( '#dl-menu' ).dlmenu(); }); </script>
This awesome jQuery plugin is developed by codrops. For more Advanced Usages, please check the demo page or visit the official website.