web-dev-qa-db-fra.com

Animation du menu déroulant Bootstrap 4

La façon native dont une liste déroulante se basera sur bootstrap (4.0) n’est pas animée. Comment puis-je le faire "glisser" ouvert comme le fait la barre de navigation lorsqu'elle est réduite?

Il est à noter que la liste déroulante se trouve dans la barre de navigation. Voir ci-dessous codeply; https://www.codeply.com/go/JKj5onR3ug

<nav class="navbar navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Never expand</a>
  <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarsExample01" aria-controls="navbarsExample01" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="navbar-collapse collapse" id="navbarsExample01" style="">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
        <div class="dropdown-menu" aria-labelledby="dropdown01">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>
jquerycssbootstrap-4navbardropdown
3
Michael Ruta

Le moyen le plus simple serait d'utiliser "Réduire" pour le basculer au lieu de "dérouler". Ensuite, vous avez juste besoin d'un peu de CSS pour vous assurer qu'il s'affiche lorsque l'animation collapsing est active ...

.dropdown-menu.collapsing {
    display:block;
}

Essayez-le sur Codeply

Notez également que position-relative est défini sur le dropdown-menu.

Une alternative consiste à utiliser l’une des techniques d’animation déroulante Bootstrap 3.x .

3
Zim

Voici comment j'ai créé une animation déroulante avec des CSS purs en utilisant transform: scale:

Style SCSS

.dropdown {
    .dropdown-menu {
        transition: all 0.5s;
        overflow: hidden;
        transform-Origin: top center;
        transform: scale(1,0);
        display: block;
    }
    &:hover {
        .dropdown-menu {
            transform: scale(1);
        }
    }
}

Voir la démo sur Codepen

0
Alex Jolig

Vous devez remplacer css pour la liste déroulante. Utilisez ce css.

.dropdown-menu {
    display: block;
}

.navbar-nav .dropdown-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s;
}

.navbar-nav .dropdown-menu.show {
    max-height: 500px;
}
0
Abhay Srivastav