移动的两个导航栏合为1个? [英] Two navbars collapsed into 1 for mobile?
本文介绍了移动的两个导航栏合为1个?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在Bootstrap 3中有两个菜单-社交菜单和主菜单. 在移动设备上合拢时,我有两个菜单打开/切换按钮来打开相应的菜单项.
I have two menus in Bootstrap 3 - a Social Menu and a Main Menu. When collapsed on mobile, I get two menu open/toggle buttons to open the corresponding menu items.
折叠后有什么办法,我可以将社交菜单"项移到主菜单"中,仅使用一个切换/菜单按钮和列表?代码在下面...
Is there any way when collapsed, I can move the Social Menu Items into the Main Menu and use just one toggle/menu button and list? Code is Below...
<div id="social-menu" class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-social">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navbar-menubuilder">
<ul class="nav navbar-nav navbar-social">
<li>Social Menu Item 1</li>
<li>Social Menu Item 2</li>
<li>Social Menu Item 3</li>
<li>Social Menu Item 4</li>
</ul>
</div>
</div>
</div>
<div id="main-menu" class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-menu">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navbar-menubuilder">
<ul class="nav navbar-nav navbar-main-menu">
<li>Main Menu Item 1</li>
<li>Main Menu Item 2</li>
<li>Main Menu Item 3</li>
<li>Main Menu Item 4</li>
</ul>
</div>
</div>
</div>
使用Bootstrap 3
推荐答案
将第二个导航栏复制到与主导航栏相同的列表中.然后将类添加到导航栏,以将其隐藏在大型桌面上.
Copy the 2nd nav bar into the same list as the main nav bar. Then add classes to the main nav bar to hide them on large desktops.
<div id="main-menu" class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-menu">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navbar-menubuilder">
<ul class="nav navbar-nav navbar-social">
<li>Main Menu Item 1</li>
<li>Main Menu Item 2</li>
<li>Main Menu Item 3</li>
<li>Main Menu Item 4</li>
<li class="hidden-md hidden-lg">Social Menu Item 1</li>
<li class="hidden-md hidden-lg">Social Menu Item 2</li>
<li class="hidden-md hidden-lg">Social Menu Item 3</li>
<li class="hidden-md hidden-lg">Social Menu Item 4</li>
</ul>
</div>
</div>
</div>
这篇关于移动的两个导航栏合为1个?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文