DropdownAnimate

Implement the animations provided by Animate.css into Bootstrap's


Keywords
Bootstrap, Animate.css, Jquery
License
MIT
Install
bower install DropdownAnimate

Documentation

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>