Atalaya Studio

Working with CSS Collapsing Menus and NAVT

Greg — Tue, 13 May 2008 07:37:54 +0000

A discussion in the NAVT forum has promoted me to sit down and explain how you can use CSS collapsing menus with the NAVT plugin. This article assumes you have some working knowledge of Cascaded Style Sheets used to style your Word Press theme and some experience with NAVT. The article explains where and how to begin integrating a collapsing menu into your web site using NAVT to construct the correct tag structure. This article applies to NAVT version 1.0.23 and above.

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 will switch IE into quirks mode and your menu will not work correctly.

Controlling Code Insertions with NAVT

Greg — Tue, 13 May 2008 07:26:46 +0000

NAVT version 1.0.23 (and above) introduces the ability to add your own HTML between items within a navigation list. This feature was primarily added to support the injection of IE6 conditional statements into a list of items. However, it can be used to add titles, paragraphs, or other items inside navigation lists built by the NAVT plugin. Version 1.0.23 also introduces a new navigation item called a code block. A code block is yet another way to add your own HTML to a navigation list. Code blocks, like other items, can be used as part of a list hierarchy.

Code Between Items

Each navigation item now contains a code panel button that is used to open and close the item's code panel. Clicking the code panel button will transform the opened options box to the illustration shown in the right.

The code panel is divided into two sections. The top section containing the controls:

Insert before item,
Insert above item and,
Upper Code block

These controls are used to determine where the upper code block is to appear in the list relative to the item. The lower section that contains the controls:

Insert below item
insert after item
Lower Code block

These controls are used to determine the lower code block is to appear in the list relative to the item.

Are You Using a non-PC Browser?

Greg — Sun, 27 Apr 2008 07:24:36 +0000

I don't have access to a Mac and I'm certain that not everyone that uses NAVT is using a PC. If you are using a Mac (or any other OS for that matter) and you have installed NAVT please add a comment letting me know which browser/version NAVT works with (or doesn't work with) so I can add the information to the NAVT compatibility list.

I know that NAVT does not work with MAC/Safari.

NAVT in Slovak

Greg — Fri, 25 Apr 2008 04:28:39 +0000

NAVT release 1.0.21 now contains Slovak localization. I'd like to thank Tomas Forro for his hard work.

I'm still in need of translators. If you are interested in helping out by translating NAVT in your native tongue, please read this article.