OK, so what I need is fairly straightforward.
I have set up a navbar with some dropdown menus in it (using class="dropdown-toggle" data-toggle="dropdown"), and it works fine.
The thing is it works "onClick", while I would prefer if it worked "onHover".
Is there any built-in way to do this?
This question is related to
javascript
jquery
html
css
twitter-bootstrap
This only hovers the navbar when you are not on a mobile device, because I find that hovering the navigation does not work well on mobile divices:
$( document ).ready(function() {
$( 'ul.nav li.dropdown' ).hover(function() {
// you could also use this condition: $( window ).width() >= 768
if ($('.navbar-toggle').css('display') === 'none'
&& false === ('ontouchstart' in document)) {
$( '.dropdown-toggle', this ).trigger( 'click' );
}
}, function() {
if ($('.navbar-toggle').css('display') === 'none'
&& false === ('ontouchstart' in document)) {
$( '.dropdown-toggle', this ).trigger( 'click' );
}
});
});
The solution I am proposing detects if its not touch device and that the navbar-toggle (hamburger menu) is not visible and makes the parent menu item revealing submenu on hover and and follow its link on click.
Also makes tne margin-top 0 because the gap between the navbar and the menu in some browser will not let you hover to the subitems
$(function(){_x000D_
function is_touch_device() {_x000D_
return 'ontouchstart' in window // works on most browsers _x000D_
|| navigator.maxTouchPoints; // works on IE10/11 and Surface_x000D_
};_x000D_
_x000D_
if(!is_touch_device() && $('.navbar-toggle:hidden')){_x000D_
$('.dropdown-menu', this).css('margin-top',0);_x000D_
$('.dropdown').hover(function(){ _x000D_
$('.dropdown-toggle', this).trigger('click').toggleClass("disabled"); _x000D_
}); _x000D_
}_x000D_
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>_x000D_
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>_x000D_
_x000D_
<ul id="nav" class="nav nav-pills clearfix right" role="tablist">_x000D_
<li><a href="#">menuA</a></li>_x000D_
<li><a href="#">menuB</a></li>_x000D_
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">menuC</a>_x000D_
<ul id="products-menu" class="dropdown-menu clearfix" role="menu">_x000D_
<li><a href="">A</a></li>_x000D_
<li><a href="">B</a></li>_x000D_
<li><a href="">C</a></li>_x000D_
<li><a href="">D</a></li>_x000D_
</ul>_x000D_
</li>_x000D_
<li><a href="#">menuD</a></li>_x000D_
<li><a href="#">menuE</a></li>_x000D_
</ul>$(function(){_x000D_
$("#nav .dropdown").hover(_x000D_
function() {_x000D_
$('#products-menu.dropdown-menu', this).stop( true, true ).fadeIn("fast");_x000D_
$(this).toggleClass('open');_x000D_
},_x000D_
function() {_x000D_
$('#products-menu.dropdown-menu', this).stop( true, true ).fadeOut("fast");_x000D_
$(this).toggleClass('open');_x000D_
});_x000D_
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>_x000D_
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>_x000D_
_x000D_
<ul id="nav" class="nav nav-pills clearfix right" role="tablist">_x000D_
<li><a href="#">menuA</a></li>_x000D_
<li><a href="#">menuB</a></li>_x000D_
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">menuC</a>_x000D_
<ul id="products-menu" class="dropdown-menu clearfix" role="menu">_x000D_
<li><a href="">A</a></li>_x000D_
<li><a href="">B</a></li>_x000D_
<li><a href="">C</a></li>_x000D_
<li><a href="">D</a></li>_x000D_
</ul>_x000D_
</li>_x000D_
<li><a href="#">menuD</a></li>_x000D_
<li><a href="#">menuE</a></li>_x000D_
</ul>Use the mouseover() function to trigger the click. In this way the previous click event will not harm. User can use both hover and click/touch. It will be mobile friendly.
$(".dropdown-toggle").mouseover(function(){
$(this).trigger('click');
})
I have published a proper plugin for the dropdown hover functionality, in which you can even define what happens when clicking on the dropdown-toggle element:
https://github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover
I had issues with all the previously existing solutions. The simple CSS ones are not using the .open class on the .dropdown, so there will be no feedback on the dropdown toggle element when the dropdown is visible.
The js ones are interfering with clicking on .dropdown-toggle, so the dropdown shows up on hover, then hides it when clicking on an opened dropdown, and moving out the mouse will trigger the dropdown to show up again. Some of the js solutions are braking iOS compatibility, some plugins are not working on modern desktop browsers which are supporting the touch events.
That's why I made the Bootstrap Dropdown Hover plugin which prevents all these issues by using only the standard Bootstrap javascript API, without any hack.
So you have this code:
<a class="dropdown-toggle" data-toggle="dropdown">Show menu</a>
<ul class="dropdown-menu" role="menu">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
Normally it works on click event, and you want it work on hover event. This is very simple, just use this javascript/jquery code:
$(document).ready(function () {
$('.dropdown-toggle').mouseover(function() {
$('.dropdown-menu').show();
})
$('.dropdown-toggle').mouseout(function() {
t = setTimeout(function() {
$('.dropdown-menu').hide();
}, 100);
$('.dropdown-menu').on('mouseenter', function() {
$('.dropdown-menu').show();
clearTimeout(t);
}).on('mouseleave', function() {
$('.dropdown-menu').hide();
})
})
})
This works very well and here is the explanation: we have a button, and a menu. When we hover the button we display the menu, and when we mouseout of the button we hide the menu after 100ms. If you wonder why i use that, is because you need time to drag the cursor from the button over the menu. When you are on the menu, the time is reset and you can stay there as many time as you want. When you exit the menu, we will hide the menu instantly without any timeout.
I've used this code in many projects, if you encounter any problem using it, feel free to ask me questions.
An easy way, using jQuery, is this:
$(document).ready(function(){
$('ul.nav li.dropdown').hover(function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(200);
}, function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(200);
});
});
$('.navbar .dropdown').hover(function() {
$(this).find('.dropdown-menu').first().stop(true, true).slideDown(150);
}, function() {
$(this).find('.dropdown-menu').first().stop(true, true).slideUp(105)
});
html
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
Dropdown Example <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</div>
jquery
$(document).ready( function() {
/* $(selector).hover( inFunction, outFunction ) */
$('.dropdown').hover(
function() {
$(this).find('ul').css({
"display": "block",
"margin-top": 0
});
},
function() {
$(this).find('ul').css({
"display": "none",
"margin-top": 0
});
}
);
});
This is what I use to make it dropdown on hover with some jQuery
$(document).ready(function () {
$('.navbar-default .navbar-nav > li.dropdown').hover(function () {
$('ul.dropdown-menu', this).stop(true, true).slideDown('fast');
$(this).addClass('open');
}, function () {
$('ul.dropdown-menu', this).stop(true, true).slideUp('fast');
$(this).removeClass('open');
});
});
You can use jQuery's hover function.
You just need to add the class open when the mouse enters and remove the class when the mouse leaves the dropdown.
Here's my code:
$(function(){
$('.dropdown').hover(function() {
$(this).addClass('open');
},
function() {
$(this).removeClass('open');
});
});
The best way of doing it is to just trigger bootstraps click event with a hover. This way, it should still remain touch device friendly
$('.dropdown').hover(function(){
$('.dropdown-toggle', this).trigger('click');
});
Hover over the nav items to see that they activate on hover. http://cameronspear.com/demos/twitter-bootstrap-hover-dropdown/#
This will help you make your own hover class for bootstrap:
CSS:
/* Hover dropdown */
.hover_drop_down.input-group-btn ul.dropdown-menu{margin-top: 0px;}/*To avoid unwanted close*/
.hover_drop_down.btn-group ul.dropdown-menu{margin-top:2px;}/*To avoid unwanted close*/
.hover_drop_down:hover ul.dropdown-menu{
display: block;
}
Margins are set to avoid unwanted close and they are optional.
HTML:
<div class="btn-group hover_drop_down">
<button type="button" class="btn btn-default" data-toggle="dropdown"></button>
<ul class="dropdown-menu" role="menu">
...
</ul>
</div>
Don't forget to remove the button attribute data-toggle="dropdown" if you want to remove onclick open, and this also will work when input is append with dropdown.
I try other solutions, i'm using bootstrap 3, but dropdown menu closes too quickly to move over it
supposed that you add class="dropdown" to li, i added a timeout
var hoverTimeout;
$('.dropdown').hover(function() {
clearTimeout(hoverTimeout);
$(this).addClass('open');
}, function() {
var $self = $(this);
hoverTimeout = setTimeout(function() {
$self.removeClass('open');
}, 150);
});
For CSS it goes crazy when you also click on it. This is the code that I'm using, it also don't change anything for mobile view.
$('.dropdown').mouseenter(function(){
if(!$('.navbar-toggle').is(':visible')) { // disable for mobile view
if(!$(this).hasClass('open')) { // Keeps it open when hover it again
$('.dropdown-toggle', this).trigger('click');
}
}
});
Triggering a click event with a hover has a small error. If mouse-in and then a click creates vice-versa effect. It opens when mouse-out and close when mouse-in. A better solution:
$('.dropdown').hover(function() {
if (!($(this).hasClass('open'))) {
$('.dropdown-toggle', this).trigger('click');
}
}, function() {
if ($(this).hasClass('open')) {
$('.dropdown-toggle', this).trigger('click');
}
});
Bootstrap drop-down Work on hover, and remain close on click by adding property display:block; in css and removing these attributes data-toggle="dropdown" role="button" from button tag
.dropdown:hover .dropdown-menu {_x000D_
display: block;_x000D_
}<!DOCTYPE html>_x000D_
<html>_x000D_
<head>_x000D_
<meta name="viewport" content="width=device-width, initial-scale=1">_x000D_
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>_x000D_
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>_x000D_
</head>_x000D_
<body>_x000D_
_x000D_
<div class="container"> _x000D_
<div class="dropdown">_x000D_
<button class="btn btn-primary dropdown-toggle">Dropdown Example_x000D_
<span class="caret"></span></button>_x000D_
<ul class="dropdown-menu">_x000D_
<li><a href="#">HTML</a></li>_x000D_
<li><a href="#">CSS</a></li>_x000D_
<li><a href="#">JavaScript</a></li>_x000D_
</ul>_x000D_
</div>_x000D_
</div>_x000D_
_x000D_
</body>_x000D_
</html>Try this using hover function with fadein fadeout animations
$('ul.nav li.dropdown').hover(function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});
In Twitter Bootstrap is not implemented but you can use the this plugin
Update 1:
Sames question here
Source: Stackoverflow.com