Press "Enter" to skip to content

[Animation] Bootstrap Multi-Level Responsive Dropdown Menu | Dropdown On Hover

Bootstrap-based multi-level dropdown navigation menu with cool animations. The dropdown on Hover is a jQuery plugin used to create Bootstrap multi-level scroll-triggered dropdown menus with CSS3 animations built on Animate CSS.

How to make use of it:

1. Load the required Animate.css and jQuery Dropdown On Hover plugin’s files in your Bootstrap web 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 listing like 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 customized CSS3 animations to the multi-level dropdown menu utilizing ‘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>

4. Adjust the transition duration and hover delay in milliseconds.

Dropdownhover.TRANSITION_DURATION = 300
Dropdownhover.DELAY = 150

Multilevel Dropdown Menu Plugin For Bootstrap, Bootstrap Dropdown Hover Github

Changelog:

2020-09-15

  • refactor: don’t close the menu, if you happen to swap between menu and sub-menu
  • lets you set the hover delay utilizing the data-dropdown-hover-delay attribute

See Demo And Download

Official Website(kybarg): Click Here

This superior jQuery/javascript plugin is developed by kybarg. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.