添加第二级子菜单以引导导航栏 [英] Add second level of sub menu to bootstrap navbar
本文介绍了添加第二级子菜单以引导导航栏的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使用Bootstrap 3构建菜单，似乎运行良好，除了我正在尝试创建第二级子菜单喜欢（menu1> submenu1> sub-submenu1）。
看起来Bootstrap 3不再支持子菜单了。
搜索了网页，但所有解决方案都需要改变了很多我无法改变或替换的CSS。网页设计和CSS不是我的事。任何帮助将不胜感激
提前致谢！
Samira
我尝试过：
我的导航栏：
< nav class = navbar navbar-default navbar-fixed-top 角色 = navigation style = font-family：'Merriweather Sans'，sans-serif; font-size：12px ;; >
< div class = 容器 >
< div class = navbar-header >
<！ - FOR MOBILE VIEW COLLAPSED BUTTON - - >
< 按钮 类型 = 按钮 class = navbar-toggle collapsed data-toggle = 崩溃 data-target = ＃navbar aria-expanded = false aria-controls = navbar >
< span class = sr-only > 切换导航< / span >
< span class =code-keyword>< span class = icon-bar > < / span >
< span class = icon-bar > < / span >
< span class = icon-bar > < / span >
< / button >
< span class =code-keyword><！ - LOGO - >
< a class = navbar-brand href = ＃ > < span style = color：#fff; > Site1 < / span > < / a >
< / div >
< div id = navbar class = navbar-collapse折叠 >
< ul id = top-menu class < span class =code-keyword> = nav navbar-nav navbar-right main-nav >
< li class = 有效 > < ; a href < span class =code-keyword> = index.html > 主页< / a > < / li >
< li 类 = 下拉列表 < span class =code-keyword>>
< a href = ＃ class = dropdown-toggle data-切换 = 下拉 角色 = 按钮 aria-expanded = false > menu1 < span class = 插入符号 > < / span > < / a >
< ul 类 = 下拉菜单 role = menu >
< ; li > < a href = ＃ > sub1 < / a > < / li >
< li > < a href = ＃ > sub2 < / a > < / li >
< li > < a href = ＃ > sub3 < / a > < / li > ;
< li > < a href = ＃ > sub4 < / a > < / li >
< / ul >
< / li >
< li class = 下拉菜单 >
< a href = ＃ class = dropdown-toggle data-toggle = < span class =code-keyword> dropdown role = 按钮 aria-expanded = false > menu2 < span class = 插入符号 > < / span > < / a >
< ul class = 下拉菜单 角色 = 菜单 &g t;
< li > < a href = ＃ < span class =code-keyword>> sub1 < / a > < / li >
< li > < a href = ＃ > sub2 < / a > < / li >
< li > < a href = ＃ > sub3 < / a > < / li >
< / ul >
< / li >
< span class =code-keyword>< li class = 下拉列表 >
< a href = ＃ class = dropdown-toggle 数据切换 = 下拉列表 role = 按钮 aria-expanded = false > menu3 < span class = 插入符号 > < / span > < / a >
< ul 类 = 下拉菜单 role = menu >
< li > < a href = ＃ > sub1 < / a > < / li >
< li >
< a href = ＃ > sub2 < / a >
< ul >
<！ - 尝试在此创建子子菜单!! - >
< / ul >
< / li >
< / ul >
< / li >
< li > < a href = ＃ > menu4 < / a > ; < / li >
< li > < a < span class =code-attribute> href = ＃ > menu5 < / a > < / li >
< li > < a href = ＃ > menu6 < / a > < < span class =code-leadattribute> / li >
< / ul >
< / div > <！ - / .nav-collapse - >
< / div >
< / nav >
解决方案
有很多开发人员提供解决方案： bootstrap 3 multimenu - Google搜索 [ ^ ]
TL; DR：以下是Google搜索中的一个： SmartMenus jQuery网站菜单 - Bootstrap Addon - Navbar [ ^ ]
Hi,
I'm trying to build a menu using Bootstrap 3, seems to work well, except i'm trying to create a second level of submenu like (menu1 > submenu1 > sub-submenu1).
Looks like Bootstrap 3 doesn't support submenu anymore.
Have searched the web, but all solutions require to change a lot of CSS which I can not change or replace. web design and CSS are not my thing. Any help will be much appreciated
Thanks in advance!
Samira
What I have tried:
My navbar:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" style="font-family:'Merriweather Sans', sans-serif;font-size:12px;;">
<div class="container">
<div class="navbar-header">
<!-- FOR MOBILE VIEW COLLAPSED BUTTON -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- LOGO -->
<a class="navbar-brand" href="#"><span style="color:#fff;">Site1</span></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul id="top-menu" class="nav navbar-nav navbar-right main-nav">
<li class="active"><a href="index.html">home</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">menu1<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">sub1</a></li>
<li><a href="#">sub2</a></li>
<li><a href="#">sub3</a></li>
<li><a href="#">sub4</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">menu2<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">sub1</a></li>
<li><a href="#">sub2</a></li>
<li><a href="#">sub3</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">menu3 <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">sub1</a></li>
<li>
<a href="#">sub2</a>
<ul>
<!-- Trying to create sub-submenu here!! -->
</ul>
</li>
</ul>
</li>
<li><a href="#">menu4</a></li>
<li ><a href="#">menu5</a></li>
<li><a href="#">menu6</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav> 解决方案
There are lots of devs with solutions: bootstrap 3 multimenu - Google Search[^]
TL;DR: Here is one from the above Google Search: SmartMenus jQuery Website Menu - Bootstrap Addon - Navbar[^]
这篇关于添加第二级子菜单以引导导航栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
