Themeforest

jQuery Drill Down Menu Plugin

Getting Started

For the WordPress plugin version go to: Drill Down iPod Menu Widget.

Overview

The jquery drill down menu plugin takes standard nested lists and turns them into iPod style drill down menus.

Drill down menus offer an excellent way of managing and organising large, complicated menus in a small, vertical, compact and fixed-sized area. In term of useability they offer a great alternative to standard drop down menus, which can be cumbersome with multiple levels.

Features of the drill down menu plugin include – saved state using cookies, add count of total number of child links to each menu option and offers 3 different ways to navigate:

  • Using a breadcrumb style menu at the top of the drill down menu
  • 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

This plugin uses the jquery cookie plugin by Klaus Hartl for saving the menu state between pages.

Also Check Out Our Premium jQuery Plugins:

Quick Start

1. Create a HTML Nested List

The plugin is ideal for very complex nested lists. It is important though that your list is formatted correctly – see example below:

<ul id="drilldown">
  <li><a href="#">Category</a>
    <ul>
	  <li><a href="#">Range</a>
	    <ul>
		  <li><a href="#">Manufacturer 1</a>
		    <ul>
			  <li><a href="#">Product A</a></li>
			  <li><a href="#">Product B</a></li>
			  <li><a href="#">Product C</a></li>
			  <li><a href="#">Product D</a></li>
			</ul>
		  </li>
		  <li><a href="#">Manufacturer 2</a>
		    <ul>
			  <li><a href="#">Product E</a></li>
			  <li><a href="#">Product F</a></li>
			  <li><a href="#">Product G</a></li>
			</ul>
		  </li>
		</ul>
	  </li>
	</ul>
  </li>
</ul>

2. Include The jQuery Drill Down Menu Plugin

If you require state saving make sure that you also include the jQuery cookies plugin.

<script type='text/javascript' src='js/jquery.cookie.js'></script>
<script type='text/javascript' src='js/jquery.dcdrilldown.1.2.min.js'></script>

3. Add The CSS

Below is an example of basic styling/minimum css requirements to create a drill down menu. The examples page also gives further samples of CSS.

/* Main menu styling */
#drilldown {
	border-top: 1px solid #bbb;
}
#drilldown a {
	text-decoration: none;
	color: #222;
	padding: 8px 10px;
	border-bottom: 1px solid #bbb;
	border-top: 1px solid #fff;
}
#drilldown li.dd-parent li a {
	padding: 8px 10px 8px 25px;
}
#drilldown a:hover {
	color: #990000;
	background: #fff;
}
#drilldown li.last {
	border-bottom: 1px solid #fff;
}
#drilldown li.dd-parent li a.dd-parent-a {
	padding: 8px 10px;
}
#drilldown li.dd-parent a.active {
	color: #000;
	background-color: #ccc;
}
#drilldown .dd-count {
	position: absolute;
	top: 8px;
	right: 40px;
}

/* Menu Header/Breadcrumbs */
.dd-wrapper .dd-header {
	font-size: 0.9em;
}
.dd-wrapper .dd-header ul {
	width: 100%;
	overflow: hidden;
	border-bottom: 1px solid #bbb;
	padding: 5px 10px;
}
.dd-wrapper .dd-header li {
	display: inline;
	margin-right: 5px;
}
.dd-wrapper .dd-header h3 {
	padding: 5px 10px;
	margin: 0;
	font-size: 1.2em;
}

4. Initialise The Drill Down Menu

For the default configuration the drill down menu can be initialised with the following code:

jQuery(document).ready(function($) {
    jQuery('#drilldown').dcDrilldown();
});

Leave a comment

To add code to your comments wrap the code text in [text][/text] tags

Social Network Tabs
WordPress Social Stream Plugin
Top Social Share Posts Plugin
jQuery Social Share Buttons Plugin
Theme Forest