Animated Dropdown on Hover does not Work


Topic: Animated Dropdown on Hover does not Work

daencore priority asked 10 months ago

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>

Michał Duszak staff answered 10 months ago

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 priority commented 10 months 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 10 months ago

Yes, it's .dropdown-menu https://mdbootstrap.com/snippets/standard/m-duszak/3339604


daencore priority commented 10 months ago

Nice, Works perfectly. Thank You


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue
  • User: Priority
  • 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