HTML structure

The provided CSS files are composed for use in standards mode, refer to the quick-start page for details on this.
The menu must be encapsulated inside a <div> tag with the id "menu" (configurable, hook for JavaScript) and class "menu" (hook for CSS styling).
Every menu and menu item starts with an <a> tag. If an item should not link to a web page, set the href attribute of the <a> tag to "javascript:;" or "#".
After the <a> tag, you can add a list of subpages/childnodes by adding an <ul> tag.
Inside the <ul> tag, every item is placed inside an <li> tag.
And then, as stated above, the menu item itself starts with an <a> tag, and so on. This way the elements also get a proper nesting.
You can insert classes on the menu elements either server-side or client-side. Server-side makes the menu faster and better looking in case of an user agent with scripting disabled. If this is not possible to achieve, Nornix TreeMenu can be configured to insert classes client-side.
Example HTML code follows below.
Read more on how to link the CSS and JavaScript files from the HTML <head> section.

HTML example, classes inserted server-side

<div id="menu" class="menu">
  <a href="/" title="Nornix TreeMenu" class="root">start</a>
  <ul>
    <li class="folder closed">
      <a href="/info" title="Information">info</a>
      <ul>
        <li class="document">
          <a href="/info/features">features</a>
        </li>
        <li class="document">
          <a href="/info/layers">layers</a>
        </li>
        <li class="document">
          <a href="/info/compatibility">compatibility</a>
        </li>
        <li class="last folder closed">
          <a href="/info/usage">usage</a>
          <ul>
            <li class="document">
              <a title="HTML structure">HTML</a>
            </li>
            <li class="document">
              <a href="/info/usage/css" title="CSS classes">CSS</a>
            </li>
            <li class="last document">
              <a href="/info/usage/js" title="JS behavior">JS</a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="document">
      <a href="/license">license</a>
    </li>
    <li class="last document">
      <a href="/contact">contact</a>
    </li>
  </ul>
</div>

HTML example, classes inserted client-side

<div id="menu" class="menu">
  <a href="/" title="Nornix TreeMenu">start</a>
  <ul>
    <li>
      <a href="/info" title="Information">info</a>
      <ul>
        <li>
          <a href="/info/features">features</a>
        </li>
        <li>
          <a href="/info/layers">layers</a>
        </li>
        <li>
          <a href="/info/compatibility">compatibility</a>
        </li>
        <li>
          <a href="/info/usage">usage</a>
          <ul>
            <li>
              <a title="HTML structure">HTML</a>
            </li>
            <li>
              <a href="/info/usage/css" title="CSS classes">CSS</a>
            </li>
            <li>
              <a href="/info/usage/js" title="JS behavior">JS</a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li>
      <a href="/license">license</a>
    </li>
    <li>
      <a href="/contact">contact</a>
    </li>
  </ul>
</div>

HTML example, classes inserted client-side, folders have no real link

<div id="menu" class="menu">
  <a href="/" title="Nornix TreeMenu">start</a>
  <ul>
    <li>
      <a href="javascript:;" title="Information">info</a>
      <ul>
        <li>
          <a href="/info/features">features</a>
        </li>
        <li>
          <a href="/info/layers">layers</a>
        </li>
        <li>
          <a href="/info/compatibility">compatibility</a>
        </li>
        <li>
          <a href="javascript:;">usage</a>
          <ul>
            <li>
              <a title="HTML structure">HTML</a>
            </li>
            <li>
              <a href="/info/usage/css" title="CSS classes">CSS</a>
            </li>
            <li>
              <a href="/info/usage/js" title="JS behavior">JS</a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li>
      <a href="/license">license</a>
    </li>
    <li>
      <a href="/contact">contact</a>
    </li>
  </ul>
</div>

Last modified: 2008-02-11