Nornix TreeMenu
Menu

Quick start

HTML <head> changes

Insert this code in the <head> section of your HTML files:

<link rel="StyleSheet"
 href="../style/menu.css" type="text/css" media="screen" />
<!–[if lte IE 6]>
<link rel="StyleSheet"
 href="../style/ie-menu.css" type="text/css" media="screen" />
<![endif]–>
<!–[if IE 7]>
<link rel="StyleSheet"
 href="../style/ie7-menu.css" type="text/css" media="screen" />
<![endif]–>
<script type="text/javascript" src="/script/nornix-treemenu.js">

To use the provided CSS files, your HTML pages need to use standards mode, as opposed to quirks mode. Please visit the linked Wikipedia page for more information.

Below you find a few Doctype declarations that will keep the browser rendering engine in standards mode. For more in-depth information, visit the Quirks Mode site by PPK.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Files

Add files to folders on your web server:

  • The selected skin files should be copied to the /style folder.
  • The nornix-treemenu.js file should be copied to the /script folder.

Menu HTML

The menu is built with a containing <div> element, and then <ul>, <li> and <a> elements are used.

To get the correct HTML structure in the menu, please refer to the example code below. In this case "javascript:;" is used for the folder items, but normal links could be used as well.

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

More information

For information in detail, read the how-to page and the other pages in the usage-folder.

Last modified: 2008-02-11