javascript - Bootstrap 3 Mobile Menu with icons -

javascript - Bootstrap 3 Mobile Menu with icons -

update: brbcoding in comments. updated js fiddle

http://jsfiddle.net/bootstrap714/rfss9/14/

he mentioned transitions. how go doing or best route.

here at:

i using bootstrap 3 build menu. bootstrap comes nice collapse feature menu when viewed on mobile. takes whole menu , puts in button collapse. ie: if have "link dropdown-link dropdown-link" there 1 button , toggle dropdown links.

my question is:

can 3 links become each own toggle buttons , command own dropdowns. if create multiple collapse toggle buttons. toggle button opens drop downwards show link. must click on link open sub-dropdown.

<div class="navbar navbar-default navbar-fixed-top " role="navigation"> <div class="container"> <!-- brand , toggle grouped improve mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#settings"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#inbox"> <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 hidden-xs" href="#">brand</a> <a class="navbar-brand visible-xs" href="#">al</a> </div> <ul class="nav navbar-nav hidden-xs"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">popular tags <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 hidden-xs" 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> <!-- collect nav links, forms, , other content toggling --> <div class="collapse navbar-collapse" id="mobile-menu"> <ul class="nav navbar-nav navbar-right"> <li><a href="#"><i class="fa fa-camera-retro fa-2x"></i> upload</a></li> </ul> </div><!-- /.navbar-collapse --> <div class="collapse navbar-collapse" id="inbox"> <ul class="nav navbar-nav navbar-right"> <li id="inbox" class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-envelope fa-2x"></i> inbox<span class="badge">42</span> <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">message 1</a></li> <li><a href="#">message 1</a></li> <li><a href="#">message 1</a></li> <li><a href="#">message 1</a></li> <li><a href="#">message 1</a></li> <li><a href="#">message 1</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> <div class="collapse navbar-collapse" id="settings"> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-cog fa-2x"></i> settings <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> </div>

so basically, when in mobile, can see 2 toggle buttons. there way toggle button open sub menu instead of clicking link , having open.

how now: toggle button, click link, opens like: toggle button, opens right drop down.

javascript jquery html css twitter-bootstrap