CODEWITHSUNDEEP
htmlcssbootstrap-4
JMKelley
JMKelley

Reputation: 658

Bootstrap Collapse Animation on Internal Dropdowns

I have a dropdown within the Navbar collapse like below. I'm trying to apply the same dropdown/collapse animation on to that as well so it animates down instead of a sudden jump. The navbar-toggle button animates the dropdown perfectly fine, but the internal dropdown doesn't animate at all.

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
 <i class="feather icon-menu"></i>


    <div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
  <ul class="navbar-nav mr-auto">
    <li class="nav-item dropdown position-static">
      <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
           <i class="feather icon-menu"></i> Browse
         </a>
      <div class="dropdown-menu w-100" aria-labelledby="navbarDropdownMenuLink">
        <ul>
          {% for category in categories %}
          <li>
            <a href="{{ category.url }}" title="{{ category.prettify }} Discount Codes & Deals">{{ category.prettify }}</a>
          </li>
          {% endfor %}
        </ul>
      </div>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="https://www.vouchertoday.uk">
             <i class="feather icon-tag"></i>Stores
           </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="https://www.vouchertoday.uk">
             <i class="feather icon-tag"></i>Latest
           </a>
    </li>
  </ul>
</div>

A perfect example of this is http://jsfiddle.net/jonathankelley/4sa2vt1c/ - Click the dropdown internally.

Upvotes: 1

Views: 1925

Answers (1)

ReSedano
ReSedano

Reputation: 5060

You could change dropdown with collapse, then adding some CSS to see the "collapsing" during the animation. In addition with this, I added some CSS to the first and last child 'cause there was a sort of "jump" in the end of animation and I did not like it so much (caused by "dropdown" padding), but well, you can remove & change it as you want

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


/* You can change these rules as you want*/
.dropdown-menu{
  padding:0 !important;
}

.dropdown-menu .dropdown-item:first-child{
  margin-top:.5em;
}

.dropdown-menu .dropdown-item:last-child{
  margin-bottom:.5em;
}
/* You can change these rules as you want*/
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
    <div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="https://www.vouchertoday.uk">Coupons</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="//codeply.com">Codeply</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item dropdown position-static">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="collapse" data-target=".dropdown-menu" aria-haspopup="true" aria-expanded="false">
          <!-- ^^^^ here I change dropdown with collapse adding a data-target == exactly the same of button class="navbar-toggler" -->            
                Dropdown link
              </a>
              <div class="dropdown-menu w-100 collapse" aria-labelledby="navbarDropdownMenuLink">
                                          <!--- ^^^^^ I added this class here -->
                <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>
    <div class="mx-auto order-0">
        <a class="navbar-brand mx-auto" href="#">Navbar 2</a>
    </div>
    <div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <a class="nav-link" href="#">Right</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>

</nav>

Upvotes: 1

Related Questions