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.