使导航丸像引导程序中的导航栏一样可折叠 [英] makes nav-pills collapsable just like nav-bar in bootstrap

问题描述

我们正在开发一个应用程序，我们正在使用 twiiter bootstrap 3我们创建了一个带有导航药丸的导航栏

 
<input type="hidden" id="selected_menu_item" value="=$selectedMenuId; ?>"/><li><a href="#" id="欢迎">欢迎文...</a><li><a href="#" id="kitchen">厨房</a></li><li><a href="#" id="programma" >程序</a></li><li><a href="#" id="foodart" >foodart text</a></li>

有引导程序经验的任何人都可以帮助我们吗，如果我们可以使这个导航药片在尺寸减小时可折叠并具有响应性，就像我们可以使用导航栏轻松做到的那样?

提前致谢

解决方案

首先，您需要在菜单折叠后为菜单按钮添加 HTML.

<button type="button" class="navbar-toggle" data-toggle="collapse" data-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>

然后，您需要将 nav-pills 包装在包含 Bootstrap 折叠类的 div 中.

<ul class="nav nav-pills head-menu"><input type="hidden" id="selected_menu_item" value="=$selectedMenuId; ?>"/><li><a href="#" id="welcome">欢迎文本...</a></li><li><a href="#" id="kitchen">厨房</a></li><li><a href="#" id="programma" >程序</a></li><li><a href="#" id="foodart" >foodart text</a></li>

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

此外，您可以添加一些 jQuery 来处理折叠时的堆叠"菜单，而不是保持水平.为此，Bootstrap 的显示/隐藏折叠事件将起作用:show.bs.collapse 和 hide.bs.collapse.

//折叠时的堆栈菜单$('#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 3 we 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

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