iPod Style Drill Down Menu Plugin with jQuery
File Size: | 24.4 KB |
---|---|
Views Total: | 5100 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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 & 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.