使nav-pills像引导栏一样可折叠

问题描述

我们正在开发一个应用程序，我们正在使用twiiter bootstrap 3
我们创建了一个导航栏，并带有nav-pills

 < ul class =nav nav-pills head-menu> 
< input type =hiddenid =selected_menu_itemvalue == $ selectedMenuId;？> /> 
< li> 
< a href =＃id =welcome> 
欢迎文字... 
< / a> 
< / li> 
< li>< a href =＃id =kitchen>厨房< / a>< / li> 
< li>< a href =＃id =programma> PROGRAMMA< / A>< /锂> 
< li>< a href =＃id =foodart>美食文字< / a>< / li> 
< / ul> 
  

任何有bootstrap经验的人都可以帮助我们，如果我们可以使这个nav-pills可折叠并且响应时是减少，就像我们可以轻松地使用导航栏？

提前致谢

解决方案

首先，一旦菜单崩溃，您需要为菜单按钮添加HTML。

 < div class = 导航栏标头 > 
< button type =buttonclass =navbar-toggledata-toggle =collapsedata-target =＃bs-example-navbar-collapse-1> 
< span class =sr-only>切换导航< / span> 
< span class =icon-bar>< / span> 
< span class =icon-bar>< / span> 
< span class =icon-bar>< / span> 
< / button> 
< / div> 
  

然后，您需要将您的 nav-pills



 < div class =collapse navbar-collapseid =bs-例如-导航栏塌-1\" > 
< ul class =nav nav-pills head-menu> 
< input type =hiddenid =selected_menu_itemvalue == $ selectedMenuId;？> /> 
< li>< a href =＃id =welcome>欢迎文字...< / a>< / li> 
< li>< a href =＃id =kitchen>厨房< / a>< / li> 
< li>< a href =＃id =programma> PROGRAMMA< / A>< /锂> 
< li>< a href =＃id =foodart>美食文字< / a>< / li> 
< / ul> 
< / div> 
  

然后，您可以将所有这些包装在流体容器和Bootstrap的 navbar中navbar-default 与 role = navigation 。

另外，您可以添加一些的jQuery来处理堆叠你的菜单时，它折叠而不是保持水平。要做到这一点，Bootstrap的显示/隐藏折叠事件可以做到这一点： show.bs.collapse 和 hide.bs.collapse $ b $ pre $ //折叠时的堆叠菜单
$（'＃bs-example-navbar-collapse- 1'）。on（'show.bs.collapse'，function（）{
$（'。nav-pills'）。addClass（'nav-stacked'）;
}）;

//未折叠时取消堆叠菜单
$（'＃bs-example-navbar-collapse-1'）。on（'hide.bs.collapse'，function（）{
$（'。nav-pills'）。removeClass（'nav-stacked'）;
}）;


we are developing an application and we are using twiiter bootstrap 3we have created a navigation bar with nav-pills

   <ul class="nav nav-pills head-menu">
    <input type="hidden" id="selected_menu_item" value="=$selectedMenuId; ?>" />
        <li>
          <a href="#" id="welcome">
          Welcome text ...
           </a>
        </li>
            <li><a href="#" id="kitchen">Kitchen</a></li>
            <li><a href="#" id="programma" > Programma</a></li>
            <li><a href="#" id="foodart" >foodart text</a></li>
   </ul>

can anyone with bootstrap experience help us, if we can make this nav-pills collapsible and responsive when size is reduced just as we can do easily with nav-bars?

thanks in advance

解决方案

First, you need to include HTML for the menu button once your menu collapses.

<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>
</div>

Then, you need to wrap your nav-pills in a div containing Bootstrap's collapse class.

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav nav-pills head-menu">
        <input type="hidden" id="selected_menu_item" value="=$selectedMenuId; ?>" />
        <li><a href="#" id="welcome">Welcome text ...</a></li>
        <li><a href="#" id="kitchen">Kitchen</a></li>
        <li><a href="#" id="programma" > Programma</a></li>
        <li><a href="#" id="foodart" >foodart text</a></li>
    </ul>
</div>

You can then wrap all of this in a fluid-container and Bootstrap's navbar navbar-default with role=navigation.

Additionally, you could add a bit of jQuery to handle "stacking" your menu when it is collapsed instead of remaining horizontal. To do this, Bootstrap's events for show/hide collapse will do the trick: show.bs.collapse and hide.bs.collapse.

//Stack menu when collapsed
$('#bs-example-navbar-collapse-1').on('show.bs.collapse', function() {
    $('.nav-pills').addClass('nav-stacked');
});

//Unstack menu when not collapsed
$('#bs-example-navbar-collapse-1').on('hide.bs.collapse', function() {
    $('.nav-pills').removeClass('nav-stacked');
});

Working Demo Here

这篇关于使nav-pills像引导栏一样可折叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！