CSS animated sub menus

by velo_ninja

HTML

<link rel="stylesheet" href="https://vadikom.github.io/smartmenus/src/css/sm-core-css.css">
<link rel="stylesheet" href="https://vadikom.github.io/smartmenus/src/css/sm-clean/sm-clean.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://vadikom.github.io/smartmenus/src/jquery.smartmenus.js"></script>
<nav role="navigation">
  <!-- Sample menu definition -->
  <ul id="main-menu" class="sm sm-clean">
    <li><a href="http://www.smartmenus.org/">Home</a></li>
    <li><a href="#">About</a>
      <ul>
        <li><a href="http://www.smartmenus.org/about/introduction-to-smartmenus-jquery/">Introduction to SmartMenus jQuery</a></li>
        <li><a href="http://www.smartmenus.org/about/themes/">Demos + themes</a></li>
        <li><a href="http://vadikom.com/about/#vasil-dinkov">The author</a></li>
        <li><a href="http://www.smartmenus.org/about/vadikom/">The company</a>
          <ul>
            <li><a href="http://vadikom.com/about/">About Vadikom</a></li>
            <li><a href="http://vadikom.com/projects/">Projects</a></li>
            <li><a href="http://vadikom.com/services/">Services</a></li>
            <li><a href="http://www.smartmenus.org/about/vadikom/privacy-policy/">Privacy policy</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="http://www.smartmenus.org/download/">Download</a></li>
    <li><a href="http://www.smartmenus.org/support/">Support</a>
      <ul>
        <li><a href="http://www.smartmenus.org/support/premium-support/">Premium support</a></li>
        <li><a href="http://www.smartmenus.org/support/forums/">Forums</a></li>
      </ul>
    </li>
    <li><a href="http://www.smartmenus.org/docs/">Docs</a></li>
    <li><a href="#">Sub test</a>
      <ul>
        <li><a href="#">Dummy item</a></li>
        <li><a href="#">Dummy item</a></li>
        <li><a href="#" class="disabled">Disabled menu item</a></li>
        <li><a href="#">Dummy item</a></li>
        <li><a...

CSS

/* apply the animations just in desktop view */

@media (min-width:300px) {
  /* prevent text rendering degrade during animation in Mac browsers */
  #main-menu {
    -webkit-font-smoothing: subpixel-antialiased;
  }
  /* show animation */
  #main-menu ul.show-animation {
    -webkit-animation: show-animation 0.2s;
    animation: show-animation 0.2s;
  }
  @-webkit-keyframes show-animation {
    0% {
      -webkit-transform: scale3d(0, 0, 1);
      opacity: 0;
    }
    60% {
      -webkit-transform: scale3d(1.05, 1.05, 1);
    }
    100% {
      -webkit-transform: scale3d(1, 1, 1);
      opacity: 1;
    }
  }
  @keyframes show-animation {
    0% {
      transform: scale3d(0, 0, 1);
      opacity: 0;
    }
    60% {
      transform: scale3d(1.05, 1.05, 1);
    }
    100% {
      transform: scale3d(1, 1, 1);
      opacity: 1;
    }
  }
  /* hide animation */
  #main-menu ul.hide-animation {
    -webkit-animation: hide-animation 0.2s;
    animation: hide-animation 0.2s;
  }
  @-webkit-keyframes hide-animation {
    0% {
      -webkit-transform: scale3d(1, 1, 1);
      opacity: 1;
    }
    100% {
      -webkit-transform: scale3d(0, 0, 1);
      opacity: 0;
    }
  }
  @keyframes hide-animation {
    0% {
      transform: scale3d(1, 1, 1);
      opacity: 1;
    }
    100% {
      transform: scale3d(0, 0, 1);
      opacity: 0;
    }
  }
}


/* IGNORE: Unrelated generic demo styles */

body {
  margin: 8px;
  background: #fff;
  color: #aaa;
  font: 16px/1.5em 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.demo-text {
  margin: 3em 22px;
}

.demo-text p {
  margin-bottom: 1em;
}

.demo-text a {
  color: #892443;
}

JavaScript

// SmartMenus init
$(function() {
  $('#main-menu').smartmenus({
    mainMenuSubOffsetX: -1,
    mainMenuSubOffsetY: 4,
    subMenusSubOffsetX: 6,
    subMenusSubOffsetY: -6
  });
});

// SmartMenus CSS animated sub menus - toggle animation classes on sub menus show/hide
$(function() {
  $('#main-menu').bind({
    'show.smapi': function(e, menu) {
      $(menu).removeClass('hide-animation').addClass('show-animation');
    },
    'hide.smapi': function(e, menu) {
      $(menu).removeClass('show-animation').addClass('hide-animation');
    }
  }).on('animationend webkitAnimationEnd oanimationend MSAnimationEnd', 'ul', function(e) {
    $(this).removeClass('show-animation hide-animation');
    e.stopPropagation();
  });
});