Bootstrap 4 show Dropdown menu on hover mouse

Bootstrap 4 show Dropdown menu on hover mouse

By default, Bootstrap 4 doesn’t provide to open the Dropdown menu on hover. So, Today we are going to learn Bootstrap 4 show Dropdown menu on hover mouse. The dropdown will open when we click on the menu link. So, Today we are going to see how to open the dropdown menu on mouse hover. We can open a dropdown menu on mouse hover using CSS and jQuery. We are going to see both ways with example.

Bootstrap 4 show Dropdown menu on hover mouse

First of all, We are going to see how to open the dropdown menu using CSS like below.

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

Now, We are going to see how to open a dropdown menu using jQuery when the mouse enters and out. It’s should work smoothly then CSS. Open dropdown when the mouse enters and close when mouse out. Let’s see by example.

function toggleDropdown (e) {
  const _d = $(e.target).closest('.dropdown'),
    _m = $('.dropdown-menu', _d);
  setTimeout(function(){
    const shouldOpen = e.type !== 'click' && _d.is(':hover');
    _m.toggleClass('show', shouldOpen);
    _d.toggleClass('show', shouldOpen);
    $('[data-toggle="dropdown"]', _d).attr('aria-expanded', shouldOpen);
  }, e.type === 'mouseleave' ? 300 : 0);
}

$('body')
  .on('mouseenter mouseleave','.dropdown',toggleDropdown)
  .on('click', '.dropdown-menu a', toggleDropdown);

You can get the mode detail about this from here.

See the Pen Bootstrap 4 show Dropdown menu example by Renish Khunt (@renishkhunt7) on CodePen.dark

If you face any issue after following the code please write the comment below. We are always ready for help.

Related Posts

  1. WordPress jQuery is Not Defined or undefined
  2. jQuery on Hover mouseenter and mouseleave events
  3. How to use jQuery noConflict mode in WordPress
  4. jQuery append element at first position on the lists

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Search Posts

Subscribe To Newsletter

Get Early Access To New Articles, Plugins, Discount Codes And Quickly Brief Updates about tips and tricks

Join 357 other subscribers

%d bloggers like this: