There are a number of good tutorials available on the internet for developing navigation bars or web page menus that include:

  • multi-level menus
  • horizontal and/or vertical menu bars
  • dropdown and/or flyright submenus
  • strict CSS and/or animated menus
  • animated with CSS backup if JavaScript is disabled

But after going through those I still had to spend an enormous amount of time experimenting and learning on my own. I had to work out a lot of details such as:

  1. Placing the menus in a reasonably structured web page, not just a demonstration menu with a "Lorem ipsum dolor . . ." paragraph beneath it.
  2. Handling floats, and clearing floats, with respect to these menus, including multiple floats on the same web page.
  3. Placing both vertical and horizontal menus on the same page, like the pages in this web site.
  4. Separating formatting for visual appearance from the functional formatting required for proper menu performance; when not separated properly, attempts to customize the menu appearance can screw everything up badly.
  5. How to modify tweaks and hacks for older browsers after changing the visual appearance of the menus.
  6. How to insure that the menus function properly in strict CSS if JavaScript is disabled.
  7. How to customize animation code, since that available is woefully undocumented.
  8. How to set up the menus without constant width, meaning that the width of each submenu shrinks to that of the widest submenu item. To see what I mean, open one of the submenus on this page, and look closely at each succeeding submenu within it, and compare their widths.

Most of this information is available in one place or another, but one still must visit multiple sites, and do a lot of experimenting, tweaking and hacking. So I decided to attempt to put it all together in one place. I begin with a simple, but carefully structured, web page with no menus. Then I add the horizontal menus one bit at a time, slowly building up the details of the page. After the horizontal menu is added, the vertical menu is added to the same page, again in a step-by-step fashion. And finally, both menus are animated, with some rather cool effects.

Keep the CSS (style sheets) simple

A very important goal of this project is to keep the style sheets simple. It doesn't require a lot of style sheet rules to create fully functional dropdown and flyright menus. They just don't look very good. So all the rest of the rules added to a style sheet are to:

  • Fit the menu into the desired place on the page without side-effects from the "float" rules needed for the menu functionality, and
  • make the menus look pretty, or attractive, or cool, or wild or crazy or whatever.

So it's important to distinguish between the rules necessary for functionality, and those for appearance. Then we all have a much better chance of customizing our menus without screwing up the page containing the menus, or the menus themselves.

Start horizontal, then vertical, then animate

The horizontal menu bar tutorials provide a lot of groundwork so it's best to start there. The vertical tutorials assume the reader has already gone through the horizontal tutorials, so the explanations there include less detail to eliminate repetition. Both the horizontal and vertical tutorials follow the same sequence:

  1. Basics & groundwork
  2. Creating the dropdown and/or flyright menu
  3. IE 6 & 7 hacks
  4. Formatting so you can make it look the way you want
  5. Using background images for stylish menus

The animation tutorial follows the vertical tutorial, and it assumes the reader has finished both of the other two.

Tutorials:

Horizontal | Vertical | Animation | Touch-Screen Tablets | next