Bootstrap dropdown hover menu 60 фото

To create a menu dropdown on hover with fade effects, combine Bootstrap classes for structure with jQuery's fadeIn() and fadeOut() functions. Toggle 'show' class on hover, revealing dropdown-menu with fadeIn() and hiding it with fadeOut() when hovering ends.

Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They're made interactive with the included Bootstrap dropdown JavaScript plugin. They're toggled by clicking, not by hovering; this is an intentional design decision. Dropdowns are built on a third party library, Popper.

Usage. Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the .show class on the parent list item. The data-toggle=dropdown attribute is relied on for closing dropdown menus at an application level, so it's a good idea to always use it.

The .dropdown class indicates a dropdown menu. To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and the data-toggle=dropdown attribute.

Instead of using a border, we have used the box-shadow property to make the dropdown menu look like a card. We also use z-index to place the dropdown in front of other elements. The :hover selector is used to show the dropdown menu when the user moves the mouse over the dropdown button.