Open In App

How to Make Menu Dropdown on Hover using Bootstrap ?

Improve
Improve
Like Article
Like
Save
Share
Report

To make a Bootstrap menu dropdown show on hover rather than click, you need to modify the default behaviour of Bootstrap’s dropdown component. This can be done by using CSS to display the dropdown menu when the user hovers over the dropdown trigger element, instead of using JavaScript to toggle the dropdown on click. You can add the dropdown class to the parent container and the dropdown-menu class to the dropdown menu itself to make it recognizable as a dropdown by Bootstrap. Optionally, you can disable the default click behaviour of the dropdown trigger element by removing the data-toggle=”dropdown” and aria-has popup=”true” attributes, although it’s recommended to include the default click behaviour as a fallback for mobile users.

Syntax:

.dropdown:hover .dropdown-menu {
    display: block;
}

Approach 1:

Step 1: Include the Bootstrap CSS and JavaScript files in your HTML document.

<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css” rel=”stylesheet” integrity=”sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC” crossorigin=”anonymous”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js” integrity=”sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM” crossorigin=”anonymous”></script>

Step 2: Add a custom CSS rule to enable hover on the dropdown menu.

.dropdown:hover .dropdown-menu {
      display: block;
}

Step 3: Replace the default Bootstrap JavaScript code for dropdowns with a custom script that triggers the dropdown on hover.

$(document).ready(function() {
      $('.dropdown').hover(function() {
        $(this).addClass('show');
        $(this).find('.dropdown-menu').addClass('show');
      }, function() {
        $(this).removeClass('show');
        $(this).find('.dropdown-menu').removeClass('show');
      });
});

The above code uses jQuery to add an event listener for hover on the .dropdown element. When the user hovers over the element, the script finds the .dropdown-menu element inside it and shows it with a fade-in effect. When the user moves the mouse away from the element, the script hides the menu with a fade-out effect.

Example: This code uses jQuery to add event listeners to the .dropdown elements, and manipulates the CSS classes of the relevant elements to achieve the hover effect.

HTML




<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <link href=
        rel="stylesheet"
        integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
        crossorigin="anonymous">
    <script src=
        integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>
  
    <style>
        .dropdown:hover .dropdown-menu {
            display: block;
        }
  
        .dropdown {
            margin-left: 40rem;
            margin-right: 40rem;
  
        }
  
        .name {
            text-align: center;
            color: green;
        }
    </style>
    <title>Document</title>
</head>
  
<body>
    <h1 class="name">GeeksforGeeks</h1>
    <div class="dropdown">
        <a class="btn btn-secondary dropdown-toggle" 
             href="#"
             role="button" id="dropdownMenuLink"
             data-bs-toggle="dropdown" 
             aria-expanded="false">
            Dropdown link
        </a
  
        <ul class="dropdown-menu" 
            aria-labelledby="dropdownMenuLink">
            <li><a class="dropdown-item" href="#">
                 Action
                </a>
            </li>
            <li><a class="dropdown-item" href="#">
                 Another action
                </a>
            </li>
            <li><a class="dropdown-item" href="#">
                 Something else here
               </a>
           </li>
        </ul>
    </div>
  
    <script>
        $(document).ready(function () {
            $('.dropdown').hover(function () {
                $(this).addClass('show');
                $(this).find('.dropdown-menu').addClass('show');
            }, function () {
                $(this).removeClass('show');
                $(this).find('.dropdown-menu').removeClass('show');
            });
        });
    </script>
</body>
  
</html>


Output:

 

Approach 2: Follow step 1 and step 2. Change step 3 to achieve the same output.

Step 3: Replace the default Bootstrap JavaScript code for dropdowns with a custom script that triggers the dropdown on hover.

$(document).ready(function(){
      $('.dropdown').hover(function(){
        $(this).find('.dropdown-menu')
        .stop(true, true).delay(100).fadeIn(200);
      }, function(){
        $(this).find('.dropdown-menu')
        .stop(true, true).delay(100).fadeOut(200);
      });
});

Example: This code uses jQuery to create a hover effect on dropdown menus in a Bootstrap menu. This code creates a smooth and elegant hover effect on dropdown menus in a Bootstrap menu, making it more user-friendly and engaging.

HTML




<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href=
        rel="stylesheet"
        integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
        crossorigin="anonymous">
    <script src=
        integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>
  
    <style>
        .dropdown:hover .dropdown-menu {
            display: block;
        }
  
        .dropdown {
            margin-left: 40rem;
            margin-right: 40rem;
  
        }
  
        .btn {
            background-color: green;
        }
  
        .name {
            text-align: center;
            color: green;
        }
    </style>
    <title>Document</title>
</head>
  
<body>
    <h1 class="name">GeeksforGeeks</h1>
    <div class="dropdown">
        <a class="btn btn-secondary dropdown-toggle" href="#" 
            role="button" 
            id="dropdownMenuLink"
            data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown link
        </a>
  
        <ul class="dropdown-menu" 
                aria-labelledby="dropdownMenuLink">
            <li><a class="dropdown-item" href="#">
                Action
               </a>
            </li>
            <li><a class="dropdown-item" href="#">
                Another action
                </a>
            </li>
            <li><a class="dropdown-item" href="#">
                Something else here
                </a>
            </li>
        </ul>
    </div>
  
    <script>
        $(document).ready(function () {
            $('.dropdown').hover(function () {
                $(this).find('.dropdown-menu')
                   .stop(true, true).delay(100).fadeIn(200);
            }, function () {
                $(this).find('.dropdown-menu')
                  .stop(true, true).delay(100).fadeOut(200);
            });
        });
    </script>
</body>
  
</html>


Output:

 



Last Updated : 06 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads