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