To make Bootstrap dropdown pop up when hover, it can be achieved by: 1. Use CSS control, displayed through the:hover pseudo-class control drop-down menu, suitable for lightweight projects, but may have compatibility issues; 2. Use JavaScript to manually trigger, call the toggle and hide methods of the Dropdown instance in mouseenter and mouseleave events to improve interactive control; 3. Use third-party plug-ins such as bootstrap-hover-dropdown or Mega Dropdown, suitable for projects with complex functions and high responsive requirements. Each method has its own advantages and disadvantages and needs to be chosen according to actual needs.

When building navigation bars using Bootstrap, many people want dropdowns to be triggered when the mouse is hovered rather than the default click method. This is more friendly to desktop experience, but Bootstrap does not support this method by default and requires additional settings.

The following are several ways to implement the Bootstrap navigation bar drop-down menu to expand when hover:

How to make Bootstrap dropdown pop up when hover?

The dropdown plug-in of Bootstrap is by clicking to switch the dropdown menu, but you can achieve the hover effect by modifying JavaScript behavior or using CSS.

The most common ways are:

• Use pure CSS control
• Manual triggering in conjunction with JS
• Using third-party plug-ins

Among them, the CSS method is simple and fast, suitable for lightweight projects; the JS method is more flexible and has better compatibility; and the plug-in solution is suitable for scenarios that require multi-function support.

Implementing hover with CSS Expand the drop-down menu

If you don't want to change too much code, try overriding the default behavior with CSS. This approach is suitable for most modern browsers, especially for static websites or scenarios where complex interactions are not required.

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

Note:

• Need to make sure that .dropdown-menu is not hidden when hover
• It may cause the mobile click to be invalid (because there is no click event)
• If you are using Bootstrap 5, the Popper.js and dropdown plugins are not loaded by default, and it needs to be manually introduced

Although this method is simple, it is easy to cause problems such as "the menu is still displayed after the mouse is moved out" or "menu flashing". It is recommended to combine JS to make some optimizations.

Use JavaScript to force the dropdown display when hover is triggered

If you want to support both hover and click without affecting the mobile terminal, you can use JS to control it.

 document.querySelectorAll('.navbar-nav .nav-link.dropdown-toggle').forEach(link => {
    link.addEventListener('mouseenter', function () {
        bootstrap.Dropdown.getOrCreateInstance(this).toggle();
    });

    link.addEventListener('mouseleave', function () {
        setTimeout(() => {
            if (!this.matches(':hover') && !this.nextElementSibling.matches(':hover')) {
                bootstrap.Dropdown.getOrCreateInstance(this).hide();
            }
        }, 100);
    });
});

advantage:

• More controllable, can be used with popper.js
• Supports hover click hybrid operation
• Good compatibility

shortcoming:

• Need to write some JS logic
• Mobile may need to handle additional click events

Third-party plug-in recommendations: bootstrap-hover-dropdown or megamenu plug-in

If you want to save trouble and need more functions (such as mega menu, multi-level menu, etc.), you can consider using plug-ins specially designed for this, such as:

• bootstrap-hover-dropdown
• Mega Dropdown by Creative Tim

These plug-ins have usually handled various boundary situations, including responsiveness, animation, delayed closure, etc., and are suitable for use in medium and large projects.

In general, it is not difficult to expand the Bootstrap drop-down menu when hovering. The key is to choose the appropriate method according to the project needs. If it is a small project or is only used for desktop display, the CSS solution is sufficient; if the interaction requirements are high, it is recommended to use JS to control or use plug-ins.

Basically, that's all. Don't look at the many steps, it can be done with one or two small scripts.

The above is the detailed content of Bootstrap navbar dropdown on hover instead of click. For more information, please follow other related articles on the PHP Chinese website!