Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

how to make bootstrap 3 dropdown on hover and click? (using in nav, not navbar)

Tags:

css

twitter-bootstrap

I'm using bootstrap 3 for desktop, and only using nav, rather than navbar.
How to make a dropdown on hover and click?

<ul id="nav" class="nav nav-pills clearfix right" role="tablist">
    <li><a href="#">menuA</a></li>
    <li><a href="#">menuB</a></li>
    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">menuC</a>
        <ul id="products-menu" class="dropdown-menu clearfix" role="menu">
            <li><a href="">A</a></li>
            <li><a href="">B</a></li>
            <li><a href="">C</a></li>
            <li><a href="">D</a></li>
        </ul>
    </li>
    <li><a href="#">menuD</a></li>
    <li><a href="#">menuE</a></li>
</ul>
like image 344
huageorg Avatar asked Jan 19 '17 01:01

huageorg

People also ask

How do you open Bootstrap dropdown menu on hover rather than click?

Answer: Use the jQuery hover() method By default, to open or display the dropdown menu in Bootstrap you have to click on the trigger element. However, if you want to show the dropdown on mouseover instead of click you can do it with little customization using the CSS and jQuery.

How do you toggle a hover dropdown?

Example Explained. Use any element to open the dropdown menu, e.g. a <button>, <a> or <p> element. Use a container element (like <div>) to create the dropdown menu and add the dropdown links inside it. Wrap a <div> element around the button and the <div> to position the dropdown menu correctly with CSS.

How do you toggle a dropdown in Bootstrap?

Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They're made interactive with the included Bootstrap dropdown JavaScript plugin. They're toggled by clicking, not by hovering; this is an intentional design decision.

Why dropdown is not working in bootstrap4?

Solution : The dropdown should be toggled via data attributes or using javascript. In the above program, we have forgotten to add a data attribute so the dropdown is not working. So add data-bs-toggle="dropdown" to toggle the dropdown.

How to open bootstrap dropdown menu on hover rather than click?

How to open Bootstrap dropdown menu on hover rather than click. Answer: Use the jQuery hover() method. By default, to open or display the dropdown menu in Bootstrap you have to click on the trigger element.

How to create simple hover navbar using bootstrap?

Steps to create simple hover navbar It is better to create hover effect only for desktop screens. Use media query @media all and (min-width: 992px) { // CSScode } Hide dropdown menu by adding display:none. Add pseudo-class :hoverto nav-item and add class display:block Note: bootstrap has margin-topon dropdown-menuelements.

How do I add a button to The navbar in Bootstrap?

To add buttons inside the navbar, add the .navbar-btn class on a Bootstrap button: To add form elements inside the navbar, add the .navbar-form class to a form element and add an input (s). Note that we have added a .form-group class to the div container holding the input.

How to display dropdown menu on mouse hover using jQuery?

The short answer is: use the jQuery hover () with the addClass () to display the dropdown menu on mouse hover. You can also use the jQuery removeClass () to hide the menu on mouse out.

3 Answers

With this simple CSS.

.dropdown:hover .dropdown-menu {
  display: block;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<ul id="nav" class="nav nav-pills clearfix right" role="tablist">
    <li><a href="#">menuA</a></li>
    <li><a href="#">menuB</a></li>
    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">menuC</a>
        <ul id="products-menu" class="dropdown-menu clearfix" role="menu">
            <li><a href="">A</a></li>
            <li><a href="">B</a></li>
            <li><a href="">C</a></li>
            <li><a href="">D</a></li>
        </ul>
    </li>
    <li><a href="#">menuD</a></li>
    <li><a href="#">menuE</a></li>
</ul>
like image 150
Michael Coker Avatar answered Oct 12 '22 11:10

Michael Coker

Use this script, since you are using jquery for bootstrap anyway. Also give additional classes (preferably ids) to jquery selector so it doesn't affect other dropdowns in your page .

$(function(){
  $("#nav .dropdown").hover(
    function() {
      $('#products-menu.dropdown-menu', this).stop( true, true ).fadeIn("fast");
      $(this).toggleClass('open');
    },
    function() {
      $('#products-menu.dropdown-menu', this).stop( true, true ).fadeOut("fast");
      $(this).toggleClass('open');
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<ul id="nav" class="nav nav-pills clearfix right" role="tablist">
    <li><a href="#">menuA</a></li>
    <li><a href="#">menuB</a></li>
    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">menuC</a>
        <ul id="products-menu" class="dropdown-menu clearfix" role="menu">
            <li><a href="">A</a></li>
            <li><a href="">B</a></li>
            <li><a href="">C</a></li>
            <li><a href="">D</a></li>
        </ul>
    </li>
    <li><a href="#">menuD</a></li>
    <li><a href="#">menuE</a></li>
</ul>
like image 43
ab29007 Avatar answered Oct 12 '22 10:10

ab29007

Above solutions are not mobile friendly so here is the solution I am proposing

Detect if its not touch device and that the navbar-toggle (hamburger menu) is not visible and make the menu item hoverable

Also made tne margin-top 0 because the gap between the navbar and the menu in some browser will not let you hover to the subitems

As a bonus you can make the menu parent link clickable by uncommenting the commented line

$(function(){
    function is_touch_device() {
        return 'ontouchstart' in window        // works on most browsers 
        || navigator.maxTouchPoints;       // works on IE10/11 and Surface
    };

    if(!is_touch_device() && $('.navbar-toggle:hidden')){
      $('.dropdown-menu', this).css('margin-top',0);
      $('.dropdown').hover(function(){ 
          $('.dropdown-toggle', this).trigger('click');
          //uncomment below to make the parent item clickable
          //$('.dropdown-toggle', this).toggleClass("disabled"); 
      });			
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<ul id="nav" class="nav nav-pills clearfix right" role="tablist">
    <li><a href="#">menuA</a></li>
    <li><a href="#">menuB</a></li>
    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">menuC</a>
        <ul id="products-menu" class="dropdown-menu clearfix" role="menu">
            <li><a href="">A</a></li>
            <li><a href="">B</a></li>
            <li><a href="">C</a></li>
            <li><a href="">D</a></li>
        </ul>
    </li>
    <li><a href="#">menuD</a></li>
    <li><a href="#">menuE</a></li>
</ul>

$(function(){
  $("#nav .dropdown").hover(
    function() {
      $('#products-menu.dropdown-menu', this).stop( true, true ).fadeIn("fast");
      $(this).toggleClass('open');
    },
    function() {
      $('#products-menu.dropdown-menu', this).stop( true, true ).fadeOut("fast");
      $(this).toggleClass('open');
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<ul id="nav" class="nav nav-pills clearfix right" role="tablist">
    <li><a href="#">menuA</a></li>
    <li><a href="#">menuB</a></li>
    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">menuC</a>
        <ul id="products-menu" class="dropdown-menu clearfix" role="menu">
            <li><a href="">A</a></li>
            <li><a href="">B</a></li>
            <li><a href="">C</a></li>
            <li><a href="">D</a></li>
        </ul>
    </li>
    <li><a href="#">menuD</a></li>
    <li><a href="#">menuE</a></li>
</ul>
like image 38
GiorgosK Avatar answered Oct 12 '22 10:10

GiorgosK
Sign in to Comment

Related questions

<th> for a column instead of row?
FontAwesome not available as a font-family?
Vertically Center Responsive Image
CSS Images In another Folder [duplicate]
How to highlight a day which has an event in FullCalendar.js?
Issue with negative margin value in Firefox
Bootstrap 3 - Bottom align column within row
Pseudo-element not clickable
Make background image responsive
Disable all page-zooming in IE11 on Windows8-Arm
Autofocus With Cursor On End Of Textbox
nginx custom error page 502 with css and image files
Chartist.js remove labels?
Title with lines filling remaining space on both sides
Is it possible to create a gradient border on a CIRCLE with css3? [duplicate]
How to make SVG larger on hover?
Remove the top margin of header in bootstrap
CSS Selector Clarification: |= vs ^= [duplicate]
Apply CSS to active router link [Angular 2]
How to play an animation on hover and pause when hover is not active

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!