DropdownAnimate.js
The main idea is to implement the animations provided by Animate.css into Bootstrap's dropdown menu.
Installation
To install via Bower, simply do the following:
$ bower install DropdownAnimate --save
Basic Usage
Bootstrap's dropdown menu have two animations:
- Fade In
- Fade Out
add the following class to the menu:
class="dropdown-toggle"
data-toggle-animate="dropdown-animatecss"
and combined with these properties different animations can be apply:
- animated-in=""
- animated-out=""
Note: To change the behaviour after click on a menu item add noclose in the parent tag.
Example
<ul class="nav navbar-nav navbar-right">
<li class="dropdown" noclose>
<a id="loginMenuAnimated" href="#" class="dropdown-toggle" data-toggle-animate="dropdown-animatecss"
role="button" animated-in="fadeIn animated" animated-out="fadeOut animated" aria-haspopup="true"
aria-expanded="false">Login<span class="caret"></span></a>
<ul class="dropdown-menu"><li>File</li> </ul>
</li>
</ul>