DHTML Central coolmenu tutorial

Coolmenus properties - Menu properties

Menu properties are global properties that control the entire menu. These properties controls the position of the menu and some other settings.

Remember that the first line in your menu creation code HAVE to be:

myCoolMenu=new makeCM("myCoolMenu")

You can use whatever you want as the name of the menu as long as you reuse that throughout the menu creation code and as long as the correct name is sent to the makeCM function. This means that:

whateverIwant=new makeCM("whateverIwant")

Will work just as good.

If you want to have more then one menu on a page you have to use different names for the each menu.

Coolmenus properties - pxBetween

The pxBetween variable is used to set how much space you want between your top items. This can be specified in percetage or pixels.

Note: The value of this property is ignored if "menuPlacement" is spesified!

How to set the variable:

myCoolMenu.pxBetween=10

myCoolMenu.pxBetween="20%" //remember to use quotes around percentage values

Coolmenus properties - fromTop

This sets the top position of the menu. It can be specified in percentage or in pixel.

Note: If  "menuplacement" is used (set to something else then 0) and the menu is in columns (rows=0) then this property is ignored.

How to set the variable:

myCoolMenu.fromTop=100

myCoolMenu.fromTop="30%" //Remeber quotes around percentage numbers

Coolmenus properties - fromLeft

This controls the left position of the menu. Can be specified in pixels or percentage.

Note: If "menuPlacement" is used and the menu is in rows (rows=1) this property is ignored.

How to set the variable:

myCoolMenu.fromLeft=100

myCoolMenu.fromLeft="20%" //Remember to use quotes around percentage values

Coolmenus properties - wait

The wait property controls how long the script should wait before hiding the open menu items after the mouse has left them. Value is in milliseconds (1000 = 1 second).

How to set the variable:

myCoolMenu.wait=500

Coolmenus properties - resizeCheck

This is a boolean, set to 1 it will refresh the menu on page resize in IE and NS6 and reload the page in the rest of the browsers.


As you probably know Netscape 4 has a bug that makes layers (absolute or relative positioned elements) loose their style when the page is resized. Opera have a similar bug, therefore the page is reloaded when the page is resized in Opera and NS4 to get back the styles. In Explorer and NS6 the script just remakes the elements to get the proper position.

The reason I left this as a property so you can set it off if you like is basically because you might be using another resize check in another script. If you are, remember to do "myCoolMenu.construct(1)" for IE and NS6 on resize.

Advanced users info
In Explorer and Netscape this is attached to the "onresize" event of the window. In Opera the script uses the event document.onmousemove to check for this, as Opera doesn't have a "onresize" event. That means that if you have other scripts on the page that uses that event you'll have to tweak the script a little.

How to set the variable:

myCoolMenu.resizeCheck=1 //It will check for resize

myCoolMenu.resizeCheck=0 //It will not care about resizing at all.

Coolmenus properties - zIndex

This is rather complicated and if you don't already know what zIndex is you probably don't have to care about this property at all.

The value of this variable controls what zIndex the menu should "start" on. The first element of the menu (the backgroundbar) will have this zIndex and all other elements will have a higher value. This means that if you have another script on the page which has layers you want to appear "behind" this one, set the zIndex of the menu to something higher then the zIndex those elements have.

Note: Due to a bug in Opera you also have to set this value manually on all the style classes used for the border layers - see CSS help for more info!.

How to set the variable:

myCoolMenu.zIndex=100

Coolmenus properties - menuPlacement

This controls the placement of the menu (the top items).
 
1. You can have them right beside eachother (only adding the pxBetween property)

2. You can have them aligned. Values supported:
"right": Will align the menu to the right of the screen
"center": Will center the menu
"bottom": Will align the menus to the bottom of the screen
"bottomcenter": Will align the menus to the center and the bottom of the screen.

3. You can set them directly in pixels: (Remember to have as many array members as you have top items)

4. Or you can set them in percentage: (remember to use the ' ' around the numbers)
The last two gives you the opportunity to set each top items value seperatly.

Note: When a menu is in rows this variable is used for the left position of the menu. When not in rows this variable control the top position of the menu.

Choose one of those options to get the desired results.

How to set the variable:

oCMenu.menuPlacement=0 //Beside eachother - adding pxbetween

oCMenu.menuPlacement="center" //See 2 for possible values

Coolmenus properties - menuPlacement

This controls the placement of the menu (the top items).
 
1. You can have them right beside eachother (only adding the pxBetween property)

2. You can have them aligned. Values supported:
"right": Will align the menu to the right of the screen
"center": Will center the menu
"bottom": Will align the menus to the bottom of the screen
"bottomcenter": Will align the menus to the center and the bottom of the screen.

3. You can set them directly in pixels: (Remember to have as many array members as you have top items)

4. Or you can set them in percentage: (remember to use the ' ' around the numbers)
The last two gives you the opportunity to set each top items value seperatly.

Note: When a menu is in rows this variable is used for the left position of the menu. When not in rows this variable control the top position of the menu.

Choose one of those options to get the desired results.

How to set the variable:

oCMenu.menuPlacement=0 //Beside eachother - adding pxbetween

oCMenu.menuPlacement="center" //See 2 for possible values

Coolmenus properties - onlineRoot

This property as well as the "offlineRoot" property can be a little difficult to understand.

The value of this property should be the path to the ROOT of your web.

Example:
My website is hosted at geocities, my url is:

http://www.geocities.com/myWeb/

My onlineRoot would then be:

myCoolMenu.onlineRoot="/myWeb/"

If you have your own domain name you just set this value to "/".

Please note the syntax, and remember the ending "/"!

The reason we need this variable is to get all links and images working correctly. To get around the problems in version 3 you now have to spesify ALL images and links relative to the root.

So your links should look this:

/myWeb/link.html

And your image srcs should look like this:

/my_image_folder/image.gif

How to set the variable:

myCoolMenu.onlineRoot="/myWeb/"

myCoolMenu.onlineRoot="/"

Coolmenus properties - offlineRoot

This property as well as the "onlineRoot" property can be a little difficult to understand.

The value of this property should be the path to the ROOT directory of where you have your files offline.

Example:
You have all your web files in this directory: C:\my_web_files\my_web\new\

Your offlineRoot would then be:

myCoolMenu.offlineRoot="file:///C|/my_web_files/my_web/new/"

Please note the syntax! It starts with file:/// and ends with a /

The reason we need this variable is to get all links and images working correctly when testing offline as well. To get around the problems in version 3 you now have to spesify ALL images and links relative to the root directory.

So your links should look this:

/myWeb/link.html

And your image srcs should look like this:

/my_image_folder/image.gif

How to set the variable:

myCoolMenu.offlineRoot="file:///C|/Inetpub/wwwroot/"

Coolmenus properties - fillImg

This property is new in this version. Netscape 4 and Opera now uses a transparent image that covers the menu item which makes the "hand" cursor work on the entire element. This also helps because now the events are set on the image in stead of the layers, this way is more stable in NS4.

The value here is the full path relative from the ROOT of your web (or the onlineRoot and offlineRoot property values) to your fill image. This means that if I have my image "fill.gif" in the images directory I should set this to "images/cm_fill.gif"

How to set the variable:

myCoolMenu.fillImg="/images/cm_fill.gif"

Coolmenus properties - frames

Set this property to 1 if you are using frames for your menus (if you have your main items and sub items in different frames that is). If you have your entire menu in ONE frame set this to 0.

How to set the variable:

myCoolMenu.frames=1

Coolmenus properties - frameStartLevel

This is a nifty little thing. You can here spesify at what level you want the elements to move into your other frame. See frame example 3 for more info. Only used in frame version.

How to set the variable:

myCoolMenu.frameStartLevel = 2

Coolmenus properties - openOnClick

Set this property to 1 if you want the menu to open onclick, not onmouseover.

How to set the variable:

myCoolMenu.openOnClick=1

Coolmenus properties - closeOnClick

Set this property to 1 if you want the menu to close when you click another place on the page (in stead of closing when you mouse out).

How to set the variable:

myCoolMenu.closeOnClick=1

Be happy :-)