I am trying to make a bootstrap side menu that makes sub items collapsible.
Similar to / However I want link items in the submenus and not such a plicated structure.
This is what I tried
<div class="row">
<!-- Main ponent for a primary marketing message or call to action -->
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">More<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Blog</a></li>
<li><a href="#">About US</a></li>
<li><a href="#">Jobs</a></li>
</ul>
</li>
<li><a href="">Nav item again</a></li>
<li><a href="">One more nav</a></li>
<li><a href="">Another nav item</a></li>
</ul>
</div>
</div>
The dropable submenu does not push the rest of the items on the list down but rather appear on top of them. That makes it hard to navigate.
I am trying to make a bootstrap side menu that makes sub items collapsible.
Similar to http://jsfiddle/ However I want link items in the submenus and not such a plicated structure.
This is what I tried
<div class="row">
<!-- Main ponent for a primary marketing message or call to action -->
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">More<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Blog</a></li>
<li><a href="#">About US</a></li>
<li><a href="#">Jobs</a></li>
</ul>
</li>
<li><a href="">Nav item again</a></li>
<li><a href="">One more nav</a></li>
<li><a href="">Another nav item</a></li>
</ul>
</div>
</div>
The dropable submenu does not push the rest of the items on the list down but rather appear on top of them. That makes it hard to navigate.
Share Improve this question edited Feb 24, 2014 at 10:44 johnkavanagh 4,6742 gold badges27 silver badges37 bronze badges asked Feb 23, 2014 at 21:58 iordanisiordanis 1,2842 gold badges15 silver badges28 bronze badges1 Answer
Reset to default 5Would you not be better using panels and the collapse plugin to make a simple accordion? Here's an example to show what I mean. It does what I think you want.
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
More
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<ul>
<li><a href="#">Blog</a></li>
<li><a href="#">About US</a></li>
<li><a href="#">Jobs</a></li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li><a href="">Nav item again</a></li>
<li><a href="">One more nav</a></li>
<li><a href="">Another nav item</a></li>
</ul>
</div>
</div>