it-swarm.com.de

Bootstrap für animiertes Dropdown-Menü 4

Die native Methode, die ein Dropdown in Bootstrap (4.0) erstellt, wird nicht animiert. Wie kann ich es "schieben" lassen wie die Navbar, wenn es zusammengeklappt ist?

Es ist erwähnenswert, dass sich das Dropdown-Menü innerhalb der Navigationsleiste befindet. Siehe unten 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>
3
Michael Ruta

Der einfachste Weg wäre die Verwendung von "collapse" anstelle von "dropdown". Dann brauchen Sie nur ein wenig CSS, um sicherzustellen, dass es angezeigt wird, wenn die collapsing-Animation aktiv ist ...

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

Versuchen Sie es mit Codeply

Beachten Sie auch, dass position-relative auf dropdown-menu eingestellt ist.


Alternativ können Sie eine der Dropdown-Animationstechniken Bootstrap 3.x verwenden .

3
Zim

So habe ich eine Dropdown-Animation mit pure css mit transform: scale erstellt:

SCSS-Stil

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

Demo überprüfen auf Codepen

0
Alex Jolig

Sie müssen css für das Dropdown überschreiben. Verwenden Sie diese 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