Coder Social home page Coder Social logo

bootstrap-drilldownmenu's Introduction

Bootstrap iPod Style jQuery Drill Down Menu Plugin

Screenshot

##Demos

Live demo on bootply

Live demo app on mewsoft.com

##Full Example Code

<!DOCTYPE html>
<html>
	<head>
		<title>Bootstrap iPod Style jQuery Drill Down Menu Plugin</title>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- link href="css/dcdrilldown.css" rel="stylesheet" type="text/css" /-->
		<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
		<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" />
		<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
		<!--[if lt IE 9]>
		<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
		<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
		<![endif]-->
		<script src="http://code.jquery.com/jquery.min.js"></script>
		<script type="text/javascript" src="jquery.cookie.js"></script>
		<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
		
		<link rel="stylesheet" href="bootstrap.drilldown.css" />
        <script type="text/javascript" src="bootstrap.drilldown.js"></script>

	</head>

	<body>
		<div class="container">
			<div class="row">
				<div class="col-sm-8">
					<br><br>
					<div class="">
						<ul id="drilldown">
							<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>
							<li>
								<a href="#">Services</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="#" class="selected">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>
					</div>
				</div>
				<div class="clearfix"></div>
			</div>
		</div>

		<script type="text/javascript">
			$(document).ready(function($){
			
				$('#drilldown').drilldown({
			                 wrapper_class	    : 'drilldown panel panel-success',
			                 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     : 'selected',
			                 event_type		    : 'click',
			                 hover_delay	    : 300,
			                 speed       	    : 'fast',
			                 save_state		    : true,
			                 show_count		    : false,
			                 count_class	    : 'dd-count',
			                 icon_class		    : 'fa fa-chevron-right pull-right dd-icon',
			                 link_type		    : 'breadcrumb', //breadcrumb , link, backlink
			                 reset_text		    : '<span class="fa fa-folder-open"></span>', // All
			                 default_text	    : 'Select Category',
			                 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        : '200px', // '200px' , false for auto height
			                 show_header	    : false,
			                 header_tag		    : 'div',// h3
			                 header_tag_class   : 'list-group-item active' // hidden list-group-item active
				});
			
                 $('#drilldown').on('click', function(e){
                     console.log('click');
                 });
    
                 $('#drilldown').on('drilldown.parentclick', function(e){
                     console.log('drilldown.parentclick');
                 });
                 $('#drilldown').on('drilldown.linklclick', function(e){
                     console.log('drilldown.linklclick');
                 });
			});
		</script>

	</body>
</html>

Author

Dr. Ahmed Amin Elsheshtawy, Ph.D.

bootstrap-drilldownmenu's People

Contributors

aagouda avatar

Watchers

James Cloos avatar avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.