iPod Style Drill Down Menu Plugin with jQuery

A jQuery Menu Plugin that allows you to create iPod Style Drill Down Menus  in a small, vertical, compact and fixed-sized area. 

Features:

• Saved state using cookies.
• Add count of total number of child links to each menu option.
• Using a breadcrumb style menu at the top of the drill down menu to navigate.
• A back button to return to previous options.
• Selecting previous link headers, which are fixed at the top of the menu so the user can see the path taken.

How to use it:

1. Inlcude jQuery library and other js libraries into your head section

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/jquery.dcdrilldown.1.2.min.js"></script>

2. Add Themes CSS

<link href="css/dcdrilldown.css" rel="stylesheet" type="text/css" />
<link href="css/skins/graphite.css" rel="stylesheet" type="text/css" />
<link href="css/skins/blue.css" rel="stylesheet" type="text/css" />
<link href="css/skins/grey.css" rel="stylesheet" type="text/css" />
<link href="css/skins/demo.css" rel="stylesheet" type="text/css" />

3. Call the plugin with options

<script type="text/javascript">
$(document).ready(function($){
	$('#drilldown-1').dcDrilldown({
			speed       	: 'fast',
			saveState		: true,
			showCount		: true,
			linkType		: 'link',
			backText		: 'All',
			defaultText		: 'Select Option'
	});
});
</script>

4. Markup

<ul id="drilldown-1">
<li><a href="#">Home</a></li>
<li><a href="#">Products</a>
<ul>
<li><a href="#">Mobile Phones &#038; Accessories</a>
<ul>
<li><a href="#">Product 1</a>
<ul>
<li><a href="#">Part A</a>
<ul>
<li><a href="#">Sale</a>
<ul>
<li><a href="#">Special Offers</a>
<ul>
<li><a href="#">Offer 1</a></li>
<li><a href="#">Offer 2</a></li>
<li><a href="#">Offer 3</a></li>
</ul>
</li>
<li><a href="#">Reduced Price</a>
<ul>
<li><a href="#">Offer 4</a></li>
<li><a href="#">Offer 5</a></li>
<li><a href="#">Offer 6</a></li>
<li><a href="#">Offer 7</a></li>
</ul>
</li>
<li><a href="#">Clearance Items</a>
<ul>
<li><a href="#">Offer 9</a></li>
 
</ul>
</li>
<li class="menu-item-129"><a href="#">Ex-Stock</a>
<ul>
<li><a href="#">Offer 10</a></li>
<li><a href="#">Offer 11</a></li>
<li><a href="#">Offer 12</a></li>
<li><a href="#">Offer 13</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Part B</a></li>
<li><a href="#">Part C</a></li>
<li><a href="#">Part D</a></li>
</ul>
</li>
<li><a href="#">Product 2</a
><ul>
<li><a href="#">Part A</a></li>
<li><a href="#">Part B</a></li>
<li><a href="#">Part C</a></li>
<li><a href="#">Part D</a></li>
</ul>
</li>
<li><a href="#">Product 3</a>
<ul>
<li><a href="#">Part A</a></li>
<li><a href="#">Part B</a></li>
<li><a href="#">Part C</a></li>
<li><a href="#">Part D</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Desktop</a>
<ul>
<li><a href="#">Product 4</a>
<ul>
<li><a href="#">Part E</a></li>
<li><a href="#">Part F</a></li>
<li><a href="#">Part G</a></li>
<li><a href="#">Part H</a></li>
</ul>
</li>
<li><a href="#">Product 5</a>
<ul>
<li><a href="#">Part E</a></li>
<li><a href="#">Part E</a></li>
<li><a href="#">Part F</a></li>
<li><a href="#">Part G</a></li>
<li><a href="#">Part H</a></li>
<li><a href="#">Part G</a></li>
<li><a href="#">Part H</a></li>
</ul>
</li>
<li><a href="#">Product 6</a>
<ul>
<li><a href="#">Part E</a></li>
<li><a href="#">Part F</a></li>
<li><a href="#">Part G</a></li>
<li><a href="#">Part H</a></li>
</ul>
</li>
<li><a href="#">Product 7</a>
<ul>
<li><a href="#">Part E</a></li>
<li><a href="#">Part F</a></li>
<li><a href="#">Part G</a></li>
<li><a href="#">Part H</a></li>
</ul>
</li>
<li><a href="#">Product 8</a>
<ul>
<li><a href="#">Part E</a></li>
<li><a href="#">Part F</a></li>
<li><a href="#">Part G</a></li>
<li><a href="#">Part H</a></li>
</ul>
</li>
<li><a href="#">Product 9</a>
<ul>
<li><a href="#">Part E</a></li>
<li><a href="#">Part F</a></li>
<li><a href="#">Part G</a></li>
<li><a href="#">Part H</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Laptop</a>
<ul>
<li><a href="#">Product 10</a></li>
<li><a href="#">Product 11</a>
<ul>
<li><a href="#">Part E</a></li>
<li><a href="#">Part F</a></li>
<li><a href="#">Part G</a></li>
<li><a href="#">Part H</a></li>
</ul>
</li>
<li><a href="#">Product 12</a></li>
<li><a href="#">Product 13</a></li>
</ul>
</li>
<li><a href="#">Accessories</a>
<ul>
<li><a href="#">Product 14</a></li>
<li><a href="#">Product 15</a></li>
</ul>
</li>
<li><a href="#">Software</a>
<ul>
<li><a href="#">Product 16</a></li>
<li><a href="#">Product 17</a></li>
<li><a href="#">Product 18</a></li>
<li><a href="#">Product 19</a></li>
</ul>
</li>
</ul>
</li>
</ul>

---

This awesome jQuery plugin is developed by designchemical. For more Advanced Usages, please check the demo page or visit the official website.