0

I've been trying to make a height transition in my dropdown menu made in Bootstrap 5 with hover, the transition is not working, any help on this?

html:

<li class="nav-item dropdown position-static me-lg-3">
        <a class="nav-link" role="button">Temas<button type="button" class="btn dropdown-toggle 
            dropdown-toggle-split p-0" data-bs-toggle="dropdown" aria-expanded="false">
        </button></a>
        
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
          <a class="dropdown-item" href="#">Separated link</a>
          <a class="dropdown-item" href="../default/">Default</a>
          <a class="dropdown-item" href="../united/">United</a>
          <a class="dropdown-item" href="../yeti/">Yeti</a>
          <a class="dropdown-item" href="../default/">Default</a>
          <a class="dropdown-item" href="../united/">United</a>
          <a class="dropdown-item" href="../yeti/">Yeti</a>
          <a class="dropdown-item" href="../default/">Default</a>
          <a class="dropdown-item" href="../united/">United</a>
          <a class="dropdown-item" href="../yeti/">Yeti</a>
          <a class="dropdown-item" href="../default/">Default</a>
          <a class="dropdown-item" href="../united/">United</a>
          <a class="dropdown-item" href="../yeti/">Yeti</a>
          <a class="dropdown-item" href="../default/">Default</a>
          <a class="dropdown-item" href="../united/">United</a>
          <a class="dropdown-item" href="../yeti/">Yeti</a>
        </div>
</li>

CSS

.dropdown .dropdown-menu {
    transform: scaleY(0);    
    transform-origin: top;
    transition: transform 0.26s ease;
 }
    
 .dropdown-menu.show {
      margin-top: 0vh;
      width: 40%;
      margin-left: 38vw;
 }
    
 .dropdown:hover .dropdown-menu {
      display: flex;
      flex-wrap: wrap;
      transform: scaleY(1)
 }
    
 .dropdown-item {
      width: 25% !important;
 }

And this is the Jquery function to make the hover work as a click on the bootstrap5 dropdown

$('.dropdown').on("mouseenter", () => {
    $('.dropdown > a > button').addClass('show')
    $('.dropdown > a > button').attr("aria-expanded","true");
    $('.dropdown > div').addClass('show')
    $('.dropdown > div').attr("data-bs-popper","none");
  })
  
  $('.dropdown').on("mouseleave", () => {
    $('.dropdown > a > button').removeClass('show')
    $('.dropdown > a > button').attr("aria-expanded","false");
    $('.dropdown > div').removeClass('show')
    $('.dropdown > div').removeAttr("data-bs-popper","none");
  })
});

I have already tried the answers to this question but none of them are working

ash
  • 1,065
  • 1
  • 5
  • 20
Chris
  • 322
  • 6
  • 19

1 Answers1

3

@media (min-width: 200px) {
  .animate {
    animation-duration: 0.3s;
    -webkit-animation-duration: 0.3s;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
  }
}

@keyframes slideIn {
  0% {
    transform: translateY(1rem);
    opacity: 0;
  }
  100% {
    transform: translateY(0rem);
    opacity: 1;
  }
  0% {
    transform: translateY(1rem);
    opacity: 0;
  }
}

@-webkit-keyframes slideIn {
  0% {
    -webkit-transform: transform;
    -webkit-opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    -webkit-opacity: 1;
  }
  0% {
    -webkit-transform: translateY(1rem);
    -webkit-opacity: 0;
  }
}

.slideIn {
  -webkit-animation-name: slideIn;
  animation-name: slideIn;
}


/* Other styles for the page not related to the animated dropdown */

body {
  background: #007bff;
  background: linear-gradient(to right, #0062e6, #33aeff);
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
  <link rel="stylesheet" href="app.css" />
</head>

<body>
  <nav class="navbar navbar-expand-md navbar-light bg-light">
    <div class="container">
      <a class="navbar-brand" href="#">Animated Dropdown</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Click Me!
              </a>
            <!-- Here's the magic. Add the .animate and .slideIn classes to your .dropdown-menu and you're all set! -->
            <div class="dropdown-menu dropdown-menu-end animate slideIn" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <div class="container text-center">
    <h1 class="mt-5 text-white fw-light">
      Animated Bootstrap Navbar Dropdowns
    </h1>
    <p class="lead text-white-50">
      An attractive yet subtle dropdown animation for dropdown menus loacated within a Bootstrap navbar
    </p>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>

</html>
Parham Abolghasemi
  • 150
  • 1
  • 7