Nest controls inside dropdown menu
Description
The following code shows how to nest controls inside dropdown menu.
Example
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'
src='http://code.jquery.com/jquery-git2.js'></script>
<link rel="stylesheet" type="text/css"
href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script type='text/javascript'
src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script type='text/javascript'
src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<style type='text/css'>
.myMenu .nav, .myMenu .collapse, .myMenu .dropup, .myMenu .dropdown {
position: static;
}<!-- w w w . j a v a2 s .com-->
.myMenu .container {
position: relative;
}
.myMenu .dropdown-menu {
left: auto;
}
.myMenu .nav.navbar-right .dropdown-menu {
left: auto;
right: 0;
}
.myMenu .myMenu-content {
padding: 20px 30px;
}
.myMenu .dropdown.myMenu-fw .dropdown-menu {
left: 0;
right: 0;
}
</style>
</head>
<body>
<div class="navbar myMenu navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" data-toggle="collapse"
data-target="#navbar-collapse-1" class="navbar-toggle">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">My Menu</a>
</div>
<div id="navbar-collapse-1" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<!-- Classic list -->
<li class="dropdown"><a href="#" data-toggle="dropdown"
class="dropdown-toggle">List<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
<!-- Content container to add padding -->
<div class="myMenu-content">
<div class="row">
<ul class="col-sm-2 list-unstyled">
<li>
<p>
<strong>Section Title</strong>
</p>
</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>
<ul class="col-sm-2 list-unstyled">
<li>
<p>
<strong>Links Title</strong>
</p>
</li>
<li><a href="#"> Link Item </a></li>
<li><a href="#"> Link Item </a></li>
<li><a href="#"> Link Item </a></li>
<li><a href="#"> Link Item </a></li>
<li><a href="#"> Link Item </a></li>
<li><a href="#"> Link Item </a></li>
</ul>
<ul class="col-sm-2 list-unstyled">
<li>
<p>
<strong>Section Title</strong>
</p>
</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>
<ul class="col-sm-2 list-unstyled">
<li>
<p>
<strong>Section Title</strong>
</p>
</li>
<li>List Item</li>
<li>List Item</li>
<li>
<ul>
<li><a href="#"> Link Item </a></li>
<li><a href="#"> Link Item </a></li>
<li><a href="#"> Link Item </a></li>
</ul>
</li>
</ul>
</div>
</div>
</li>
</ul></li>
<!-- Accordion demo -->
<li class="dropdown"><a href="#" data-toggle="dropdown"
class="dropdown-toggle">Accordion<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
<div class="myMenu-content">
<div class="row">
<div id="accordion" class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion"
href="#collapseOne">Collapsible Group Item #1</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">Ut consectetur ullamcorper
purus a rutrum. Etiam dui nisi, hendrerit feugiat
scelerisque et, cursus eu magna.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion"
href="#collapseTwo">Collapsible Group Item #2</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">Nullam pretium fermentum
sapien ut convallis. Suspendisse vehicula, magna non
tristique tincidunt, massa nisi luctus tellus, vel laoreet
sem lectus ut nibh.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion"
href="#collapseThree">Collapsible Group Item #3</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">Praesent leo quam, faucibus
at facilisis id, rhoncus sit amet metus. Sed vitae ipsum
non nibh mattis congue eget id augue.</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul></li>
<!-- Classic dropdown -->
<li class="dropdown"><a href="#" data-toggle="dropdown"
class="dropdown-toggle">Classic<b class="caret"></b></a>
<ul role="menu" class="dropdown-menu">
<li><a tabindex="-1" href="#"> Action </a></li>
<li><a tabindex="-1" href="#"> Another action </a></li>
<li><a tabindex="-1" href="#"> Something else here </a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#"> Separated link </a></li>
</ul></li>
<!-- Pictures -->
<li class="dropdown myMenu-fw"><a href="#"
data-toggle="dropdown" class="dropdown-toggle">Pictures<b
class="caret"></b></a>
<ul class="dropdown-menu">
<li>
<div class="myMenu-content">
<div class="row">
<div class="col-xs-6 col-sm-2">
<a href="#" class="thumbnail"><img alt="150x190"
src="http://placehold.it/150x190"></a>
</div>
<div class="col-xs-6 col-sm-2">
<a href="#" class="thumbnail"><img alt="150x190"
src="http://placehold.it/150x190"></a>
</div>
<div class="col-xs-6 col-sm-2">
<a href="#" class="thumbnail"><img alt="150x190"
src="http://placehold.it/150x190"></a>
</div>
<div class="col-xs-6 col-sm-2">
<a href="#" class="thumbnail"><img alt="150x190"
src="http://placehold.it/150x190"></a>
</div>
<div class="col-xs-6 col-sm-2">
<a href="#" class="thumbnail"><img alt="150x190"
src="http://placehold.it/150x190"></a>
</div>
<div class="col-xs-6 col-sm-2">
<a href="#" class="thumbnail"><img alt="150x190"
src="http://placehold.it/150x190"></a>
</div>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>