Rex
Reputation: 233
Make bootstrap mega menu open on hover instead of on click
I am using a bootstrap mega menu and I have it styled and working as I need, however I need it to open for desktop devices on hover (instead of on click). I thought I would be able to easily do this with just css, but I cannot get it to work.
Any suggestions? I am open to using jQuery or jscript, but I am not very fluid with these just yet.
Working 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;
}
Upvotes: 1
Views: 5819
Answers (2)
qazwsx000xswzaq
Reputation: 21
When one clicks on dropdown-toggle, class open is added to dropdown-megamenu.
.nav > .dropdown-megamenu.open .dropdown-container > .dropdown-menu,
.nav > .dropdown-megamenu.open > .dropdown-container {
display: block;
}
Adapting the above CSS selector to the hover pseudo-class will give the following:
.nav > .dropdown-megamenu:hover .dropdown-container > .dropdown-menu,
.nav > .dropdown-megamenu:hover > .dropdown-container {
display: block;
}
As hovering is not available on touch devices, the above selector is better wrapped in a media query.
@media (min-width: 768px) {
.nav > .dropdown-megamenu:hover .dropdown-container > .dropdown-menu,
.nav > .dropdown-megamenu:hover > .dropdown-container {
display: block;
}
}
Upvotes: 0
Xhynk
Reputation: 13840
You can just add a desktop only media query:
@media (min-width: 768px){
.navbar-nav .dropdown-megamenu:hover .dropdown-container {
display: block;
}
}
Here's a fiddle: https://jsfiddle.net/vqubh18j/
You could trim the selector down to dropdown:hover .dropdown-container if you wish.
Also note there is a 2px top margin on the dropdown that makes a tiny gap between the navbar and the dropdown, allowing slower mouse movers to have the menu disappear unintentionally:
.dropdown-container {
...
/* Should probably be removed or replaced with
margin: 0; border-top: 2px solid transparent; */
margin: 2px 0 0;
...
}
Upvotes: 2
Related Questions
- How to make Twitter Bootstrap menu dropdown on hover rather than click
- Activating bootstrap dropdown menu on hover
- Bootstrap: navbar: open on hover?
- change Bootstrap Mobile Menu to on hover not on click
- Make Bootstrap's YAMM open on hover
- Bootstrap sub-nav open on nav hover
- bootstrap menu show menu on hover instead of click
- keep menu open on hovering over a link
- Bootstrap clickable menu on hover
- How to make twitter bootstrap (for Wordpress!) menu dropdown on hover rather than click