jQuery Responsive Multi-Level Menu Plugin - Dlmenu

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 codrops. For more Advanced Usages, please check the demo page or visit the official website.