Nornix TreeMenu
Menu

How to use Nornix TreeMenu

To use Nornix TreeMenu, you need to link the CSS and JavaScript files, and make the graphics available. You also have to create the menu according to the instructions on the HTML structure page.

Links in HTML <head>

To use Nornix TreeMenu, you need to link the following files from the <head> section of the HTML files:

  • menu.css
  • ie-menu.css
  • ie7-menu.css
  • nornix-treemenu.js

CSS and images

The CSS stylesheets and images of the tree menu should reside in the same directory, with /style as the default path.

You add the style rules for the menu to your other style information by adding links to the respective CSS files. To link the CSS files, 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]–>

If the CSS files does not reside in the /style directory, change the path according to where they are located. Please remove the terminating slashes in the <link> elements if you use HTML (not XHTML).

The menu.css file contains style rules for all browsers, ie-menu.css contains style rules for Internet Exlorer 5.5 and 6, ie7-menu.css contains style rules for Internet Explorer 7. The method used to taget different versions of Internet Explorer is called conditional comments. Microsoft recommends us to use conditional comments rather than CSS hacks.

We do no longer promote the use of @import hacks to hide the CSS from older browsers, while those browsers are really rare today. If you know that @import hacks are needed for your audience, check the Import Hack page at the CSS-discuss wiki.

Please be aware of that the provided CSS files are composed for use in standards mode, refer to the quick-start page for details on this.

JavaScript

To link the JS files, insert this code in the <head> section of your HTML files:

<script type="text/javascript" src="/script/nornix-treemenu.js">

If the nornix-treemenu.js JavaScript file does not reside in the /script directory, change the path according to where they are located.

Advanced users: If you are already using functions to add and remove events, you can change Nornix.addEvent and Nornix.removeEvent so that they are used as wrappers around your preferred functions/library.

Starting the script:

var treemenu = new Nornix.TreeMenu();
treemenu.start();

This basic starting code is included in the JavaScript file.

Please see the JS page for more information on how to configure the script

Last modified: 2008-02-11