bootstrap 3响应多个大型菜单 [英] bootstrap 3 responsive multiple mega menu
本文介绍了bootstrap 3响应多个大型菜单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用bootstrap 3和设计大型菜单导航。
HTML：
< div class =container> ;
< nav class =navbar navbar-default>
< div class =navbar-header>
< button class =navbar-toggletype =buttondata-toggle =collapsedata-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-brandhref =＃> 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-toggledata-toggle =dropdown>集合< 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>商店新功能< / li>
< div id =myCarouselclass =carousel slidedata-ride =carousel>
< div class =carousel-inner>
< div class =item active> < a href =＃>< img src =http://placehold.it/254x150/3498db/f5f5f5/&text=New+Collectionclass =img-responsivealt =product 1 >< / a>
< h4>< small>夏装花艺印花< / small>< / h4>
< button class =btn btn-primarytype =button> 49,99€< / button>
< button href =＃class =btn btn-defaulttype =button>< span class =glyphicon glyphicon-heart>< / span>添加到收藏< / button>
< / div>
<！ - 结束项目 - >
< div class =item> < a href =＃>< img src =http://placehold.it/254x150/ef5e55/f5f5f5/&text=New+Collectionclass =img-responsivealt =product 2 >< / a>
< h4>< small>有光泽触感的金凉鞋< / small>< / h4>
< button class =btn btn-primarytype =button> 9,99€< / button>
< button href =＃class =btn btn-defaulttype =button>< span class =glyphicon glyphicon-heart>< / span>添加到收藏< / button>
< / div>
<！ - 结束项目 - >
< div class =item> < a href =＃>< img src =http://placehold.it/254x150/2ecc71/f5f5f5/&text=New+Collectionclass =img-responsivealt =product 3 >< / a>
< h4>< small> Denin夹克印花< / small>< / h4>
< button class =btn btn-primarytype =button> 49,99€< / button>
< button href =＃class =btn btn-defaulttype =button>< span class =glyphicon glyphicon-heart>< / span>添加到收藏< / button>
< / div>
<！ - 结束项目 - >
< / div>
<！ - End Carousel Inner - >
< / div>
<！ - /.carousel - >
< li class =divider>< / li>
< li>< a href =＃>查看所有收藏< span class =glyphicon glyphicon-chevron-right pull-right>< / span>< / a>
< / li>
< / ul>
< / li>
< li class =col-sm-3>
< ul>
< li class =dropdown-header>连衣裙< / li>
< li>< a href =＃>独特功能< / a>
< / li>
< li>< a href =＃>图片回应< / a>
< / li>
< li>< a href =＃>自动轮换< / a>
< / li>
< li>< a href =＃>通讯表< / a>
< / li>
< li>< a href =＃>四列< / a>
< / li>
< li class =divider>< / li>
< li class =dropdown-header>顶部< / li>
< li>< a href =＃>好的字体< / a>
< / li>
< / ul>
< / li>
< li class =col-sm-3>
< ul>
< li class =dropdown-header>夹克< / li>
< li>< a href =＃>易于自定义< / a>
< / li>
< li>< a href =＃> Glyphicons< / a>
< / li>
< li>< a href =＃>拉右元素< / a>
< / li>
< li class =divider>< / li>
< li class =dropdown-header>裤子< / li>
< li>< a href =＃>彩色标题< / a>
< / li>
< li>< a href =＃>主要按钮&默认< / a>
< / li>
< li>< a href =＃>号召性用语< / a>
< / li>
< / ul>
< / li>
< li class =col-sm-3>
< ul>
< li class =dropdown-header>配件< / li>
< li>< a href =＃>默认Navbar< / a>
< / li>
< li>< a href =＃>可爱的字体< / a>
< / li>
< li>< a href =＃>回应式下拉式选单< / a>
< / li>
< li class =divider>< / li>
< li class =dropdown-header> Newsletter< / li>
< form class =formrole =form>
< div class =form-group>
< label class =sr-onlyfor =email>电子邮件地址< / label>
< input type =emailclass =form-controlid =emailplaceholder =输入电子邮件>
< / div>
< button type =submitclass =btn btn-primary btn-block>登录< / button>
< / form>
< / ul>
< / li>
< / ul>
< / li>
< / ul>
< ul class =nav navbar-nav>
< li class =dropdown mega-dropdown> < a href =＃class =dropdown-toggledata-toggle =dropdown>集合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>商店新功能< / li>
< div id =myCarouselclass =carousel slidedata-ride =carousel>
< div class =carousel-inner>
< div class =item active> < a href =＃>< img src =http://placehold.it/254x150/3498db/f5f5f5/&text=New+Collectionclass =img-responsivealt =product 1 >< / a>
< h4>< small>夏装花艺印花< / small>< / h4>
< button class =btn btn-primarytype =button> 49,99€< / button>
< button href =＃class =btn btn-defaulttype =button>< span class =glyphicon glyphicon-heart>< / span>添加到收藏< / button>
< / div>
<！ - 结束项目 - >
< div class =item> < a href =＃>< img src =http://placehold.it/254x150/ef5e55/f5f5f5/&text=New+Collectionclass =img-responsivealt =product 2 >< / a>
< h4>< small>有光泽触感的金凉鞋< / small>< / h4>
< button class =btn btn-primarytype =button> 9,99€< / button>
< button href =＃class =btn btn-defaulttype =button>< span class =glyphicon glyphicon-heart>< / span>添加到收藏< / button>
< / div>
<！ - 结束项目 - >
< div class =item> < a href =＃>< img src =http://placehold.it/254x150/2ecc71/f5f5f5/&text=New+Collectionclass =img-responsivealt =product 3 >< / a>
< h4>< small> Denin夹克印花< / small>< / h4>
< button class =btn btn-primarytype =button> 49,99€< / button>
< button href =＃class =btn btn-defaulttype =button>< span class =glyphicon glyphicon-heart>< / span>添加到收藏< / button>
< / div>
<！ - 结束项目 - >
< / div>
<！ - End Carousel Inner - >
< / div>
<！ - /.carousel - >
< li class =divider>< / li>
< li>< a href =＃>查看所有收藏< span class =glyphicon glyphicon-chevron-right pull-right>< / span>< / a>
< / li>
< / ul>
< / li>
< li class =col-sm-3>
< ul>
< li class =dropdown-header>连衣裙< / li>
< li>< a href =＃>独特功能< / a>
< / li>
< li>< a href =＃>图片回应< / a>
< / li>
< li>< a href =＃>自动轮播< / a>
< / li>
< li>< a href =＃>通讯表< / a>
< / li>
< li>< a href =＃>四列< / a>
< / li>
< li class =divider>< / li>
< li class =dropdown-header>顶部< / li>
< li>< a href =＃>好的字体< / a>
< / li>
< / ul>
< / li>
< li class =col-sm-3>
< ul>
< li class =dropdown-header>夹克< / li>
< li>< a href =＃>易于自定义< / a>
< / li>
< li>< a href =＃> Glyphicons< / a>
< / li>
< li>< a href =＃>拉右元素< / a>
< / li>
< li class =divider>< / li>
< li class =dropdown-header>裤子< / li>
< li>< a href =＃>彩色页眉< / a>
< / li>
< li>< a href =＃>主要按钮&默认< / a>
< / li>
< li>< a href =＃>号召性用语< / a>
< / li>
< / ul>
< / li>
< li class =col-sm-3>
< ul>
< li class =dropdown-header>配件< / li>
< li>< a href =＃>默认Navbar< / a>
< / li>
< li>< a href =＃>可爱的字体< / a>
< / li>
< li>< a href =＃>回应式下拉式选单< / a>
< / li>
< li class =divider>< / li>
< li class =dropdown-header> Newsletter< / li>
< form class =formrole =form>
< div class =form-group>
< label class =sr-onlyfor =email>电子邮件地址< / label>
< input type =emailclass =form-controlid =emailplaceholder =输入电子邮件>
< / div>
< button type =submitclass =btn btn-primary btn-block>登录< / button>
< / form>
< / ul>
< / li>
< / ul>
< / li>
< / ul>
< / div>
<！ - /.nav-collapse - >
< / nav>
< / div>
CSS：
code> 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透明;
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> / code>导航菜单。在我看到一个子菜单。我的意思是如果我点击集合或集合2我看到一个子菜单。
我如何解决这个问题？
问题：点击集合和集合2 u查看集合底部的一个子菜单，而不是集合2。
注意：要更改箭头的位置。对于两个下拉菜单，向上箭头表示相同的位置。此位置将更改为
- 第一个下拉菜单： http://i.imgur.com/Vklu5c1.png
- 第二个下拉菜单： http://i.imgur.com/97Lhca3.png
- First Dropdown: http://i.imgur.com/Vklu5c1.png
- Second Dropdown: http://i.imgur.com/97Lhca3.png
ol>
$ b发生此问题的原因是css三角形相对于整体
navbar 定位。 理想的解决方案是将三角形嵌入当前选定的项目中。要实现此删除
.mega下拉菜单：{
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）{
}
小提琴 - http://jsfiddle.net/7eHFd/5/
I work with bootstrap 3 and design mega menu navigation.
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;
}
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.
how do can i fix this ?
Problem : 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
解决方案
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.
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/
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/
这篇关于bootstrap 3响应多个大型菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
