本文介绍了使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像引导栏一样可折叠的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-16 05:20