Nornix TreeMenu

CSS classes for styling the menu

used on the <div> element encapsulationg the menu.
used on the <a> tag immidiately following the opening <div id="menu" class="menu"> tag
used on <li> tags that represent folders, i.e. has child nodes
used on <li> tags that represent documents, i.e. has no child nodes
last <li> in a <ul>
open, closed
used to indicate status of <li> tag representing a folder
is set on the <a> element of the current page (that should have no href attribute at all when creating the menu dynamically on the server-side). Don't set this in the HTML, only use it in your CSS.

Menu levels

The CSS of the menu is written to accomodate an unlimited number of menu levels. Unfortunately this requires the CSS level 2 child selector ">", which is not implemented in Internet Explorer version 6 and earlier. This is worked around in the ie-menu.css stylesheet.

However, the Internet Explorer workaround does only allow for a limited number of menu levels. You can increase the number of levels by adding more lines in all code similar to this:

.menu li.folder span,
.menu li.folder span,
.menu li.folder li.folder span,
.menu li.folder li.folder li.folder span
{/* style rules */}

Remeber to change all such selector-"rows" to keep them in balance with each other. Maybe you also should think twice to find out if your menu really needs more than four levels!

Last modified: 2007-07-25