"Nav Sidebar With Toggle Button"
Bootstrap 3.1.0 Snippet by brojask

<head> <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> </head> <div class="container"> <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-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="#">Brand</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">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="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> <li class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <form class="navbar-form navbar-left" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> <ul class="nav navbar-nav navbar-right"> <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="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> <div class="row"> <div class="col-sm-4 col-md-3 sidebar"> <div class="mini-submenu"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </div> <div class="list-group"> <span href="#" class="list-group-item active"> Submenu <span class="pull-right" id="slide-submenu"> <i class="fa fa-times"></i> </span> </span> <a href="#" class="list-group-item"> <i class="fa fa-comment-o"></i> Lorem ipsum </a> <a href="#" class="list-group-item"> <i class="fa fa-search"></i> Lorem ipsum </a> <a href="#" class="list-group-item"> <i class="fa fa-user"></i> Lorem ipsum </a> <a href="#" class="list-group-item"> <i class="fa fa-folder-open-o"></i> Lorem ipsum <span class="badge">14</span> </a> <a href="#" class="list-group-item"> <i class="fa fa-bar-chart-o"></i> Lorem ipsumr <span class="badge">14</span> </a> <a href="#" class="list-group-item"> <i class="fa fa-envelope"></i> Lorem ipsum </a> </div> </div> </div> </div>
.mini-submenu{ display:none; background-color: rgba(0, 0, 0, 0); border: 1px solid rgba(0, 0, 0, 0.9); border-radius: 4px; padding: 9px; /*position: relative;*/ width: 42px; } .mini-submenu:hover{ cursor: pointer; } .mini-submenu .icon-bar { border-radius: 1px; display: block; height: 2px; width: 22px; margin-top: 3px; } .mini-submenu .icon-bar { background-color: #000; } #slide-submenu{ background: rgba(0, 0, 0, 0.45); display: inline-block; padding: 0 8px; border-radius: 4px; cursor: pointer; }
$(function(){ $('#slide-submenu').on('click',function() { $(this).closest('.list-group').fadeOut('slide',function(){ $('.mini-submenu').fadeIn(); }); }); $('.mini-submenu').on('click',function(){ $(this).next('.list-group').toggle('slide'); $('.mini-submenu').hide(); }) })

Similar snippets: See More


Comments:

Jake 2014-04-29 23:56:37
    How do you keep the menu closed to start with?
Bryan Rojas 2014-08-12 20:40:19
    You can do this before all:
$(function(){
$('.mini-submenu').hide();
{....more code....}
});
Shejan 2014-12-18 12:34:45
    It is not working. Can you please describe it?
Neerav 2015-03-07 14:59:36
    I know that this is probably too old question, but it might help someone else:
In the js add the following two lines at the beginning:
$(function(){
$('.list-group').hide();
$('.mini-submenu').show();
Neerav 2015-03-07 14:58:17
    I know that this is probably too old question, but it might help someone else:
In the js add the following two lines at the beginning:
$(function(){
$('.list-group').hide();
$('.mini-submenu').show();
Sidd 2014-11-06 23:17:55
    How do you make the content div to the right of the sub menu
Danny Alexander Trujillo 2014-11-07 21:34:25
    Can I put a sub item in a item?
Ramesh 2015-01-14 09:48:48
    It's not working
Sheila 2015-02-16 17:23:19
    I would like to make the icon on the submenu not visible until screen is phone size. How to I add a media query to hide the icon on the Summary button when the page is tablet or desktop size?
Jeet Ramgarhia 2015-03-21 09:04:31
    add these classes to submenu icon hidden-lg and hidden-md.
Mike 2015-04-19 23:16:38
    When I download your snippet, the "x" on the submenu doesn't show, so I can't toggle the side navbar. Can you update your code?
vishal 2016-07-28 09:22:00
    Have anybody there
vishal 2016-07-28 09:23:15
    Nav Sidebar With Toggle Button
Tom Veal 2016-08-16 19:49:15
    Will this remember the menu collapsed ststus between page loads?
Syam Hansamu 2017-05-02 22:28:01
    not work in my laptop when I already download,.
why ??

Commenting will be back soon.