Twitter bootstrap 推特引导:仅将某些菜单项折叠到下拉列表中
我想知道如何创建一个Twitter引导Twitter bootstrap 推特引导:仅将某些菜单项折叠到下拉列表中,twitter-bootstrap,drop-down-menu,menu,navbar,collapsable,Twitter Bootstrap,Drop Down Menu,Menu,Navbar,Collapsable,我想知道如何创建一个Twitter引导navbar,在调整浏览器窗口大小时,一次折叠一到两个菜单项 我见过的大多数导航栏都将整个导航栏折叠为一个下拉菜单;当窗口调整大小时,基本上隐藏导航栏上的所有内容。但我需要它仍然显示一些菜单项;所以部分崩溃 以下是我的意思示例(菜单如下): 主页|关于|服务|订单|联系 当从右侧调整浏览器窗口的大小时,我希望它做的是将最后一个菜单项(或两个)放入下拉列表中,这样它将如下所示: 主页|关于|服务|更多 -> Ord
navbar
,在调整浏览器窗口大小时,一次折叠一到两个菜单项
我见过的大多数导航栏都将整个导航栏折叠为一个下拉菜单;当窗口调整大小时,基本上隐藏导航栏上的所有内容。但我需要它仍然显示一些菜单项;所以部分崩溃
以下是我的意思示例(菜单如下):
主页|关于|服务|订单|联系
当从右侧调整浏览器窗口的大小时,我希望它做的是将最后一个菜单项(或两个)放入下拉列表中,这样它将如下所示:
主页|关于|服务|更多
-> Order
-> Contact
“更多”需要自动创建为下拉菜单,并在该下拉菜单中自动列出“订单”和“联系人”菜单项。随着窗口变小,导航栏中的更多项目将添加到下拉菜单中。当浏览器窗口调整为全屏宽度时,导航栏将恢复正常。这是我们所需要的
在我看过的许多链接中,我发现了几个链接(它们不会将整个导航栏放到一个下拉菜单中),但与所有其他链接一样,它并没有实现我所描述的功能:
使用上述任何示例,实现我所需的最佳方法是什么 首先,确定哪些导航项目应在每个宽度断点处“消失”。然后,添加正确的隐藏-*类以基于当前断点隐藏导航项 我的解决方案要求您复制一些导航项,但使用hidden-*类设置它们的可见性,以便它们仅在适当的宽度断点处显示 基本上,当浏览器变窄时,导航项目将从主导航栏隐藏,相关导航项目将显示在下拉列表中。我的示例在四个默认宽度断点中的每一个都隐藏了导航项
<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>
-
是的,你真的应该先自己尝试一下。Bootstrap和一个自制的jQuery非常简单。是的,我也在寻找类似的东西,但是Bootstrap非常感谢你,至少,真的尝试帮助我。如果你有一个接受捐赠/小费的网站,请让我知道它是什么,这样我就可以为你诚实地帮助我的尝试提供小费。感谢你的方法,这正是我所期待的。我想说,这是迄今为止最连贯和优雅的解决方案,而不必重复某些项目。隐藏的XX类是专门为此类操作创建的。