Submit your widget

jQuery Slide Fold Menu Transition In Effects

Created 5 years ago   Views 28705   downloads 6540    Author webdesigncrowd
jQuery Slide Fold Menu Transition In Effects
View DemoDownload 48.9 KB
70
Share |

animate  menu transition effect. Here we'll show a simple effect of making the menu links stack upwards. The second effect  is a Metro inspired menu that stacks upwards but uses random delays to make it look unique every time.

HTML Structure

The traditional menu is super simple with just a UL full of LI’s. The Metro style is a little more complex. My markup may be a bit messy because I use a UL within a LI within a UL. You can also determine if the cell takes up half or the full row.

<ul class="side-menu">
  <h2 class="title">Menu</h2>
  <li class="row">
    <ul>
      <li class="metro red half"><a href="#"><i class="fa fa-google"></i></a></li>
      <li class="metro light-blue"><a href="#"><i class="fa fa-twitter"></i></a></li>
    </ul>
  </li>
  <li class="row">
    <ul>
      <li class="metro blue half"><a href="#"><i class="fa fa-facebook"></i></a></li>
      <li class="metro green half"><a href="#"><i class="fa fa-android"></i></a></li>
    </ul>
  </li>
  <li class="row">
    <ul>
      <li class="metro pink half"><a href="#"><i class="fa fa-dribbble"></i></a></li>
      <li class="metro orange half"><a href="#"><i class="fa fa-github"></i></a></li>
    </ul>
  </li>
  <li class="row">
    <ul>
      <li class="metro light-blue full"><a href="#"><i class="fa fa-skype"></i></a></li>
    </ul>
  </li>
</ul>

Read more:http://www.webdesigncrowd.com/menu-transition-effects/