iPod Style Drilldown Menu With jQuery and Bootstrap

File Size: 41 KB
Views Total: 3513
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
iPod Style Drilldown Menu With jQuery and Bootstrap

A jQuery & Bootstrap based menu plugin that turns the regular nested lists into an iPod style drilldown menu with plenty of customization options.

See also:

How to use it:

1. Load the necessary jQuery library and Bootstrap 3 framework in your webpage.

<link rel="stylesheet" href="bootstrap.min.css">
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>

2. Load the Font Awesome for menu icons.

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

3. Load the jQuery Bootstrap DrillDownMenu plugin's files in the webpage.

<link rel="stylesheet" href="bootstrap.drilldown.css">
<script src="bootstrap.drilldown.js"></script>

4. Call the plugin on your nested Html list.

// options

5. Full plugin options.

wrapper_class   : 'drilldown',
menu_class      : 'drilldown-menu',
submenu_class   : 'nav',
parent_class    : 'dd-parent',
parent_class_link : 'dd-parent-a',
active_class    : 'active',
header_class_list   : 'breadcrumb',
header_class    : 'breadcrumbwrapper',
class_selected  : 'dd-selected',
event_type      : 'click',
hover_delay     : 300,
speed           : 'slow',
save_state      : true,
show_count      : false,
count_class     : 'dd-count',
icon_class      : 'glyphicon glyphicon-chevron-right pull-right',
link_type       : 'backlink', //breadcrumb , link, backlink
reset_text      : '<span class="glyphicon glyphicon-folder-open"></span> All', // All
default_text    : 'Select Option',
show_end_nodes  : true, // drill to final empty nodes
hide_empty      : true, // hide empty menu when menu_height is set, header no effected
menu_height     : false, // '200px' , false for auto height
show_header     : false,
header_tag      : 'div',// h3
header_tag_class: 'list-group-item active' // hidden list-group-item active

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