Studying the XHTML
An example of the (x)html for this flyout menu is presented here:
<!--
This copyright notice must be kept untouched in the
stylesheet at all times.
The original version of this stylesheet and the associated
(x)html is available at
http://www.cssplay.co.uk/menus/flyoutt.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified
in any way to fit your requirements.
-->
<div class="menu">
<ul>
<li><a class="hide" href="#">Item 1</a>
<!-- START IE CONDITIONAL (1) -->
<!--[if lte IE 6]>
<a class="sub" href="#">Item 1<table><tr><td>
<![endif]-->
<ul>
<li><a href="#">Item 1.1</a></li>
<li><a href="#">Item 1.2</a></li>
<li><a href="#">Item 1.3</a></li>
<li><a class="hide" href="#">Item 1.3</a>
<!-- START IE CONDITIONAL (2) -->
<!--[if lte IE 6]>
<a class="sub" href="#">Item 1.3 <table><tr><td>
<![endif]-->
<ul>
<li><a href="#">Item 1.3.1</a></li>
<li><a href="#">Item 1.3.2</a></li>
</ul>
<!-- END IE CONDITIONAL (2) -->
<!--[if lte IE 6]>
</td></tr></table></a>
<![endif]-->
</li>
</ul>
<!-- END IE CONDITIONAL (1) -->
<!--[if lte IE 6]>
</td></tr></table></a>
<![endif]-->
</li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
</div>
The navigation list is wrapped in a DIV tag assigned the CSS class menu. This is the first obstacle when working with NAVT. The CSS class "menu" is a native NAVT class and the presence of the menu class in the flyout example is coincidentally the same class NAVT assigns all navigation list ULs it creates.
Therefore, the first thing we need to remember is to change the name of the flyout's wrapping DIV to a different class name. Following the DIV.menu is a LI tag (Item 1) that wraps the menu items up to peer Item 2. To duplicate the necessary structure using NAVT, the items would need to be nested in the navigation group in the following way:
To wrap the entire navigation list in a DIV tag we can set the
navigation group option (under the group's Theme Tab) Add tags before navigation group to:
<div class="flyout-menu">
Notice that the DIV class is now "flyout-menu" instead of "menu". This is to avoid to use of the same class by NAVT.
Next, set the group option: Add tags after navigation group to:
</div>
to complete the wrapper.
The first LI tag (Item 1) must be assigned the class "hide". Notice that the IE6 conditional code that follows the LI tag contains a duplicate Item 1 anchor. This is the anchor that IE6 will display when the menu is viewed with IE6. The IE6 Item 1 anchor wraps the child items that appear under it. The hide class is used in the IE6 CSS style sheet to hide the non-IE6 anchor. The hide class is not defined in the style sheet used for non-IE6 browsers.
To set the anchor class to hide for Item 1, click Item 1 to open the Item 1 options box. Select Apply CSS Class in the anchor class drop-down and enter the word hide into the CSS class text box. Select the check mark to save the option and close the option box. The hide class is also assigned to Item 1.3
The FlyOut Menu CSS
The Flyout menu's CSS is split into two files. The file: flyout.css contains the non-IE browser style rules; the file flyout_ie.css contains the rules for MS IE version 6 ( and older ) browsers. ( More on IE later ) The style sheets must appear between the head tags of your web site page. Do this by adding the following lines to your theme's header.php file:
<head>
...
...
<link rel="stylesheet" media="all" type="text/css" href="flyout.css" />
<!--[if lte IE 6]>
<link rel="stylesheet" media="all" type="text/css" href="flyout_ie.css" />
<![endif]-->
...
...
</head>
The non-IE browser style sheet must appear before the IE style sheet. This is to take advantage of the cascading behavior of Cascaded Style Sheets. When an IE version 6 (and lower) browser loads the common style sheet it then loads the IE style sheet overwriting a portion of the style rules. This enables the flyout menu to behave correctly when viewed with an MSIE 6 browser. IE7 will not load the flyout_ie.css file because <!--[if lte IE 6]> will evaluate to false.
Because the wrapping DIV class name has been changed from menu to flyout-menu, it will be necessary for you to change each occurrence of the class .menu to .flyout-menu in the flyout.css and flyout_ie.css files.
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.