How to make Twitter Bootstrap menu dropdown on hover rather than click?

on

 

To make a Twitter Bootstrap dropdown menu open on hover rather than on click, you need to use a combination of CSS and JavaScript. Here's how you can achieve this:

  1. HTML Structure: Create your dropdown menu using Bootstrap's dropdown component. You'll need to add the appropriate classes for the dropdown and the dropdown trigger.
html
<div class="dropdown">
  <a href="#" class="dropdown-toggle" id="hoverDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Hover Dropdown
  </a>
  <div class="dropdown-menu" aria-labelledby="hoverDropdown">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>
  1. CSS: Add CSS to modify the default behavior and display the dropdown when hovering over the trigger element.
css
/* Show dropdown on hover */
.dropdown:hover .dropdown-menu {
  display: block;
}
  1. JavaScript (Optional): By default, Bootstrap uses JavaScript to handle dropdowns. To make the hover effect work smoothly, you might need to prevent the default click behavior. You can do this by adding a custom JavaScript snippet:
javascript
$(document).ready(function() {
  // Prevent default click behavior on hover
  $('.dropdown-toggle').hover(function(e) {
    e.preventDefault();
    $(this).trigger('click');
  });
});

In this example, we're using jQuery to prevent the default click behavior on hover. The code triggers a click event when the hover event occurs on the dropdown trigger.

Remember to include the necessary Bootstrap and jQuery CSS and JavaScript files in your HTML document.

Here's a complete example:

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hover Dropdown</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.5.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.5.2/dist/js/bootstrap.bundle.min.js"></script>
  <style>
    /* Show dropdown on hover */
    .dropdown:hover .dropdown-menu {
      display: block;
    }
  </style>
  <script>
    $(document).ready(function() {
      // Prevent default click behavior on hover
      $('.dropdown-toggle').hover(function(e) {
        e.preventDefault();
        $(this).trigger('click');
      });
    });
  </script>
</head>
<body>
  <div class="container mt-5">
    <div class="dropdown">
      <a href="#" class="dropdown-toggle" id="hoverDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Hover Dropdown
      </a>
      <div class="dropdown-menu" aria-labelledby="hoverDropdown">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Something else here</a>
      </div>
    </div>
  </div>
</body>
</html>

Please note that Bootstrap and jQuery versions used in the example might be different from the time of your usage. Make sure to use the appropriate versions based on your requirements.

Comments

Post a Comment