This script generates a css menu. The structure of the menu is a simple li list, where you can use different levels. Every level could have different style, and you can use graphics or any html code within the li content.

Example

Installation and setup

You have to create a list based menu into a container div. The div must have an id, for example 'menu' (the script search this id default). The menu have to be valid (x)html code. So the menu must look like the following example:

<div id="menu">
    <ul>
        <li>Menu1</li>
        <li>Menu2
            <ul>
                <li>Menu2 1</li>
                <li>Menu2 2</li>
            </ul>
        </li>
    </ul>
</div>

To activate the menu, first you must import the menu.js file into your html page.

<script src="menu.js" type="text/javascript" charset="utf-8"></script>

The syntax of usage:

var a_name = new Menu.add();
a_name.init('id_of_menu_container', [options]);

Here is an example to activate the script on two menu:

<script type="text/javascript">
    addEvent('load', function() { // Run the scripts when the page is loaded
       /*
       * First menu:
       *   - Every option is default
       *   - The id of the container element is 'menu'
       */
      var menu = new Menu.add();
	    menu.init('menu', {});
      /*
       * Second menu:
       *   - Every option has changed
       *   - The id of the container element is 'menuright'
       */
      var menu2 = new Menu.add();
      menu2.init('menuright', {overName: 'hover', timeOut: 80, 
      subMenuFunc: subMenuFuncRight, ieFrame: false, debug: false});
    }, window);
</script>

The first menu is activated with default options on the list which is in the container which id is menu.
The second menu is activated on the list which is in the container with 'menuright' id, but all of the options are changed. The overName is changed from over to hover, the timeOut is changed from 100 to 80 milliseconds, the subMenuFunc name is subMenuFuncRight, the ieFrame is swetched off and the debug is too.

You can find this example in the header of the page!

The look of the menu

There are two css files attached to the script, menu.css and menu_ie6.css. The menu.css is just for example. You can modify it free or you can create another one, but it's not problem to use the example. Just import the stylesheet into your html page.
The menu_i6.css is need for the script to work properly (ie6 select bug). If you use the script with ieFrame on your menu, you have to modify this file. You have to add #your_container_id iframe style selector to the selectors section.

Import them into your html file:

<link rel="stylesheet" href="tool/menu_timeout/menu.css" 
type="text/css" media="screen" 
charset="utf-8" />
<!--[if lt IE 7]>
<link rel="stylesheet" href="tool/menu_timeout/menu_ie6.css" 
type="text/css" media="screen" 
charset="utf-8" />
<![endif]-->

I suggest that use different CSS files for each menu. I give you two example for menus, a horizontally and a vertically which placed on the right side of the page.

Style of the list items

To modify the style of an list item, find the #menu li code in the menu.css. Here you can specify the list items properties.

Indicate the sub menus

To indicate that the menu item have a submenu you can use the subMenuFunc option. Here is two example:

addExtraChar = function(obj) {
  obj.innerHTML += ' >';
};

This function will add an extra character (in the example the char is >) to the specified menu item.

addExtraClass = function(obj) {
  addClassName(obj, 'sub');
};

This function will add an extra CSS class to (sub) the specified menu item.

Submenus width - horizontal menu

If your menu items were wider than the specified menu item, first you should modify the width property in the #menu li ul selector. Then you should modify the left property on the #menu li li.over ul selector. Please watch the borders, paddings and margins when you are configuring this property.

Main menu height - horizontal menu

If you used bigger fonts, you should change some other property too. You should modify the height attribute of the #menu ul and the top property of the #menu li ul selectors.

License