Bootstrap响应式多级导航菜单
[英]Bootstrap responsive multi-level navigation menu
问题描述
I have coded a multi-level navigation menu for bootstrap. 
我已经为引导程序编写了一个多级导航菜单。 It works well in 1200px and above. 在1200px以上的像素中效果很好。 But when the screen size is under 1200px (I have set 1200px as the breapoint) the first level dropdown menu opens/closes on click well, but the second level dropdown menu does not open on click. 但是，当屏幕尺寸小于1200像素（我已将1200像素设置为临界点）时，第一级下拉菜单会在单击时良好打开/关闭，但是第二级下拉菜单在单击时不会打开。 I want this second level dropdown menu to open on screensizes below 1200 when its parent anchor is clicked. 我希望在单击其父锚时在低于1200的屏幕尺寸上打开此第二级下拉菜单。 For example when services > cosmetic dentistry is clicked on lower than 1200px screen size, I want the '.dropdown-menu' inside it (dental hygiene, dentures etc) to show up/toggleshow(hides on click again). 例如，当在小于1200像素的屏幕尺寸上单击服务>美容牙科时，我希望其中的“ .dropdown-menu”（牙齿卫生，假牙等）显示/切换显示（再次单击隐藏）。 How can I achieve this? 我该如何实现？
This is the HTML: 这是HTML：
<nav id="navbar" class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-inner">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li><a href="#">Home</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Services <i class="fa fa-angle-down"></i></a>
<ul class="dropdown-menu">
<li class="menu-item dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Cosmetic Dentistry <i class="fa fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li class="menu-item"><a href="#">Dental Hygiene</a></li>
<li class="menu-item"><a href="#">Crowns & Bridges</a></li>
<li class="menu-item"><a href="#">Dentures</a></li>
</ul>
</li>
<li class="menu-item dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">General Dentistry <i class="fa fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li class="menu-item"><a href="#">Dental Hygiene</a></li>
<li class="menu-item"><a href="#">Crowns & Bridges</a></li>
<li class="menu-item"><a href="#">Dentures</a></li>
</ul>
</li>
<li class="menu-item dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Braces <i class="fa fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li class="menu-item"><a href="#">Dental Hygiene</a></li>
<li class="menu-item"><a href="#">Crowns & Bridges</a></li>
<li class="menu-item"><a href="#">Dentures</a></li>
</ul>
</li>
<li class="menu-item dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Implants <i class="fa fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li class="menu-item"><a href="#">Dental Hygiene</a></li>
<li class="menu-item"><a href="#">Crowns & Bridges</a></li>
<li class="menu-item"><a href="#">Dentures</a></li>
</ul>
</li>
<li class="menu-item"><a href="#">Nervous Patients Care</a></li>
</ul>
</li>
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Team <i class="fa fa-angle-down"></i></a>
<ul class="dropdown-menu">
<li class="menu-item dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Cosmetic Dentistry <i class="fa fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li class="menu-item"><a href="#">Dental Hygiene</a></li>
<li class="menu-item"><a href="#">Crowns & Bridges</a></li>
<li class="menu-item"><a href="#">Dentures</a></li>
</ul>
</li>
<li class="menu-item dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">General Dentistry <i class="fa fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li class="menu-item"><a href="#">Dental Hygiene</a></li>
<li class="menu-item"><a href="#">Crowns & Bridges</a></li>
<li class="menu-item"><a href="#">Dentures</a></li>
</ul>
</li>
<li class="menu-item dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Braces <i class="fa fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li class="menu-item"><a href="#">Dental Hygiene</a></li>
<li class="menu-item"><a href="#">Crowns & Bridges</a></li>
<li class="menu-item"><a href="#">Dentures</a></li>
</ul>
</li>
<li class="menu-item dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Implants <i class="fa fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li class="menu-item"><a href="#">Dental Hygiene</a></li>
<li class="menu-item"><a href="#">Crowns & Bridges</a></li>
<li class="menu-item"><a href="#">Dentures</a></li>
</ul>
</li>
<li class="menu-item"><a href="#">Nervous Patients Care</a></li>
</ul>
</li>
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Offers/Fees <i class="fa fa-angle-down"></i></a>
<ul class="dropdown-menu">
<li class="menu-item dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Cosmetic Dentistry <i class="fa fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li class="menu-item"><a href="#">Dental Hygiene</a></li>
<li class="menu-item"><a href="#">Crowns & Bridges</a></li>
<li class="menu-item"><a href="#">Dentures</a></li>
</ul>
</li>
<li class="menu-item dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">General Dentistry <i class="fa fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li class="menu-item"><a href="#">Dental Hygiene</a></li>
<li class="menu-item"><a href="#">Crowns & Bridges</a></li>
<li class="menu-item"><a href="#">Dentures</a></li>
</ul>
</li>
<li class="menu-item dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Braces <i class="fa fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li class="menu-item"><a href="#">Dental Hygiene</a></li>
<li class="menu-item"><a href="#">Crowns & Bridges</a></li>
<li class="menu-item"><a href="#">Dentures</a></li>
</ul>
</li>
<li class="menu-item dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Implants <i class="fa fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li class="menu-item"><a href="#">Dental Hygiene</a></li>
<li class="menu-item"><a href="#">Crowns & Bridges</a></li>
<li class="menu-item"><a href="#">Dentures</a></li>
</ul>
</li>
<li class="menu-item"><a href="#">Nervous Patients Care</a></li>
</ul>
</li>
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Patients <i class="fa fa-angle-down"></i></a>
<ul class="dropdown-menu">
<li class="menu-item dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Cosmetic Dentistry <i class="fa fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li class="menu-item"><a href="#">Dental Hygiene</a></li>
<li class="menu-item"><a href="#">Crowns & Bridges</a></li>
<li class="menu-item"><a href="#">Dentures</a></li>
</ul>
</li>
<li class="menu-item dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">General Dentistry <i class="fa fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li class="menu-item"><a href="#">Dental Hygiene</a></li>
<li class="menu-item"><a href="#">Crowns & Bridges</a></li>
<li class="menu-item"><a href="#">Dentures</a></li>
</ul>
</li>
<li class="menu-item dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Braces <i class="fa fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li class="menu-item"><a href="#">Dental Hygiene</a></li>
<li class="menu-item"><a href="#">Crowns & Bridges</a></li>
<li class="menu-item"><a href="#">Dentures</a></li>
</ul>
</li>
<li class="menu-item dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Implants <i class="fa fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li class="menu-item"><a href="#">Dental Hygiene</a></li>
<li class="menu-item"><a href="#">Crowns & Bridges</a></li>
<li class="menu-item"><a href="#">Dentures</a></li>
</ul>
</li>
<li class="menu-item"><a href="#">Nervous Patients Care</a></li>
</ul>
</li>
<li><a href="#">Blog</a></li>
<li><a href="#">Referrals</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div><!-- end navbar-inner -->
</div><!-- end container -->
</nav><!-- end navbar -->
The CSS: CSS：
#navbar {
clear: both;
border-radius: 0;
border: 0;
margin: 0;
background: #f9f9f9;
height: auto;
}
#navbar li a {
text-transform: uppercase;
font-weight: 700;
font-size: 14px;
color: #575757;
padding-top: 20px;
padding-bottom: 20px;
}
#navbar li a:hover {
color: #7bcfdc
}
.dropdown-menu {
box-shadow: none;
border-radius: 0;
border: 0;
width: 240px;
padding: 0;
}
.dropdown-submenu {
position:relative;
border-radius: 0;
padding: 0;
}
.dropdown-submenu>.dropdown-menu {
top:0;
left:100%;
margin-top:-1px;
margin-left:-1px;
}
.dropdown-submenu.pull-left {
float:none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
left:-100%;
margin-left:10px;
}
#navbar .navbar-nav li a i {
margin-left: 5px;
}
#navbar .navbar-nav li li a{
background: #eee;
text-transform: none;
padding-top: 11px;
padding-bottom: 11px;
}
#navbar .navbar-nav li li {
position: relative;
}
#navbar .navbar-nav li li i {
position: absolute;
right: 20px;
top: 14px;
}
#navbar .navbar-nav li .dropdown-submenu .dropdown-menu a {
background: #e5e5e5;
}
#navbar .navbar-nav li li a:hover,
#navbar .navbar-nav li .dropdown-submenu .dropdown-menu a:hover
{
background: #ff4e4f;
color: #FFF;
}
/*----- RESPONSIVE STYLES ------*/
@media screen and (max-width: 1199px) {
#navbar .dropdown-menu {
width: 100%;
position: relative;
}
}
@media screen and (max-width: 768px) {
.header-top p {
text-align: center;
}
.header-top a {
margin: 10px auto 0 auto;
clear: both;
display: block;
}
}
@media screen and (min-width: 1200px) {
#navbar .dropdown:hover > .dropdown-menu {
display: block;
}
.dropdown-submenu:hover>.dropdown-menu {
display:block;
}
}
I made a JSFiddle for this: 我为此做了一个JSFiddle：
https://jsfiddle.net/Lefosx46/ https://jsfiddle.net/Lefosx46/
1 个解决方案
解决方案1
0 2016-12-10 13:16:38
I took a look at your code. 我看了看你的代码。 There's a lot going on, so while my answer should work there may be more efficient ways of doing it. 发生了很多事情，因此尽管我的答案应该起作用，但可能会有更有效的方法。 It might at least point you in the right direction. 它至少可以为您指明正确的方向。
There seemed to be an issue with: 似乎有一个问题：
@media screen and (max-width: 1199px) {
#navbar .dropdown-menu {
width: 100%;
position: relative;
}
}
I removed that and added: 我删除并添加：
@media screen and (max-width: 1199px) {
.dropdown-submenu:hover .dropdown-menu {
display: block;
}
}
You can see a fiddle here: https://jsfiddle.net/t4rnz8dg/ 您可以在这里看到小提琴： https : //jsfiddle.net/t4rnz8dg/
Apologies if I've misunderstood your question! 抱歉，如果我误解了您的问题！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
响应式多级导航错误 - Responsive Multi-level Navigation bug
在多级菜单导航抽屉中搜索 - Search in multi-level menu navigation drawer
多级菜单 - Multi-Level Menu
尝试为响应式多级菜单制作一些脚本 - Try to make a little script for responsive multi-level menu
根据权限返回多级菜单抽屉导航项 - Return multi-level menu drawer navigation items based on permissions
Bootstrap多级下拉菜单将子菜单固定在DOM上 - Bootstrap Multi-level dropdown pin the sub menu's on DOM
多级可折叠Bootstrap侧导航菜单有问题 - Trouble with multi-level collapsible Bootstrap side-nav menu
带多级导航的toggleClass - toggleClass with multi-level navigation
响应式多级菜单-单击链接时如何关闭菜单？ - Responsive Multi-Level Menu - How to close menu when link is clicked?
响应式和多级菜单 - Responsive and multi level menu
相关标签