Html bootstrap 3 响应式多重超级菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25057451/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-29 02:24:14 来源:igfitidea点击:
bootstrap 3 responsive multiple mega menu
提问by user27133
I work with bootstrap 3 and design mega menu navigation.
我使用 bootstrap 3 并设计大型菜单导航。
HTML:
HTML：
<div class="container">
<nav class="navbar navbar-default">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-navbar-collapse"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> <a class="navbar-brand" href="#">MegaMenu</a>
</div>
<div class="collapse navbar-collapse js-navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Collection <span class="glyphicon glyphicon-chevron-down pull-right"></span></a>
<ul class="dropdown-menu mega-dropdown-menu row">
<li class="col-sm-3">
<ul>
<li class="dropdown-header">New in Stores</li>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active"> <a href="#"><img src="http://placehold.it/254x150/3498db/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 1"></a>
<h4><small>Summer dress floral prints</small></h4>
<button class="btn btn-primary" type="button">49,99 </button>
<button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button>
</div>
<!-- End Item -->
<div class="item"> <a href="#"><img src="http://placehold.it/254x150/ef5e55/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 2"></a>
<h4><small>Gold sandals with shiny touch</small></h4>
<button class="btn btn-primary" type="button">9,99 </button>
<button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button>
</div>
<!-- End Item -->
<div class="item"> <a href="#"><img src="http://placehold.it/254x150/2ecc71/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 3"></a>
<h4><small>Denin Hymanet stamped</small></h4>
<button class="btn btn-primary" type="button">49,99 </button>
<button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button>
</div>
<!-- End Item -->
</div>
<!-- End Carousel Inner -->
</div>
<!-- /.carousel -->
<li class="divider"></li>
<li><a href="#">View all Collection <span class="glyphicon glyphicon-chevron-right pull-right"></span></a>
</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Dresses</li>
<li><a href="#">Unique Features</a>
</li>
<li><a href="#">Image Responsive</a>
</li>
<li><a href="#">Auto Carousel</a>
</li>
<li><a href="#">Newsletter Form</a>
</li>
<li><a href="#">Four columns</a>
</li>
<li class="divider"></li>
<li class="dropdown-header">Tops</li>
<li><a href="#">Good Typography</a>
</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Hymanets</li>
<li><a href="#">Easy to customize</a>
</li>
<li><a href="#">Glyphicons</a>
</li>
<li><a href="#">Pull Right Elements</a>
</li>
<li class="divider"></li>
<li class="dropdown-header">Pants</li>
<li><a href="#">Coloured Headers</a>
</li>
<li><a href="#">Primary Buttons & Default</a>
</li>
<li><a href="#">Calls to action</a>
</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Accessories</li>
<li><a href="#">Default Navbar</a>
</li>
<li><a href="#">Lovely Fonts</a>
</li>
<li><a href="#">Responsive Dropdown </a>
</li>
<li class="divider"></li>
<li class="dropdown-header">Newsletter</li>
<form class="form" role="form">
<div class="form-group">
<label class="sr-only" for="email">Email address</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<button type="submit" class="btn btn-primary btn-block">Sign in</button>
</form>
</ul>
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav">
<li class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Collection 2<span class="glyphicon glyphicon-chevron-down pull-right"></span></a>
<ul class="dropdown-menu mega-dropdown-menu row">
<li class="col-sm-3">
<ul>
<li class="dropdown-header">New in Stores</li>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active"> <a href="#"><img src="http://placehold.it/254x150/3498db/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 1"></a>
<h4><small>Summer dress floral prints</small></h4>
<button class="btn btn-primary" type="button">49,99 </button>
<button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button>
</div>
<!-- End Item -->
<div class="item"> <a href="#"><img src="http://placehold.it/254x150/ef5e55/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 2"></a>
<h4><small>Gold sandals with shiny touch</small></h4>
<button class="btn btn-primary" type="button">9,99 </button>
<button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button>
</div>
<!-- End Item -->
<div class="item"> <a href="#"><img src="http://placehold.it/254x150/2ecc71/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 3"></a>
<h4><small>Denin Hymanet stamped</small></h4>
<button class="btn btn-primary" type="button">49,99 </button>
<button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button>
</div>
<!-- End Item -->
</div>
<!-- End Carousel Inner -->
</div>
<!-- /.carousel -->
<li class="divider"></li>
<li><a href="#">View all Collection <span class="glyphicon glyphicon-chevron-right pull-right"></span></a>
</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Dresses</li>
<li><a href="#">Unique Features</a>
</li>
<li><a href="#">Image Responsive</a>
</li>
<li><a href="#">Auto Carousel</a>
</li>
<li><a href="#">Newsletter Form</a>
</li>
<li><a href="#">Four columns</a>
</li>
<li class="divider"></li>
<li class="dropdown-header">Tops</li>
<li><a href="#">Good Typography</a>
</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Hymanets</li>
<li><a href="#">Easy to customize</a>
</li>
<li><a href="#">Glyphicons</a>
</li>
<li><a href="#">Pull Right Elements</a>
</li>
<li class="divider"></li>
<li class="dropdown-header">Pants</li>
<li><a href="#">Coloured Headers</a>
</li>
<li><a href="#">Primary Buttons & Default</a>
</li>
<li><a href="#">Calls to action</a>
</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Accessories</li>
<li><a href="#">Default Navbar</a>
</li>
<li><a href="#">Lovely Fonts</a>
</li>
<li><a href="#">Responsive Dropdown </a>
</li>
<li class="divider"></li>
<li class="dropdown-header">Newsletter</li>
<form class="form" role="form">
<div class="form-group">
<label class="sr-only" for="email">Email address</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<button type="submit" class="btn btn-primary btn-block">Sign in</button>
</form>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<!-- /.nav-collapse -->
</nav>
</div>
CSS:
CSS：
body {
font-family:'Open Sans', 'sans-serif';
background:#f0f0f0;
}
.navbar-nav>li>.dropdown-menu {
margin-top:20px;
border-top-left-radius:4px;
border-top-right-radius:4px;
}
.navbar-default .navbar-nav>li>a {
width:200px;
font-weight:bold;
}
.mega-dropdown {
position: static !important;
width:100%;
}
.mega-dropdown-menu {
padding: 20px 0px;
width: 100%;
box-shadow: none;
-webkit-box-shadow: none;
}
.mega-dropdown-menu:before {
content:"";
border-bottom: 15px solid #fff;
border-right: 17px solid transparent;
border-left: 17px solid transparent;
position: absolute;
top: -15px;
left: 285px;
z-index: 10;
}
.mega-dropdown-menu:after {
content:"";
border-bottom: 17px solid #ccc;
border-right: 19px solid transparent;
border-left: 19px solid transparent;
position: absolute;
top: -17px;
left: 283px;
z-index: 8;
}
.mega-dropdown-menu > li > ul {
padding: 0;
margin: 0;
}
.mega-dropdown-menu > li > ul > li {
list-style: none;
}
.mega-dropdown-menu > li > ul > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.428571429;
color: #999;
white-space: normal;
}
.mega-dropdown-menu > li ul > li > a:hover, .mega-dropdown-menu > li ul > li > a:focus {
text-decoration: none;
color: #444;
background-color: #f5f5f5;
}
.mega-dropdown-menu .dropdown-header {
color: #428bca;
font-size: 18px;
font-weight:bold;
}
.mega-dropdown-menu form {
margin:3px 20px;
}
.mega-dropdown-menu .form-group {
margin-bottom: 3px;
}
Now, i ahve two <ul>for navigation menu . in both i see one sub menu. me mean is if i click in collection Or collection 2 i see one sub menu.
现在，我有两个<ul>导航菜单。在两者中我都看到了一个sub menu。我的意思是，如果我点击收藏或收藏 2，我会看到一个子菜单。
how do can i fix this ?
我该如何解决这个问题？
Problem: click on collection and collection 2 u see one submenu bottom of collection not for collection 2.
问题：click on collection and collection 2 u see one submenu bottom of collection not for collection 2.
Note: The Position of the arrow is to be changed. For both the dropdowns, the upward arrows indicate the same position. This position is to be changed like
注意：箭头的位置是要改变的。对于这两个下拉菜单，向上的箭头表示相同的位置。这个位置是要改变的
- First Dropdown: http://i.imgur.com/Vklu5c1.png
- Second Dropdown: http://i.imgur.com/97Lhca3.png
- 第一个下拉列表：http: //i.imgur.com/Vklu5c1.png
- 第二个下拉列表：http: //i.imgur.com/97Lhca3.png
采纳答案by Kami
The issue occurs because the css triangle is being positioned relative to overall navbar. As this element's position does not change, the triangle does to reposition itself.
出现此问题是因为 css 三角形相对于整体定位navbar。由于此元素的位置不会改变，三角形会自行重新定位。
The ideal solution is to embed the triangle within the currently selected item. To achieve this remove
理想的解决方案是将三角形嵌入当前选定的项目中。为了实现这个删除
.mega-dropdown-menu:before {
content:"";
border-bottom: 15px solid #fff;
border-right: 17px solid transparent;
border-left: 17px solid transparent;
position: relative;
top: -15px;
left: 150px;
z-index: 10;
}
.mega-dropdown-menu:after {
content:"";
border-bottom: 17px solid #ccc;
border-right: 19px solid transparent;
border-left: 19px solid transparent;
position: absolute;
top: -17px;
left: 283px;
z-index: 8;
}
and replace with
并替换为
.open .dropdown-toggle:after {
border-bottom: 15px solid #fff;
border-left: 17px solid transparent;
border-right: 17px solid transparent;
content: "";
left: 163px;
position: absolute;
bottom: -21px;
z-index: 1500;
}
.open .dropdown-toggle span:after {
border-bottom: 17px solid #ccc;
border-left: 19px solid transparent;
border-right: 19px solid transparent;
content: "";
left: -10px;
position: absolute;
bottom: -41px;
z-index: 8;
}
This attaches the triangle to the text and down arrows, and positions it relative to these elements.
这会将三角形附加到文本和向下箭头，并将其相对于这些元素定位。
Fiddle - http://jsfiddle.net/7eHFd/4/
小提琴 - http://jsfiddle.net/7eHFd/4/
Update: In the above the triangle remains in place when sizing down. To workaround this, wrap with above code with a media query.
更新：在上图中，缩小尺寸时三角形保持原位。要解决此问题，请使用媒体查询将上述代码包装起来。
@media (min-width: 768px) {
}
Fiddle - http://jsfiddle.net/7eHFd/5/
回答by DevangKantharia
Solution:JS Fiddle Solution Link
解决方案：JS Fiddle 解决方案链接
Information:
信息：
Referring to thislink, you can't adjust psudo class css. Styling or Content created by :after or :before is not part of the DOM and therefore cannot be selected or modified.
参考此链接，您无法调整 psudo 类 css。:after 或 :before 创建的样式或内容不是 DOM 的一部分，因此无法选择或修改。
Also, this solution is suitable for:
此外，此解决方案适用于：
- Responsive Design
- The menu arrow, will be positioned to the center of the menu item.
- 响应式设计
- 菜单箭头，将被定位到菜单项的中心。
Issues:
问题：
Psudo class CSS:
伪类 CSS：
.mega-dropdown-menu:before {
content:"";
border-bottom: 15px solid #fff;
border-right: 17px solid transparent;
border-left: 17px solid transparent;
position: absolute;
top: -15px;
left: 285px;
z-index: 10;
}
.mega-dropdown-menu:after {
content:"";
border-bottom: 17px solid #ccc;
border-right: 19px solid transparent;
border-left: 19px solid transparent;
position: absolute;
top: -17px;
left: 283px;
z-index: 8;
}
So, for the same, `.mega-dropdown-menu' class need to be reset the psudo border styling.
因此，同样的，`.mega-dropdown-menu' 类需要重置伪边框样式。
Solution:JS Fiddle Solution Link
解决方案：JS Fiddle 解决方案链接
And so, a new element is to be added for which has the same styling as under:
因此，将添加一个新元素，其样式与下面相同：
CSS changes:
CSS变化：
.show{
display: block;
}
.arrow1, .arrow2 {
position: absolute;
z-index: 99999;
display: none;
}
.open .arrow1, .open .arrow2 {
display: block;
}
.arrow1 span:after, .arrow2 span:after {
content:"";
border-bottom: 15px solid #fff;
border-right: 17px solid transparent;
border-left: 17px solid transparent;
position: absolute;
top: 6px;
left: 2px;
}
.arrow1 span:before, .arrow2 span:before {
content:"";
border-bottom: 17px solid #ccc;
border-right: 19px solid transparent;
border-left: 19px solid transparent;
position: absolute;
top: 4px;
}
.mega-dropdown-menu:after, .mega-dropdown-menu:before{border: none;}
JS Changes:
JS 变化：
$(".nav > li.mega-dropdown").eq( 0 ).append("<p class='arrow1 arrOw'><span></span></p>");
$(".nav > li.mega-dropdown").eq( 1 ).append("<p class='arrow2 arrOw'><span></span></p>");
$(".nav > li.mega-dropdown").eq( 0 ).click(function () {
//x = $(".mega-dropdown.open").position();
x = $(this).position();
aa = x.left+75;
$(this).find(".arrow1").css("left", aa);
});
$(".nav > li.mega-dropdown").eq( 1 ).click(function () {
//x = $(".mega-dropdown.open").position();
x = $(this).position();
aa = x.left + 75;
$(this).find(".arrow2").css("left", aa);
});
If you have any other issue, then please add a comment below.
如果您有任何其他问题，请在下面添加评论。
Regards D.
问候 D。
回答by eirenaios
One Issue Solved here >> Mega drop down triangle
在这里解决了一个问题 >> Mega 下拉三角形
checked on 1920 X 1080 Resolution! Its Working!
检查 1920 X 1080 分辨率！它的工作！
Working on Second!
第二次工作！
css
css
body {
font-family:'Open Sans', 'sans-serif';
background:#f0f0f0;
}
.navbar-nav>li>.dropdown-menu {
margin-top:20px;
border-top-left-radius:4px;
border-top-right-radius:4px;
}
.navbar-default .navbar-nav>li>a {
width:200px;
font-weight:bold;
}
.mega-dropdown {
position: static !important;
width:100%;
}
.mega-dropdown-menu {
padding: 20px 0px;
width: 100%;
box-shadow: none;
-webkit-box-shadow: none;
}
.mega-dropdown-menu-1:before {
content:"";
border-bottom: 15px solid #fff;
border-right: 17px solid transparent;
border-left: 17px solid transparent;
position: absolute;
top: -15px;
left: 30%;
z-index: 10;
}
.mega-dropdown-menu-1:after {
content:"";
border-bottom: 17px solid #ccc;
border-right: 19px solid transparent;
border-left: 19px solid transparent;
position: absolute;
top: -17px;
left: 30%;
z-index: 8;
}
.mega-dropdown-menu-2:before {
content:"";
border-bottom: 15px solid #fff;
border-right: 17px solid transparent;
border-left: 17px solid transparent;
position: absolute;
top: -15px;
left: 50%;
z-index: 10;
}
.mega-dropdown-menu-2:after {
content:"";
border-bottom: 17px solid #ccc;
border-right: 19px solid transparent;
border-left: 19px solid transparent;
position: absolute;
top: -17px;
left: 50%;
z-index: 8;
}
.mega-dropdown-menu > li > ul {
padding: 0;
margin: 0;
}
.mega-dropdown-menu > li > ul > li {
list-style: none;
}
.mega-dropdown-menu > li > ul > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.428571429;
color: #999;
white-space: normal;
}
.mega-dropdown-menu > li ul > li > a:hover, .mega-dropdown-menu > li ul > li > a:focus {
text-decoration: none;
color: #444;
background-color: #f5f5f5;
}
.mega-dropdown-menu .dropdown-header {
color: #428bca;
font-size: 18px;
font-weight:bold;
}
.mega-dropdown-menu form {
margin:3px 20px;
}
.mega-dropdown-menu .form-group {
margin-bottom: 3px;
}
