Bootstrap Navbar Dropdown on Hover if not mobile
I am trying to make bootstrap dropdown from navbar appear on hover, but stop hover effect when minimized (mobile). This is what I mean, but when I add an if statement, the whole effect fails: HTML:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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 vaos" href="../index.html">VAOS</a>
</div>
<div id="navbar" class="collapse navbar-collapse navbar-right">
<ul class="nav navbar-nav">
<li class="active"><a class="trans" href="../index.html">Home</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">What is VAOS <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="options.html">VAOS & Other Options</a></li>
<li><a href="candidate.html">Am I a Candidate</a></li>
<li><a href="surgeon.html">Find a Surgeon</a></li>
<li><div class="ArrowUp1"></div></li>
</ul>
</li>
<li><a href="experience.html">Testimonials</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Resources <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="clinical-support.html">Clinical Support</a></li>
<li><a href="videos.html">Procedural Videos</a></li>
<li><a href="resources.html">Other Links & Resources</a></li>
<li><div class="ArrowUp2"></div></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
CSS:
@media (min-width: 768px) {
.navbar-nav .open ul {
display: none;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
color: #555;
background: none;
}
.navbar-default .navbar-nav > li:hover {
background: #e7e7e7;
}
.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus {
color: #969696;
background: none;
}
.navbar-nav > li:hover {
background: transparent !important;
}
.navbar-nav .hovernav:hover > .dropdown-menu {
display: block;
}
}
JavaScript:
'use strict';
$('ul.nav li.dropdown').hover(function() {
if(window.width > 767) {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
}
});
+3
source to share
2 answers
You can do this without any scripting language. Just try this.
@media screen and (min-width: 768px) {
.dropdown:hover>.dropdown-menu {
display: block;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <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 vaos" href="../index.html">VAOS</a>
</div>
<div id="navbar" class="collapse navbar-collapse navbar-right">
<ul class="nav navbar-nav">
<li class="active"><a class="trans" href="../index.html">Home</a>
</li>
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">What is VAOS <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="options.html">VAOS & Other Options</a>
</li>
<li><a href="candidate.html">Am I a Candidate</a>
</li>
<li><a href="surgeon.html">Find a Surgeon</a>
</li>
<li>
<div class="ArrowUp1"></div>
</li>
</ul>
</li>
<li><a href="experience.html">Testimonials</a>
</li>
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Resources <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="clinical-support.html">Clinical Support</a>
</li>
<li><a href="videos.html">Procedural Videos</a>
</li>
<li><a href="resources.html">Other Links & Resources</a>
</li>
<li>
<div class="ArrowUp2"></div>
</li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
It's sleek and comfortable. +1 if it helps.
+5
source to share