Multilevel Dropdown Menu Plugin For Bootstrap - Dropdown On Hover

Multilevel Dropdown Menu Plugin For Bootstrap - Dropdown On Hover
File Size: 9.57 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Dropdown On Hover is a jQuery plugin used to create hover-triggered multi-level Bootstrap dropdown menus with fancy CSS3 animations based on Animate.css.

How to use it:

1. Load the required Animate.css and jQuery Dropdown On Hover plugin's files in your Bootstrap page.

<link rel="stylesheet" href="animate.min.css">
<link rel="stylesheet" href="bootstrap-dropdownhover.css">
<script src="js/bootstrap-dropdownhover.js"></script>

2. Create a multi-level dropdown menu from a nested html list as this:

<div class="dropdown dropdown-inline">
  <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">Dropdown <span class="caret"></span></a>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li class="dropdown">
      <a href="#">Another dropdown <span class="caret"></span></a>
      <ul class="dropdown-menu dropdownhover-right">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
        <li class="divider"></li>
        <li><a href="#">One more separated link</a></li>
      </ul>
    </li>
    <li class="dropdown">
      <a href="#">Another dropdown 2 <span class="caret"></span></a>
      <ul class="dropdown-menu dropdownhover-right">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Another action</a></li>
        <li class="dropdown">
          <a href="#">Another dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
        <li class="divider"></li>
        <li><a href="#">One more separated link</a></li>
      </ul>
    </li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
    <li class="divider"></li>
    <li><a href="#">One more separated link</a></li>
  </ul>
</div>

3. Apply custom CSS3 animations to the multi-level dropdown menu using 'data-animation' attribute:

<a href="#" class="btn btn-primary dropdown-toggle" 
   data-toggle="dropdown" 
   data-hover="dropdown" 
   data-animations="bounceInDown bounceInRight bounceInUp bounceInLeft">
   Dropdown <span class="caret"></span>
</a>

This awesome jQuery plugin is developed by kybarg. For more Advanced Usages, please check the demo page or visit the official website.