Skip to content

Instantly share code, notes, and snippets.

@duncangh

duncangh/bootstrap-navbar-with-submenus.markdown

Created October 10, 2018 15:21
Show Gist options
  • Save duncangh/85fec3ffc079ab928bf725581d9f670a to your computer and use it in GitHub Desktop.
Save duncangh/85fec3ffc079ab928bf725581d9f670a to your computer and use it in GitHub Desktop.
Download ZIP
Bootstrap: Navbar with submenus
Raw
index.html
<div class="container pen">
<div class="row">
<div class="col-sm-12 pen">
<div class="page-header">
<h5>Bootstrap Framework</h5>
<h1>Navbar with submenus</h1>
<ul class="technology"><li>Bootstrap <span class="label label-default">3.3.4</span></li>
<li>JQuery <span class="label label-default">2.1.3</span></li><li>
<a href="https://getbootstrap.com/components/#navbar"><span class="glyphicon glyphicon-book"></span> Navbar Documentation</a></li><li>
<a href="http://www.bootply.com/nZaxpxfiXz"><span class="glyphicon glyphicon-book"></span> Bootply Documentation</a></li></ul>
</div>
</div>
</div>
</div>
<div class="container pen">
<div class="row">
<div class="col-sm-12">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#" target="_blank">Brand</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Active Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Dropdown 1</a></li>
<li><a href="#">Dropdown 2</a></li>
<li><a href="#">Dropdown 3</a></li>
<li class="divider"></li>
<li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 4</a>
<ul class="dropdown-menu">
<li><a href="#">Dropdown Submenu 4.1</a></li>
<li><a href="#">Dropdown Submenu 4.2</a></li>
<li><a href="#">Dropdown Submenu 4.3</a></li>
<li><a href="#">Dropdown Submenu 4.4</a></li>
</ul>
</li>
<li class="dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 5</a>
<ul class="dropdown-menu">
<li><a href="#">Dropdown Submenu 5.1</a></li>
<li><a href="#">Dropdown Submenu 5.2</a></li>
<li><a href="#">Dropdown Submenu 5.3</a></li>
<li class="divider"></li>
<li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu 5.4</a>
<ul class="dropdown-menu">
<li><a href="#">Dropdown Submenu 5.4.1</a></li>
<li><a href="#">Dropdown Submenu 5.4.2</a></li>
<li class="divider"></li>
<li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu 5.4.3</a>
<ul class="dropdown-menu">
<li><a href="#">Dropdown Submenu 5.4.3.1</a></li>
<li><a href="#">Dropdown Submenu 5.4.3.2</a></li>
<li><a href="#">Dropdown Submenu 5.4.3.3</a></li>
<li><a href="#">Dropdown Submenu 5.4.3.4</a></li>
</ul>
</li>
<li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu 5.4.4</a>
<ul class="dropdown-menu">
<li><a href="#">Dropdown Submenu 5.4.4.1</a></li>
<li><a href="#">Dropdown Submenu 5.4.4.2</a></li>
<li><a href="#">Dropdown Submenu 5.4.4.3</a></li>
<li><a href="#">Dropdown Submenu 5.4.4.4</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Dropdown Link 1</a></li>
<li><a href="#">Dropdown Link 2</a></li>
<li><a href="#">Dropdown Link 3</a></li>
<li class="dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Link 4</a>
<ul class="dropdown-menu">
<li><a href="#">Dropdown Submenu Link 4.1</a></li>
<li><a href="#">Dropdown Submenu Link 4.2</a></li>
<li><a href="#">Dropdown Submenu Link 4.3</a></li>
<li><a href="#">Dropdown Submenu Link 4.4</a></li>
</ul>
</li>
<li class="dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Link 5</a>
<ul class="dropdown-menu">
<li><a href="#">Dropdown Submenu Link 5.1</a></li>
<li><a href="#">Dropdown Submenu Link 5.2</a></li>
<li><a href="#">Dropdown Submenu Link 5.3</a></li>
<li class="divider"></li>
<li class="dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu Link 5.4</a>
<ul class="dropdown-menu">
<li><a href="#">Dropdown Submenu Link 5.4.1</a></li>
<li><a href="#">Dropdown Submenu Link 5.4.2</a></li>
<li class="divider"></li>
<li class="dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu Link 5.4.3</a>
<ul class="dropdown-menu">
<li><a href="#">Dropdown Submenu Link 5.4.3.1</a></li>
<li><a href="#">Dropdown Submenu Link 5.4.3.2</a></li>
<li><a href="#">Dropdown Submenu Link 5.4.3.3</a></li>
<li><a href="#">Dropdown Submenu Link 5.4.3.4</a></li>
</ul>
</li>
<li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu Link 5.4.4</a>
<ul class="dropdown-menu">
<li><a href="#">Dropdown Submenu Link 5.4.4.1</a></li>
<li><a href="#">Dropdown Submenu Link 5.4.4.2</a></li>
<li><a href="#">Dropdown Submenu Link 5.4.4.3</a></li>
<li><a href="#">Dropdown Submenu Link 5.4.4.4</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
</div>
</div>
</div>
Raw
script.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);
/* http://www.bootply.com/nZaxpxfiXz */
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
Raw
style.css
.dropdown-submenu{ position: relative; }
.dropdown-submenu>.dropdown-menu{
top:0;
left:100%;
margin-top:-6px;
margin-left:-1px;
-webkit-border-radius:0 6px 6px 6px;
-moz-border-radius:0 6px 6px 6px;
border-radius:0 6px 6px 6px;
}
.dropdown-submenu>a:after{
display:block;
content:" ";
float:right;
width:0;
height:0;
border-color:transparent;
border-style:solid;
border-width:5px 0 5px 5px;
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: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
@media (min-width: 768px) {
}
@media (min-width: 992px) {
}
@media (min-width: 1200px) {
}
Raw
styles
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://codepen.io/jstneg/pen/vbfqy" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment