jQuery Responsive Multi-Level Menu Plugin - Dlmenu

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

How to start using jQuery?

More in this category...

View our Recommended Plugins

TOP 100 jQuery Plugins 2013

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 &amp; 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 &amp; Photo</a></li>
<li><a href="#">TV &amp; Home Cinema</a></li>
<li><a href="#">Phones</a></li>
<li><a href="#">PC &amp; 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 &amp; Loveseats</a></li>
<li><a href="#">Coffee &amp; Accent Tables</a></li>
<li><a href="#">Chairs &amp; 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 &amp; Dressers</a></li>
</ul>
</li>
<li><a href="#">Home Office</a></li>
<li><a href="#">Dining &amp; Bar</a></li>
<li><a href="#">Patio</a></li>
</ul>
</li>
<li> <a href="#">Jewelry &amp; 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 MARY LOU. For more Advanced Usages, please check the demo page or visit the official website.