Animated Dropdown on Hover does not Work

Topic: Animated Dropdown on Hover does not Work

daencore priority asked 3 years 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>

Add comment

Michał Duszak staff answered 3 years ago

1 0 Best answer

Please insert min. 20 characters.

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 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 priority commented 3 years ago

Nice, Works perfectly. Thank You

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

ForumUser: 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

daencore

45Support score
8Questions 1Answers 3Snippets