文章/答案/技术大牛

发布

社区首页 >问答首页 >下拉菜单转换引导带5

问下拉菜单转换引导带5
EN

Stack Overflow用户

提问于 2022-04-15 03:33:07

回答 1查看 1.5K关注 0票数 0

我一直在尝试在我的下拉式菜单中的高度过渡，在悬停5中，过渡不起作用，对此有帮助吗？

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;
 }

这是Jquery函数，它可以使悬停作为单击bootstrap5下拉列表的方式工作。

$('.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");
  })
});

我已经试过这个question的答案了，但是没有一个有效

css

javascript

html

jquery

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-04-15 03:50:45

@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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/71879785

复制

相似问题

问下拉菜单转换引导带5
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问下拉菜单转换引导带5EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问下拉菜单转换引导带5
EN