Simple example of twitter Bootstrap Multilevel Dropdown Menu here is the working example jsfiddle and below is the complete source of html.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Bootstrap Multilevel Dropdown Menu</title>
<script type='text/javascript'
src='http://code.jquery.com/jquery-1.7.1.js'></script>
<link rel="stylesheet" type="text/css"
href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script>
/* bootstrap-dropdown.js v2.0.2
* http://twitter.github.com/bootstrap/javascript.html#dropdowns
* ============================================================
* Copyright 2012 Twitter, Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
!function( $ ){
"use strict"
/* DROPDOWN CLASS DEFINITION
* ========================= */
var toggle = '[data-toggle="dropdown"]'
, Dropdown = function ( element ) {
var $el = $(element).on('click.dropdown.data-api', this.toggle)
$('html').on('click.dropdown.data-api', function () {
$el.parent().removeClass('open')
})
}
Dropdown.prototype = {
constructor: Dropdown
, toggle: function ( e ) {
var $this = $(this)
, selector = $this.attr('data-target')
, $parent
, isActive
if (!selector) {
selector = $this.attr('href')
selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
}
$parent = $(selector)
$parent.length || ($parent = $this.parent())
isActive = $parent.hasClass('open')
clearMenus()
!isActive && $parent.toggleClass('open')
return false
}
}
function clearMenus() {
$(toggle).parent().removeClass('open')
}
/* DROPDOWN PLUGIN DEFINITION
* ========================== */
$.fn.dropdown = function ( option ) {
return this.each(function () {
var $this = $(this)
, data = $this.data('dropdown')
if (!data) $this.data('dropdown', (data = new Dropdown(this)))
if (typeof option == 'string') data[option].call($this)
})
}
$.fn.dropdown.Constructor = Dropdown
/* APPLY TO STANDARD DROPDOWN ELEMENTS
* =================================== */
$(function () {
$('html').on('click.dropdown.data-api', clearMenus)
$('body').on('click.dropdown.data-api', toggle, Dropdown.prototype.toggle)
})
}( window.jQuery );
</script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
jQuery('.submenu').hover(function () {
jQuery(this).children('ul').removeClass('submenu-hide').addClass('submenu-show');
}, function () {
jQuery(this).children('ul').removeClass('.submenu-show').addClass('submenu-hide');
}).find("a:first").append(" » ");
});//]]>
</script>
<style>
.submenu-show
{
border-radius: 3px;
display: block;
left: 100%;
margin-top: -25px !important;
moz-border-radius: 3px;
position: absolute;
webkit-border-radius: 3px;
}
.submenu-hide
{
display: none !important;
float: right;
position: relative;
top: auto;
}
.navbar .submenu-show:before
{
border-bottom: 7px solid transparent;
border-left: none;
border-right: 7px solid rgba(0, 0, 0, 0.2);
border-top: 7px solid transparent;
left: -7px;
top: 10px;
}
.navbar .submenu-show:after
{
border-bottom: 6px solid transparent;
border-left: none;
border-right: 6px solid #fff;
border-top: 6px solid transparent;
left: 10px;
left: -6px;
top: 11px;
}
</style>
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a href="#" class="brand">Project name</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Go To <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 1</a>
<ul class="dropdown-menu submenu-show submenu-hide">
<li class="dropdown submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 1.1</a>
<ul class="dropdown-menu submenu-show submenu-hide">
<li><a href="#">Level 1.1.1</a></li>
<li><a href="#">Level 1.1.2</a></li>
<li><a href="#">Level 1.1.3</a></li>
<li><a href="#">Level 1.1.4</a></li>
</ul>
</li>
<li class="dropdown submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 1.2</a>
<ul class="dropdown-menu submenu-show submenu-hide">
<li><a href="#">Level 1.2.1</a></li>
<li><a href="#">Level 1.2.2</a></li>
</ul>
</li>
<li><a href="#">Level 1.3</a></li>
<li><a href="#">Level 1.4</a></li>
<li><a href="#">Level 1.5</a></li>
</ul>
</li>
<li><a href="#">Other</a></li>
</ul>
</li>
</ul>
</div><!-- /.nav-collapse -->
</div>
</div>
</div>
</body>
</html>
Hello guy! Very good solution, but I have one question about the right nav menu.
ReplyDeleteIf you look here: http://jsfiddle.net/4nMkh/77/
I added "pull-right" class on my "ul" nav to set the menu to right, but this way don't work. What should I do to get sub menus open right to left? Thanks.
many thanks it works.
ReplyDeleteExcellent work
ReplyDeleteCan someone tell me, if we need to add data or links corresponding to dropdown options in this code, how can we do that?
ReplyDeleteNice design and simple to use. Thanks for providing source code.
ReplyDeleteI have came across similar menu bars at: http://www.freemenu.info/p/list.html