Animated Dropdown

By Rafi

How do I use This?

A top bar navigation with a dropdown with subtle fade in/out animation.

HTML

<ul class="dropdown menu" data-dropdown-menu id="primary-menu">
  <li>
    <a href="#">Item 1</a>
    <ul class="menu">
      <li><a href="#">Item 1A</a></li>
      <li><a href="#">Item 1A</a></li>
      <li><a href="#">Item 1A</a></li>
      <li><a href="#">Item 1A</a></li>
    </ul>
  </li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
  <li><a href="#">Item 4</a></li>
</ul>

$('#primary-menu').on(
  'show.zf.dropdownmenu', function() {
    var dropdown = $(this).find('.is-dropdown-submenu');
    dropdown.css('display', 'none');
    dropdown.fadeIn('slow');
});
$('#primary-menu').on(
  'hide.zf.dropdownmenu', function() {
    var dropdown = $(this).find('.is-dropdown-submenu');
    dropdown.css('display', 'inherit');
    dropdown.fadeOut('slow');
});

Animated Dropdown

By Rafi

Dashboard Nav Card

Sticky Nav Shrink Hero

Overlay Navigation

Animated Dropdown

By Rafi

Similar Building Blocks

Dashboard Nav Card

Sticky Nav Shrink Hero

Overlay Navigation