bootstrap 3响应多个大型菜单
我使用bootstrap 3并设计大型菜单导航。
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 jacket 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">Jackets</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 jacket 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">Jackets</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：
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;
}
现在，我有两个<ul>导航菜单。在我看到一个sub menu。我的意思是如果我点击收集或收集2我看到一个子菜单。
我该如何解决这个问题？
问题：click on collection and collection 2 u see one submenu bottom of collection not for collection 2.
注意：要更改箭头的位置。对于两个下拉列表，向上箭头表示相同的位置。这个位置应该像
一样改变
3 个答案:
答案 0 :(得分：7)
出现此问题是因为css三角形相对于整体navbar定位。由于此元素的位置不会改变，因此三角形会重新定位。
理想的解决方案是将三角形嵌入当前所选项目中。要实现此目的，请删除
.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;
}
并替换为
.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;
}
这会将三角形附加到文本和向下箭头，并将其相对于这些元素定位。
小提琴 - http://jsfiddle.net/7eHFd/4/
更新：在上面，三角形在确定尺寸时保持不变。要解决此问题，请使用媒体查询包含上述代码。
@media (min-width: 768px) {
}
答案 1 :(得分：2)
解决方案： JS Fiddle Solution Link
信息：
参考this链接，您无法调整psudo class css。样式或内容由：after或：before创建，不属于DOM，因此无法选择或修改。
此外，此解决方案适用于：
- 响应式设计
- 菜单箭头将位于菜单项的中心。
<强>的问题：
Psudo class 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;
}
所以，对于同样的，`.mega -downdown-menu＆＃39; class需要重置psudo边框样式。
解决方案： JS Fiddle Solution Link
因此，要添加一个新元素，其具有与以下相同的样式：
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改变：
$(".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);
});
如果您有任何其他问题，请在下方添加评论。
问候D.
答案 2 :(得分：1)
此处解决的一个问题＆gt;＆gt; Mega drop down triangle
检查1920 X 1080分辨率！它的工作！
继续努力！
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;
}
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？