Bootstrap 3 RC2 Navbar with Multiple Collapses -
i'm trying figure out how best can following layout in bootstrap 3 rc2.
where left items primary nav ul, , side icons, additional ul or set of links share common look, provide dropdown or hide/show toggle content (list group, hoping interactive search , cart display others).
currently, plays fine when code:
<div class="nav-wrapper" style="height: 56px;"> <div class="nav-primary affix-top"> <nav class="navbar" role="navigation"> <div class="container"> <!-- brand , toggle grouped better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-primary-collapse"> <span class="sr-only">primary navigation</span> <i class="icon-list"></i> </button> <button type="button" class="navbar-toggle pull-right" data-toggle="collapse" data-target=".navbar-cart-collapse"> <span class="sr-only">itinerary navigation</span> <span class="icon-calendar-empty"></span> </button> <button type="button" class="navbar-toggle pull-right" data-toggle="collapse" data-target=".navbar-user-collapse"> <span class="sr-only">user navigation</span> <span class="icon-user"></span> </button> <button type="button" class="navbar-toggle pull-right" data-toggle="collapse" data-target=".navbar-search-collapse"> <span class="sr-only">search navigation</span> <span class="icon-search"></span> </button> </div> <div class="row"> <!-- collect nav links, forms, , other content toggling --> <div class="col-lg-8 col-sm-8 navbar-collapse navbar-primary-collapse in" style="height: auto;"> <ul id="navprimary" class="nav navbar-nav"> <li class="first" id="navregions"><a href="/regions/">regions</a></li> <li id="navwineries"><a href="/wineries/">wineries</a></li> <li id="navexplore"><a href="/explore/">explore</a></li> <li class="last" id="navevents"><a href="/events/">events</a></li> </ul> </div><!-- /.navbar-primary-collapse --> <!-- collect nav links, forms, , other content toggling --> <div class="col-lg-4 col-sm-4 pull-right collapse navbar-collapse"> <ul class="nav navbar-nav navbar-right"> <li> <a href="#"><i class="icon-search"></i></a> <div id="prime-nav-searchform" class="dropdown-menu"> <form method="get" action="http://antonibotev.com/themes/nova/" class="search-form"> <i class="icon-search searchform-icon"></i> <input class="bluebox-search-input" type="text" name="s" value="search..." onfocus="" onblur="" autocomplete="off" data-view-all-title="show results" data-original-title=""> <input type="submit" class="submit" value="" onfocus="" onblur=""> <div class="search-form-autocomplete active"> <div class="search-results-autocomplete"> </div> </div> </form> </div> </li> <li class="dropdown"><a href="#" class="dropdown-toggle"><i class="icon-user"></i> <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">log in</a></li> <li><a href="#">sign up</a></li> <li><a href="#">how works</a></li> <li><a href="#">need help?</a></li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-calendar-empty"></i> <span>4</span></a> <ul class="dropdown-menu"> <li><a href="#">view itinerary</a></li> <li><a href="#">check out</a></li> <li><a href="#">need help?</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div> </div> </nav> </div> </div> and works fine initial collapse, need additional ones, need live in same ul, makes issue creating 3 other collapse divs.
i have code toggle collapses if click on search or cart. show 1 @ time: opening 1 , closing other
// mobile toggles - make sure when 1 navbar-collapse open, others closed $('.navbar-collapse').on('show.bs.collapse', function (e) { // hide open menus $('.navbar-collapse').each(function(){ if ($(this).hasclass('in')) { $(this).collapse('toggle'); } }); }); the small , xs breakpoints should show same layout, of course replace primary nav icon. idea have 4 icons click or tap toggle respective menus, whether menus contain list or search form.
any suggestions?
i think navbar made close you're looking for. i've posted answer before, applies question well.
this example shows how have kind of 'vanilla bootstrap' navbar configuration want. includes site title, both collapsing , non-collapsing menu items aligned left or right, , static text. example has drop-down menu icon.
be sure read comments fuller understanding of can change. enjoy!
fiddle: http://jsfiddle.net/nomis/n9ktl/1/
<nav role="navigation" class="navbar navbar-default navbar-fixed-top"> <div class="container"> <!-- title --> <div class="navbar-header pull-left"> <a href="/" class="navbar-brand">gnomis</a> </div> <!-- 'sticky' (non-collapsing) right-side menu item(s) --> <div class="navbar-header pull-right"> <ul class="nav pull-left"> <!-- works static text, username --> <li class="navbar-text pull-left">user name</li> <!-- add additional bootstrap header items. drop-down icon --> <li class="dropdown pull-right"> <a href="#" data-toggle="dropdown" style="color:#777; margin-top: 5px;" class="dropdown-toggle"><span class="glyphicon glyphicon-user"></span><b class="caret"></b></a> <ul class="dropdown-menu"> <li> <a href="/users/id" title="profile">profile</a> </li> <li> <a href="/logout" title="logout">logout </a> </li> </ul> </li> </ul> <!-- required bootstrap placeholder collapsed menu --> <button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle"><span class="sr-only">toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button> </div> <!-- collapsing items navbar-left or navbar-right --> <div class="collapse navbar-collapse navbar-left"> <!-- pull-right keeps drop-down in line --> <ul class="nav navbar-nav pull-right"> <li><a href="/news">news</a></li> <li><a href="/shop">shop</a></li> </ul> </div> <!-- additional navbar items --> <div class="collapse navbar-collapse navbar-right"> <!-- pull-right keeps drop-down in line --> <ul class="nav navbar-nav pull-right"> <li><a href="/locator">locator</a></li> <li><a href="/extras">extras</a></li> </ul> </div> </div> </nav>
Comments
Post a Comment