Twitter Bootstrap:仅将某些菜单项折叠到下拉菜单中 [英] Twitter Bootstrap: Collapse only certain menu items into drop-down
问题描述
我想知道如何创建一个 Twitter Bootstrap navbar 来折叠该菜单中的项目，在调整浏览器窗口大小时一次折叠一个或两个项目.
我见过的大多数导航栏都将整个导航栏折叠成一个下拉菜单；基本上在调整窗口大小时隐藏该导航栏上的所有内容.但我仍然需要它来显示一些菜单项；所以部分崩溃.
这是我的意思的一个例子(下面的菜单):
首页 |关于 |服务 |订购 |联系方式
当从右侧调整浏览器窗口的大小时，我想要它做的是将最后一个(或两个)菜单项放入下拉菜单中，然后它看起来像这样:
首页 |关于 |服务 |更多
->命令->接触更多"需要自动创建为下拉菜单，它会自动在该下拉菜单中列出订单"和联系人"菜单项.随着窗口变小，该导航栏中的更多项目将添加到该下拉菜单中.当浏览器窗口调整为全屏宽度时，导航栏会恢复正常.这就是所需要的.
在我查看过的许多链接中，这里有几个我发现的链接(不会将整个导航栏敲入一个下拉菜单)但仍然像所有其他链接一样它没有按照我描述的那样做:
使用上面的任何示例实现我需要的最佳方法是什么?
首先，确定哪些导航项应该在每个宽度断点处消失".然后，添加正确的 hidden-* 类以根据当前断点隐藏导航项.
我的解决方案要求您复制一些导航项目，但使用 hidden-* 类设置它们的可见性，以便它们仅在适当的宽度断点处显示.
基本上，当浏览器变窄时，导航项将从主导航栏隐藏，相关的导航项将显示在下拉列表中.我的示例在四个默认宽度断点中的每一个都隐藏了导航项.
<div id="navbar-menu" class="collapse navbar-collapse"><ul class="nav navbar-nav"><!--- 包括下面的所有菜单项，无论显示宽度如何.---><!--- 这允许在超小型 (xs) 设备上显示完整菜单.---><!--- 根据可用的显示宽度隐藏菜单项.---><li><a href="/calendar/">日历</a></li><li><a href="/journal/">Journal</a></li><li><a href="/shows/">Shows</a></li><li><a href="/venues/">场地</a></li><!--- 根据可用的显示宽度隐藏以下菜单项.---><!--- 主导航栏无法容纳的菜单项将显示在更多"下拉菜单中.---><li class="hidden-sm"><a href="/blackouts/">Blackouts</a></li><li class="hidden-sm"><a href="/tasks/">Tasks</a></li><li class="hidden-sm hidden-md"><a href="/songs/">歌曲</a></li><li class="hidden-sm hidden-md"><a href="/testimonials/">Testimonials</a></li><li class="hidden-sm hidden-md hidden-lg"><a href="/artists/">艺术家</a></li><li class="hidden-sm hidden-md hidden-lg"><a href="/categories/">Categories</a></li><li class="hidden-sm hidden-md hidden-lg"><a href="/cities/">城市</a></li><li class="hidden-sm hidden-md hidden-lg"><a href="/reports/">报告</a></li><li class="hidden-sm hidden-md hidden-lg"><a href="/users/">用户</a></li><!--- 更多"下拉菜单项将隐藏在超小显示器上.---><li class="dropdown hidden-xs"><a href="#" class="dropdown-toggle" data-toggle="dropdown">更多 <b class="caret"></b></a><ul class="下拉菜单"><li class="hidden-lg hidden-md"><a href="/blackouts/">Blackouts</a></li><li class="hidden-lg hidden-md"><a href="/tasks/">Tasks</a></li><li class="hidden-lg"><a href="/songs/">歌曲</a></li><li class="hidden-lg"><a href="/testimonials/">Testimonials</a></li><li class="divider hidden-lg"></li><!--- 这些菜单项只会出现在更多"下拉菜单中.---><li><a href="/artists/">艺术家</a></li><li><a href="/categories/">Categories</a></li><li><a href="/cities/">城市</a></li><li><a href="/reports/">报告</a></li><li><a href="/users/">用户</a></li><ul class="nav navbar-nav navbar-right"><li><a href="/?signout" id="signout"><span class="glyphicon glyphicon-lock"></span>退出
I'm wondering how to create a Twitter Bootstrap navbar that collapses items in that menu, one or two items at a time upon resizing the browser window.
Most navbars I've seen have collapsed the entire navbar into one drop-down; basically hiding everything on that navbar when the window is resized. But I need it to still reveal some menu items; so a partial collapse.
Here's an example of what I mean (menu below):
Home | About | Services | Order | Contact
When the browser window is resized from the right, what I want it to do is to put the last menu item (or two) into a drop-down so then it would look like this:
Home | About | Services | More
-> Order
-> Contact
'More' would need to automatically be created as a drop-down menu and it automatically list 'Order' and 'Contact' menu items in that drop-down menu. And as the window gets smaller more items in that nav bar would be added to that drop-down menu. And when the browser window is resized to full screen width, then the navbar goes back to normal. This is what is needed.
Of the many links I've looked at, here's a couple of links I've found (that does not knock the whole navbar into one drop-down menu) but still like all the others it does not do what I described:
What is to the best way to achieve what I need using any example above?
First, determine which nav items should "disappear" at each width breakpoint. Then, add the correct hidden-* classes to hide the nav items based on the current breakpoint.
My solution requires that you duplicate some of the nav items, but set their visibility, using the hidden-* classes, so that they show only at the appropriate width breakpoint.
Basically, when making the browser narrower, a nav item will be hidden from the main navbar, and the related nav item will be displayed in the dropdown. My example has nav items being hidden at each of the four, default width breakpoints.
<nav class="navbar navbar-default navbar-static-top navbar-inverse" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="/" class="navbar-brand">Brand Name</a>
</div>
<div id="navbar-menu" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<!--- Include all menu items, below, regardless of display width. --->
<!--- This allows the full menu to be displayed on extra-small (xs) devices. --->
<!--- Hide menu items depending on the available display width. --->
<li><a href="/calendar/">Calendar</a></li>
<li><a href="/journal/">Journal</a></li>
<li><a href="/shows/">Shows</a></li>
<li><a href="/venues/">Venues</a></li>
<!--- Hide the following menu items depending on the available display width. --->
<!--- Menu items that can't fit on the main nav bar will be displayed in the "More" dropdown menu. --->
<li class="hidden-sm"><a href="/blackouts/">Blackouts</a></li>
<li class="hidden-sm"><a href="/tasks/">Tasks</a></li>
<li class="hidden-sm hidden-md"><a href="/songs/">Songs</a></li>
<li class="hidden-sm hidden-md"><a href="/testimonials/">Testimonials</a></li>
<li class="hidden-sm hidden-md hidden-lg"><a href="/artists/">Artists</a></li>
<li class="hidden-sm hidden-md hidden-lg"><a href="/categories/">Categories</a></li>
<li class="hidden-sm hidden-md hidden-lg"><a href="/cities/">Cities</a></li>
<li class="hidden-sm hidden-md hidden-lg"><a href="/reports/">Reports</a></li>
<li class="hidden-sm hidden-md hidden-lg"><a href="/users/">Users</a></li>
<!--- The "More" dropdown menu item will be hidden on extra-small displays. --->
<li class="dropdown hidden-xs">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">More <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="hidden-lg hidden-md"><a href="/blackouts/">Blackouts</a></li>
<li class="hidden-lg hidden-md"><a href="/tasks/">Tasks</a></li>
<li class="hidden-lg"><a href="/songs/">Songs</a></li>
<li class="hidden-lg"><a href="/testimonials/">Testimonials</a></li>
<li class="divider hidden-lg"></li>
<!--- These menu items will only appear in the "More" dropdown menu. --->
<li><a href="/artists/">Artists</a></li>
<li><a href="/categories/">Categories</a></li>
<li><a href="/cities/">Cities</a></li>
<li><a href="/reports/">Reports</a></li>
<li><a href="/users/">Users</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="/?signout" id="signout"><span class="glyphicon glyphicon-lock"></span> Sign Out</a></li>
</ul>
</div>
</div>
这篇关于Twitter Bootstrap:仅将某些菜单项折叠到下拉菜单中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
