Multilevel Dropdown In Bootstrap 3.3.5
I have the following HTML code and I've structured it to how I think it should be achieved based on the mark-up in the Bootstrap docs.
HTML
<divid="navbar"class="navbar-collapse collapse"><ulclass="nav navbar-nav"><liclass="active"><ahref="#">Home</a></li><liclass="dropdown"><ahref="#"class="dropdown-toggle"data-toggle="dropdown">Hospital<bclass="caret"></b></a><ulclass="dropdown-menu"><liclass="dropdown dropdown-submenu"><ahref="#"class="dropdown-toggle"data-toggle="dropdown">Consultants</a><ulclass="dropdown-menu"><li><ahref="#">Adult cardiac surgery</a></li><li><ahref="#">Bariatric surgery</a></li><li><ahref="#">Colorectal surgery</a></li><li><ahref="#">Endocrine and thyroid surgery</a></li><li><ahref="#">Head and neck cancer surgery</a></li><li><ahref="#">Interventional cardiology</a></li><li><ahref="#">Lung Cancer</a></li><li><ahref="#">Neurosurgery</a></li><li><ahref="#">Orthopaedic surgery</a></li><li><ahref="#">Upper gastro-intestinal surgery</a></li><li><ahref="#">Urological surgery</a></li><li><ahref="#">Vascular surgery</a></li></ul></li><li><ahref="#">Another action</a></li><li><ahref="#">Something else here</a></li><lirole="separator"class="divider"></li><liclass="dropdown-header">Nav header</li><li><ahref="#">Separated link</a></li><li><ahref="#">One more separated link</a></li></ul></li></ul></div>
CSS
.dropdown-submenu {
position:relative;
}
.dropdown-submenu>.dropdown-menu {
top:0;
left:100%;
margin-top:-6px;
margin-left:-1px;
-webkit-border-radius:06px6px6px;
-moz-border-radius:06px6px6px;
border-radius:06px6px6px;
}
.dropdown-submenu>a:after {
display:block;
content:" ";
float:right;
width:0;
height:0;
border-color:transparent;
border-style:solid;
border-width:5px05px5px;
border-left-color:#cccccc;
margin-top:5px;
margin-right:-10px;
}
.dropdown-submenu:hover>a:after {
border-left-color:#555;
}
.dropdown-submenu.pull-left {
float:none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
left:-100%;
margin-left:10px;
-webkit-border-radius:6px06px6px;
-moz-border-radius:6px06px6px;
border-radius:6px06px6px;
}
JS
(function ($) {
$(document).ready(function () {
$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function (event) {
event.preventDefault();
event.stopPropagation();
$(this).parent().siblings().removeClass('open');
$(this).parent().toggleClass('open');
});
});
})(jQuery);
You may like these posts
Post a Comment for "Multilevel Dropdown In Bootstrap 3.3.5"