Why custom animation

I wanted to customize the animation on my site to produce the slidedown and slideright menus you see above and to the left.  I experimented quite a bit with existing freeware/shareware, but the code is so poorly documented, I found it very difficult to customize it and make it work.

It's odd that a lot of JavaScript code is not self-documenting, which is common coding practice among professional programmers.  Self-documented code includes extensive commenting in the code so that anyone who wants to understand the code can do so with minimal effort by reading through a source file.  One might argue that for web based code (HTML, CSS, JS, etc.) such comments bloat the code and slow down the speed with which web pages are loaded.  But there are any number of excellent minimify packages available, many of them free and available in minutes over the internet.  So such an argument is, at best, academic.  Here are a few: JSMin, Minify, YUI Compressor, AjaxMin.

JavaScript libraries and plugins

Like so many other JavaScript coders, I use JQuery rather than writing raw JavaScript code.  It's free, concise and well organized.  It also offers cross-browser compatibility, hiding browser-specific JavaScript implementations from the user.  The animation routines coded here do require JQuery to perform properly.

CSS class change

If you've followed the development of the horizontal and vertical menu bars in the preceding tutorials, then those menus, which work nicely on their own without animation, will remain relatively unchanged.  And the changes made here to support animation will not affect the dynamic HTML performance of the menus.  So if someone visits your web-site, and in their browser they have JavaScript disabled, the menus will still work without it.

The only change made to the CSS for animation is that the rules used to display submenus are isolated into their own class as follows:

  1. #navHd.navHshow li:hover ul, /* Display's 2nd level */
    #navHd.navHshow li li:hover ul, /* Display's 3rd level */
    #navHd.navHshow li li li:hover ul, /* Display's 4th level */
    #navHd.navHshow li li li li:hover ul { /* Display's 5th level */
      display:block;
    }
  2. #navVd.navVshow li:hover ul, /* Display's 2nd level */
    #navVd.navVshow li li:hover ul, /* Display's 3rd level */
    #navVd.navVshow li li li:hover ul, /* Display's 4th level */
    #navVd.navVshow li li li li:hover ul { /* Display's 5th level */
      display:block;
    }

Notice that for these two rules their classes have been changed from "navH" to "navHshow" and from "navV" to "navVshow".  And to make the CSS work properly, add these classes to the horizontal and vertical menu <div>'s so they read as follows:

<div id="navHd" class="navH navHshow clearfix">

and

<div id="navVd" class="navV navVshow">.

This change has not altered the functionality of the menus.  However, it does make it easy to turn off the CSS rules that display the submenus by merely removing the navHshow and navVshow classes from the menu <div>'s.  More about that later.

This Animation tutorial begins with this example page.  Note that this page links in:

  • default.css, which can be downloaded here,
  • tutLayout3.css, which can be downloaded here, and
  • tutNavA.css, which can be downloaded here.

tutNavA.css was created by consolidating the horizontal and vertical menu bar style sheets from the end of the last tutorial, and then incorporating the "class" change described above.

This example page also links in:

  • the JQuery library, and
  • jldAnimMenus1.js, which can be downloaded here.

Try out the page now to see the animation in action.

Next

It's time to dig into the animation code.

Animation:  [A-1A-2  A-3  next