Twitter Bootstrap: Multiple High-Speed ​​Plug-In Navigators?

Question

I am using Twitter Bootstrap. I want to have two (or more) navigation systems that, when viewed on mobile devices, collapse into a drop-down menu.

This can easily be done once per page, but I cannot figure out how to have multiple adaptive / resettable navigation.

This code works to create one navigator that crashes on a mobile device:

<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">groups</a> <div class="nav-collapse"> <ul class="nav"> <li><a href="#">Nav Link</a></li> <li><a href="#">Nav Link</a></li> <li><a href="#">Nav Link</a></li> <li><a href="#">Nav Link</a></li> </ul> </div> 

But how can I make a second nav?

I tried duplicating this code and changing data-target=".nav-collapse" to data-target=".nav-collapse2" , but this does not work.

Does Twitter Bootstrap use the ability to have 2 or more responsive navigators per page?

Answer 1

You are on the right track.

.nav-collapse used internally using bootstrap to actually make navigation collapse quickly. Instead of using .nav-collapse2 as data-target use your own class / id (in addition to using .nav-collapse )

Here is an example:

 <a class="btn btn-navbar" data-toggle="collapse" data-target=".col1">groups</a> <a class="btn btn-navbar" data-toggle="collapse" data-target=".col2">groups2</a> <div class="nav-collapse col1"> <ul class="nav"> <li><a href="#">Nav Link</a></li> <li><a href="#">Nav Link</a></li> </ul> </div> <div class="nav-collapse col2"> <ul class="nav"> <li><a href="#">Nav Link2</a></li> <li><a href="#">Nav Link2</a></li> </ul> </div> 

Here's the fiddle .

Answer 2

I started working just like @ gurch101 and then used this to hide another menu.

 // Only show one navigation at a time jQuery(function($){ $('.col1').on('show.bs.collapse', function(){ var otherNav = $('.col2'); if (otherNav.is(':visible')) { otherNav.collapse('hide'); } }); $('.col2').on('show.bs.collapse', function(){ var otherNav = $('.col1'); if (otherNav.is(':visible')) { otherNav.collapse('hide'); } }); });