Topic: Animated Dropdown on Hover does not Work
Expected behavior
i want an Animated dropdown in my Navbar on Hover.
Actual behavior
i added the following code in my custom CSS:
.dropdown:hover>.dropdown-menu {
display: block;
}
.dropdown>.dropdown-toggle:active {
pointer-events: none;
}
this works with hover but i lost the animated effect from the dropdown. Any idea what's wrong? Thank You
Resources (screenshots, code snippets etc.)
<!-- Dropdown -->
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
href="#"
id="navbarDropdownMenuLink"
role="button"
data-mdb-toggle="dropdown"
aria-expanded="false"
>
<i class="fas fa-users"></i> Dropdown
</a>
<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDropdownMenuLink">
<li>
<a class="dropdown-item" href="#">Action</a>
</li>
<li>
<a class="dropdown-item" href="#">Another action</a>
</li>
<li><hr class="dropdown-divider" /></li>
<li>
<a class="dropdown-item" href="#">Something else here</a>
</li>
</ul>
</li>
Hello, CSS may be unneccessary here - we can do it via JS.
https://mdbootstrap.com/snippets/standard/m-duszak/3337230#html-tab-view
It's all about creating two event listeners - for mouseenter and mouseleave.
const dropdownEl = document.querySelector('.dropdown-toggle');
const dropdownInstance = new mdb.Dropdown(dropdownEl);
dropdownEl.addEventListener('mouseenter', () => {
dropdownInstance.show();
})
dropdownEl.addEventListener('mouseleave', () => {
dropdownInstance.hide();
})
daencore pro premium priority commented 3 years ago
Thanks, Basically it works fine, but if you want to go into the dropdown menu it is closed again and you cant click on any link inside the Dropdown. Because you go down from the nav button. So you would also have to check whether the mouse is in the dropdown menu itself before the dropdown closes. Is there another query selector that checks this?
Michał Duszak staff commented 3 years ago
Yes, it's .dropdown-menu https://mdbootstrap.com/snippets/standard/m-duszak/3339604
daencore pro premium priority commented 3 years ago
Nice, Works perfectly. Thank You
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Pro
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 3.9.0
- Device: Desktop
- Browser: Chrome
- OS: Win 10
- Provided sample code: No
- Provided link: No