jQuery for Designers Beginner's Guide

Time for action – incorporating custom animation

Follow these steps to incorporate custom animations to your menu:

1. Fading the menu in means that the menu opacity is animating from 0 to 100 percent. I'd rather animate the height of the submenu, so that the submenu slides into view. To do that, open your scripts.js file and we'll customize the animation value inside the superfish() method:

     $(document).ready(function(){
       $('#sfNav').superfish({
         animation:  {height:'show'}
       });
     });

   Just adding a value here will override the default behavior of the plugin and replace it with the animation we choose instead.

2. Now when you refresh the page in a browser, you'll see the submenus slide into view instead of fade in, which is a much more fitting animation for the ...