Bootstrap响应式多级导航菜单
[英]Bootstrap responsive multi-level navigation menu
问题描述
我已经为引导程序编写了一个多级导航菜单。 在1200px以上的像素中效果很好。 但是，当屏幕尺寸小于1200像素（我已将1200像素设置为临界点）时，第一级下拉菜单会在单击时良好打开/关闭，但是第二级下拉菜单在单击时不会打开。 我希望在单击其父锚时在低于1200的屏幕尺寸上打开此第二级下拉菜单。 例如，当在小于1200像素的屏幕尺寸上单击服务>美容牙科时，我希望其中的“ .dropdown-menu”（牙齿卫生，假牙等）显示/切换显示（再次单击隐藏）。 我该如何实现？
这是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 -->
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;
}
}
我为此做了一个JSFiddle：
https://jsfiddle.net/Lefosx46/
1 个解决方案
解决方案1
0 2016-12-10 13:16:38
我看了看你的代码。 发生了很多事情，因此尽管我的答案应该起作用，但可能会有更有效的方法。 它至少可以为您指明正确的方向。
似乎有一个问题：
@media screen and (max-width: 1199px) {
#navbar .dropdown-menu {
width: 100%;
position: relative;
}
}
我删除并添加：
@media screen and (max-width: 1199px) {
.dropdown-submenu:hover .dropdown-menu {
display: block;
}
}
您可以在这里看到小提琴： https : //jsfiddle.net/t4rnz8dg/
抱歉，如果我误解了您的问题！
响应式多级导航错误
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.