Bootstrap Dropdown with Hover

html

responsive-design

best-practices

accessibility-awareness

byNikita Barsukov·Jan 23, 2025

Unleash Bootstrap dropdowns hover capability with this concise JavaScript snippet. It targets .dropdown class, toggling the show class during hover events:

document.querySelectorAll('.dropdown').forEach(dropdown => {
  // Probably the only hovering you'll appreciate 😊
  dropdown.addEventListener('mouseenter', () => {
    dropdown.classList.add('show'); // Open sesame!
    dropdown.querySelector('.dropdown-menu').classList.add('show'); // Here comes the dropdown!
  });
  dropdown.addEventListener('mouseleave', () => {
    dropdown.classList.remove('show'); // Close sesame!
    dropdown.querySelector('.dropdown-menu').classList.remove('show'); // Hey dropdown, time to hide!
  });
});

This snippet is brought to you by the power of ES6 syntax! It's a native JavaScript solution, benched jQuery can take a rest here. Coding made simple with this quick drop-in that adds hover action to your dropdowns.

CSS: the Hover Master

If you lean more towards CSS, the following snippet employs it to manipulate hover states, unveiling the dropdown menu with style:

.dropdown:hover .dropdown-menu {
  display: block; // Dropdown menu, yer time to shine!
}

This snippet makes the dropdown menu visible on mouse hovering. Minimize menu closure by eliminating gaps between the dropdown link and the dropdown menu. Hovering changes the display property to "block", making the menu items accessible without an extra click.

Cross-Device functionality

Don't be foolhardy, sailor! Always ensure your solution is a one-size-fits-all by being responsive and compatible across different devices and browsers. Remember the usability on touch devices - they can't hover, so make sure the traditional click function still applies!

Accessibility Awareness

Keep a weather eye on your users! Hover-centric interactions can turn rogue for users relying on assistive technologies or keyboard navigation. Every user counts, so make sure your solution includes them.

Jazzing up UX with jQuery

jQuery has a treasure trove for enhancing user experience. Let's add show class to dropdowns on mouse enter:

$(document).ready(function(){
  // Dropdowns, showtime! 🎬
  $('.dropdown').hover(
    function() {
      // Are we there yet? Yes we are! 🚀
      $(this).addClass('show').attr('aria-expanded', "true");
      $(this).find('.dropdown-menu').addClass('show');
    }, function() {
      // And that's a wrap! 🎥
      $(this).removeClass('show').attr('aria-expanded', "false");
      $(this).find('.dropdown-menu').removeClass('show');
    }
  );
});

Let the mouseenter and mouseleave handle the heavy lifting. The attr keeps our accessibility buddies updated. Not forgetting stop(), staving off animation queuing for smoother sailing. For added flair, consider combining delay(), fadeIn(), and fadeOut() for a flashier dropdown display.

Smooth transitions and delays

Swift and smooth, that's how we like it! Employ a small delay to prevent sudden dropdown disappearance with mouse movement:

$('.dropdown').hover(
  function() {
    // Keep them waiting... just a little bit 😉
    $(this).find('.dropdown-menu').stop(true, true).delay(100).fadeIn();
  }, function() {
    // Slow and steady fade-out 
    $(this).find('.dropdown-menu').stop(true, true).delay(100).fadeOut();
  }
);

This snippet ushers in a 100ms pause before the menu fades in or out, subduing abrupt transitions. Test your code on different devices for unquestionable consistency.

Taming Bootstrap's click event

We've enhanced Bootstrap dropdown with hover but let's not ditch the click event just yet! Use jQuery's mouseenter to trigger dropdown, preserving Bootstrap's intent while upgrading functionality.