Example Menu

Below is an example of the type of menu we’re going to create using NAVT and two cascaded style sheets. The navigation elements shown in the menu are arbitrary items I put together from this web site.

These types of menus are relatively easy to construct. However, the tricky part is making them work with IE6 and most of this article deals with the IE6 solution.

Getting Started

Examples of CSS style sheets that contain rules for formatting horizontal, vertical, fly-out, drop-down, and cascading menus can be found all over the Internet. When asked, I usually send people to CSS Play which is owned by Stuart Nicholls. CSS Play has dozens of examples of pure CSS menus that you can freely use on your non-commercial web site provided you leave the copyright statements intact that appear in the CSS file. These can also be used on Commercial web site’s provided you obtain permission from CSS Play. For this tutorial, I’m going to use this CSS Play flyout menu to demonstrate the process of integrating the CSS into your web site in concert with NAVT.

You will, of course, need to change the menu text and background colors, adjust the menu width and heights and make any other style alterations to make the menu look right with the theme you intend to use the menu with.

The !DOCTYPE

Before I begin, it’s important to understand that your Word Press theme MUST use a standards compliant !DOCTYPE, and for Internet Explorer this MUST be the first line of your (x)html. Using <?xml version="1.0" encoding="UTF-8"?> will switch IE into quirks mode and your menu will not work correctly.