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 <?xml version="1.0" encoding="UTF-8"?> will switch IE into quirks mode and your menu will not work correctly.
hy. I cant turn on collapsing menus can yuo help me i dont know english much but I can understand. Pleas Help.
Answer on my e mail please. I dont know what to do whit cod
Here is a similar concept, yet very different. I spent a while trying to figure out how to use JQuery accordion plugin with NAVT without hacking the plugin.
I finally got it licked. This site is in “re-development” phase.
http://ronnietaylor.com/clients/eternal/
by the way…thanks for the outstanding plugin
Hello,
Thank you for plug in, it is really useful for me.
I installed it, entered into Manage/NAVT Lists and created a group as is explained, but it does not apear on the right and other steps of creating become impossible. Thank you for your attention
Hi: I have just downloaded the plug in and am trying to create a better site navigation than I have already.
Please can you make a tuto for the accordion system please
Thank you.
I am having issues with getting the css class ‘current_page_item’ to appear on the main page. It appears when I disable the NAVT plugin and use the regular wp navigation. However, with the NAVT plugin active the ‘current_page_item’ class does not show up on the main page. It does work on all the other pages. Any help with this would be greatly appreciated.