How can I make twitter bootstrap's menu dropdown be on hover instead of a click?
1
- You can simple do this using pure css, stackoverflow.com/a/22365311/861607Sabri Aziri– Sabri Aziri2014-03-12 22:46:33 +00:00Commented Mar 12, 2014 at 22:46
Add a comment |
5 Answers
1.Hide dropdown-menu on mouseover.
$(document).ready(function() { $('.nav li.dropdown').hover(function() { $(this).addClass('open'); }, function() { $(this).removeClass('open'); }); }); 2.Hide dropdown-menu on click.
$(document).ready(function() { $('.nav li.dropdown').hover(function() { $(this).addClass('open'); }); }); 
1 Comment
d-_-b
Also add
$('.nav li.dropdown').removeClass('open'); as the first line in the 2nd (closing) function, so that if you have multiple dropdowns it hides the others that may be open.heres a function I'm using to get the navbar dropdowns to slide down on hover instead of just popping in
$('.navbar .dropdown').hover(function() { $(this).find('.dropdown-menu').first().stop(true, true).delay(250).slideDown(); }, function() { $(this).find('.dropdown-menu').first().stop(true, true).delay(100).slideUp() }); 
Comments
While How to make twitter bootstrap menu dropdown on hover rather than click has been upvoted a lot, with the newer versions of Bootstrap, no need to hack at it.
http://cameronspear.com/blog/twitter-bootstrap-dropdown-on-hover-plugin/ is a replacement for the existing dropdown.js, and lets you enable on hover. No CSS modifications required.
Comments
You can simply do this by using only css. In case of button dropdown.
<div class="btn-group btn-hover-group"> <a href="#" id="selected" class="btn btn-default editor-submit">Action 1</a> <a href="#" class="btn btn-default dropdown-toggle"></a> <ul class="dropdown-menu pull-right"> <li><a href="#" id="all" class="editor-submit">Action 2</a></li> <li><a href="#" id="matching" class="editor-submit">Action 3</a></li> </ul> </div> Removed data-toggle="dropdown" from <a href="#" class="btn btn-default dropdown-toggle"></a>
.btn-hover-group > a:hover ~ ul{ display:block; } .btn-hover-group > .dropdown-menu:hover{ display:block; } I hope this will suffice your purpose.
Comments
You could use a bootstrap 4 like this..
<div class="dropdown"> <button class="dropbtn">Dropdown</button> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> then define the class property value following..it should work
.dropbtn { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f1f1f1; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown:hover .dropdown-content {display: block;} 