[英]Make bootstrap mega menu open on hover instead of on click
我正在使用超大型引导菜单，并且已根据需要设置其样式和工作方式，但是我需要在悬停时（而不是单击时）为桌面设备打开它。 我以为只要使用CSS就可以轻松完成此操作，但是我无法使其正常工作。
有什么建议么？ 我愿意使用jQuery或jscript，但是我对这些还不太满意。
工作的jsfiddle： https ://jsfiddle.net/L2o657p6/4/
HTML：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Mega Menuu</title>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1" aria-expanded="false">
<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="#">Menu Logo</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown dropdown-megamenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Today <span class="sr-only">(current)</span></a>
<div class="dropdown-container">
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="media">
<div class="media-left">
<a class="link-image" href="#"><img class="media-object" src="holder.js/100x100"></a>
<a class="link-image link-image-sm" href="#"><img class="media-object" src="holder.js/46x46"></a>
<a class="link-image link-image-sm" href="#"><img class="media-object" src="holder.js/46x46"></a>
</div>
<div class="media-body">
<h5>Today's Featured Collections</h5>
<ul class="list-links">
<li><a href="#">Press Every Button</a></li>
<li><a href="#">Travel with Technology</a></li>
<li><a href="#">Smart Choice</a></li>
<li><a href="#">Fall in Love with Tech</a></li>
<li><a href="#">Smartphones at a Snip</a></li>
</ul>
</div>
</div>
</div><!-- /col -->
<div class="col-sm-6 col-md-4">
<div class="media">
<div class="media-left">
<a class="link-image" href="#"><img class="media-object" src="holder.js/100x100"></a>
<a class="link-image link-image-sm" href="#"><img class="media-object" src="holder.js/46x46"></a>
<a class="link-image link-image-sm" href="#"><img class="media-object" src="holder.js/46x46"></a>
</div>
<div class="media-body">
<h5>Today's Trending Collections</h5>
<ul class="list-links">
<li><a href="#">Harley-Davidson</a></li>
<li><a href="#">Will you be my Valentine?</a></li>
<li><a href="#">Summer Wedding Bridesmaid Dresses</a></li>
<li><a href="#">Pink Wedding Centerpiece Ideas</a></li>
<li><a href="#">Wedding Party Table Runners</a></li>
<li><a href="#">Backyard Wedding Reception</a></li>
</ul>
</div>
</div>
</div><!-- /col -->
<div class="col-sm-6 col-md-4">
<h5>My Collections</h5>
<span class="text-muted">You currently have no collections. <a href="#">Learn how to create one</a>.</span>
</div><!-- /col -->
</div><!-- /row -->
</div>
</div><!-- /dropdown-container -->
</li>
<li class="dropdown dropdown-megamenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Fashion</a>
<div class="dropdown-container">
<div class="row">
<div class="col-sm-4 col-md-2">
<h5>Top categories</h5>
<ul class="list-links">
<li role="separator" class="divider"></li>
<li><a href="#">Men's</a></li>
<li><a href="#">Women's</a></li>
<li><a href="#">Kids</a></li>
</ul>
</div><!-- /col -->
<div class="col-sm-4 col-md-3">
<h5>Shop for</h5>
<ul class="list-links">
<li role="separator" class="divider"></li>
<li><a href="#">Jewelry & Watches</a></li>
<li><a href="#">Handbags & Accessories</a></li>
<li><a href="#">Health & Beauty</a></li>
<li><a href="#">Shoes</a></li>
<li><a href="#">Sales & Events</a></li>
</ul>
</div><!-- /col -->
<div class="col-sm-12 col-md-7">
<img src="holder.js/100px200">
</div><!-- /col -->
</div><!-- /row -->
</div><!-- /dropdown-container -->
</li>
<li class="dropdown dropdown-megamenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Electronics</a>
<div class="dropdown-container">
<div class="row">
<div class="col-sm-4 col-md-2">
<h5>Top categories</h5>
<ul class="list-links">
<li><a href="#">Cell Phones & Accessories</a></li>
<li><a href="#">Cameras & Photo</a></li>
<li><a href="#">Computers & Tablets</a></li>
</ul>
</div><!-- /col -->
<div class="col-sm-4 col-md-3">
<h5>Other categories</h5>
<ul class="list-links">
<li><a href="#">Car Audio, Video & GPS</a></li>
<li><a href="#">iPhone</a></li>
<li><a href="#">iPad</a></li>
<li><a href="#">TV, Audio</a></li>
<li><a href="#">Video Games & Consoles</a></li>
</ul>
</div><!-- /col -->
<div class="col-sm-12 col-md-7">
<img src="holder.js/100px200">
</div><!-- /col -->
</div><!-- /row -->
</div><!-- /dropdown-container -->
</li>
<li class="dropdown dropdown-megamenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Deals</a>
<div class="dropdown-container">
<div class="row">
<div class="col-sm-3">
<h5>Best deals of the day</h5>
<ul class="list-links">
<li><a href="#">Car Audio, Video & GPS</a></li>
<li><a href="#">iPhone</a></li>
<li><a href="#">iPad</a></li>
<li><a href="#">TV, Audio</a></li>
<li><a href="#">Video Games & Consoles</a></li>
</ul>
</div><!-- /col -->
<div class="col-sm-3">
<a href="#" class="thumbnail">
<img src="holder.js/100px140" alt="">
<div class="caption">
<h5>Waterproof cellphone cover</h5>
<p>$5.99</p>
</div>
</a>
</div><!-- /col -->
<div class="col-sm-3">
<a href="#" class="thumbnail">
<img src="holder.js/100px140" alt="">
<div class="caption">
<h5>Large 20 slot leather watch box organizer</h5>
<p>$25.99</p>
</div>
</a>
</div><!-- /col -->
<div class="col-sm-3">
<a href="#" class="thumbnail">
<img src="holder.js/100px140" alt="">
<div class="caption">
<h5>Samsung Galaxy Tab A SM-P550NZAAXAR 9.7-Inch W-Fi Tablet (Titanium with S-Pen)</h5>
<p>$319</p>
</div>
</a>
</div><!-- /col -->
</div><!-- /row -->
</div><!-- /dropdown-container -->
</li>
<li class="dropdown dropdown-megamenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Contact Us</a>
<div class="dropdown-container">
<div class="row">
<div class="col-sm-6 col-md-4">
<h5>Contact us</h5>
<p>Feel free to drop us a line, we will respond as sson as possible.</p>
<form>
<div class="form-group">
<label class="sr-only" for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Your Email">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputText1">Text</label>
<textarea type="password" class="form-control" id="exampleInputText1" placeholder="Your Message" rows="3"></textarea>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div><!-- /col -->
<div class="col-sm-6 col-md-8">
<img src="holder.js/100px260?text=Map">
</div><!-- /col -->
</div><!-- /row -->
</div><!-- /dropdown-container -->
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</body>
</html>
CSS：
.nav > .dropdown-megamenu {
position: static;
}
@media (max-width: 767px) {
.navbar-nav .open .dropdown-container {
position: static;
float: none;
width: auto;
margin-top: 0;
border: 0;
box-shadow: none;
border-radius: 0;
}
}
.dropdown-megamenu > .dropdown-container {
position: absolute;
top: 100%;
left: 0;
right: 0;
max-width: 100%;
padding: 15px;
}
.dropdown-megamenu .dropdown-menu {
display: block;
}
.link-image .media-object {
float: left;
margin-bottom: 7.5px;
}
.link-image-sm + .link-image-sm .media-object {
margin-left: 7.5px;
}
.thumbnail .caption {
min-height: 120px;
}
.thumbnail:hover {
text-decoration: none;
}
/* Link list */
.list-links {
list-style: none;
padding: 0;
}
.list-links li {
line-height: 1.71428571;
}
.list-links a {
color: #555;
}
.list-links a:hover,
.list-links a:focus,
.list-links a:active {
color: #22527b;
}
html,
body {
height: 100%;
min-height: 500px;
}
body {
background: -webkit-linear-gradient(top, #59a874 0, #449a63 100%);
background: linear-gradient(to bottom, #59a874 0, #449a63 100%);
}
h3 {
font-family: 'Open Sans', sans-serif;
font-weight: bold;
text-align: center;
line-height: 1.3;
margin-bottom: 2rem;
color: #fff;
}
您可以只添加一个桌面媒体查询：
@media (min-width: 768px){
.navbar-nav .dropdown-megamenu:hover .dropdown-container {
display: block;
}
}
这是一个小提琴： https : //jsfiddle.net/vqubh18j/
您可以根据需要将选择器调整为dropdown:hover .dropdown-container 。
还要注意，下拉菜单上有2px的上边距，这在导航栏和下拉菜单之间形成了微小的间隔，从而允许较慢的鼠标移动器使菜单意外消失：
.dropdown-container {
...
/* Should probably be removed or replaced with
margin: 0; border-top: 2px solid transparent; */
margin: 2px 0 0;
...
}
当单击dropdown-toggle ，class open将添加到dropdown-megamenu 。
.nav > .dropdown-megamenu.open .dropdown-container > .dropdown-menu,
.nav > .dropdown-megamenu.open > .dropdown-container {
display: block;
}
将上面的CSS选择器修改为hover伪类将得到以下内容：
.nav > .dropdown-megamenu:hover .dropdown-container > .dropdown-menu,
.nav > .dropdown-megamenu:hover > .dropdown-container {
display: block;
}
由于在触摸设备上无法进行悬停，因此上述选择器最好包装在媒体查询中。
@media (min-width: 768px) {
.nav > .dropdown-megamenu:hover .dropdown-container > .dropdown-menu,
.nav > .dropdown-megamenu:hover > .dropdown-container {
display: block;
}
}
Shopify：编辑超级菜单以在单击时打开/关闭，而不是在 hover 上？
[英]Shopify: Edit a mega-menu to open/close on click, not on hover?
Bootstrap 3 - 将菜单悬停在桌面上，但在最小化时单击打开（移动导航）
[英]Bootstrap 3 - Hover menu on desktop but open on click when minimized (mobile nav)
在悬停时出现Bootstrap Popover / Disappear而不是Click
[英]Make Bootstrap Popover Appear/Disappear on Hover instead of Click
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.