Working with CSS Collapsing Menus and NAVT

Handling IE6 Requirements

The (x)html for the flyout menu contains IE conditionals that only MSIE browsers understand. The IE conditionals are written inside a HTML style comment in the form:

<!--[if lte IE 6]>
   add IE specific HTML
<![endif]-->

In the case of our flyout menu, a TABLE tag is introduced into the navigation structure by the IE6 conditional code; each UL tag is enclosed within a table column. To IE6, the HTML appears as:

<DIV>
  <UL>
    <LI> Item
      <A href="#"> <!-- start of ANCHOR TAG -->
        <TABLE>
          <TR>
            <TD>
              <UL>
                <LI>  Sub Item </LI>
                <LI>  Sub Item </LI>
              </UL>
            </TD>
           </TR>
         </TABLE>
       </A> <!-- end of ANCHOR TAG -->
     </LI>
   </UL>
</DIV>

Notice that the ANCHOR tag opened on line 4 encapsulates the TABLE. Wrapping the table in an anchor makes it possible show and hide the table (containing the sub menu) using a :hover pseudo-class.

Item 1 code insertion

To understand how to add the IE6 conditional statements that insert the TABLE tag into the navigation list, we need to observe where each IE conditional is located relative to the navigation LI tags.

The IE6 conditional code insertions can be controlled using the navigation item's insert before, above, below and after options for specific items.

To read more about controlling code insertions and how they work, please refer to this article

For example, to insert the first IE6 conditional between the LI tag on line 3 and the opening UL tag on line 11 you would open the code panel for Item 1, paste the IE6 conditional statements into the lower code block and select Insert below item. This will insert the IE6 conditional in the correct location in the list.

The second IE6 conditional must be inserted after the LI tag on line 16 and the opening UL tag on line 23. The second IE6 conditional is associated with the LI tag on line 15 (Item 1.3) and is inserted below Item 1.3.

Item 1.3 code insertion

9 Responses to “Working with CSS Collapsing Menus and NAVT”


  1. 1 nathan

    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 :)

  2. 2 RT

    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/

  3. 3 RT

    by the way…thanks for the outstanding plugin

  4. 4 Kostadin

    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 :)

  5. 5 Leslie West

    Hi: I have just downloaded the plug in and am trying to create a better site navigation than I have already.

  6. 6 amau

    Please can you make a tuto for the accordion system please :)

  7. 7 forum

    Thank you.

  8. 8 Murof

    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.

  1. 1 Stal.ac · TODO lijst

Leave a Reply