Introduction – An explanation of easing

The menu has such a smooth animation because of a thing called “easing”.

“The term easing refers to gradual acceleration or deceleration during an animation, which helps your animations appear more realistic. Easing creates a more natural appearance of acceleration or deceleration by gradually adjusting the rate of change.”

The Menu Structure

This menu iss designed for the Top level. It doesn't support sub navigation. If anyone want Sub Navigation then simply choose any other add-on from this marketplace. This might be not for them.

Here is the basic structure.

  1.     <ul>  
  2.         <li class="green">  
  3.             <p><a href="#">Home</a></p>  
  4.             <p class="subtext">The front page</p>  
  5.         </li>  
  6.         <li class="yellow">  
  7.             <p><a href="#">About</a></p>  
  8.             <p class="subtext">More info</p>  
  9.         </li>  
  10.         <li class="red">  
  11.             <p><a href="#">Contact</a></p>  
  12.             <p class="subtext">Get in touch</p>  
  13.         </li>  
  14.         <li class="blue">  
  15.             <p><a href="#">Submit</a></p>  
  16.             <p class="subtext">Send us your stuff!</p>  
  17.         </li>  
  18.         <li class="custom">  
  19.             <p><a href="#">Terms</a></p>  
  20.             <p class="subtext">Legal things</p>  
  21.         </li>  
  22.     </ul> 


Menu items have a class assigned to it that will designate the color of the block. Within each menu block there is a description & icon that will be hidden by default. It will show when you hover over the menu item. The "custom" class stands for user defined gradiant. User have the ability to choose gradiant color while adding menu item. It can also choose font color for each menu item.

Style with CSS

There are some pre defined menu classes available. Also the custom class lets you add your own gradiant.

Animate with jQuery

All of our jQuery code will go into a file called “animated-menu.js”. The file is under /packages/ronyd_animated_nav/blocks/animated_nav/js/ directory.

My current block use the easeOutBounce effect. Though there are several other easing effects available in marketplace which is also good to use.

Here is the list:

linear, swing, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint, easeOutQuint, easeInOutQuint, easeInExpo, easeOutExpo, easeInOutExpo, easeInSine, easeOutSine, easeInOutSine, easeInCirc, easeOutCirc, easeInOutCirc, easeInElastic, easeOutElastic, easeInOutElastic, easeInBack, easeOutBack, easeInOutBack, easeInBounce, easeOutBounce, easeInOutBounce.

Here is the url to check the easing effects in leve.

You can use any of these effects instead of easeOutBounce. Just open the“animated-menu.js” file and find the word easeOutBounce & replace it with any of the one effect listed above. You have to change the same in both occurance in that js.

Note: Make it sure to have a backup before doing any change. Also if you are not familier with js, just leave it as it is there. Don't try to change anything.

  1. $(document).ready(function(){  
  3.     //When mouse rolls over  
  4.     $("li").mouseover(function(){  
  5.         $(this).stop().animate({height:'150px'},{queue:false, duration:600, easing: 'easeOutBounce'})  
  6.     });  
  8.     //When mouse is removed  
  9.     $("li").mouseout(function(){  
  10.         $(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})  
  11.     });  
  12. });