Coolmenus properties - Item properties

Item properties are the properties you can set on each individual item. The way to specify these are a little different then the other properties as these are specified as arguments to the makeMenu function. The syntax is like this:

myCoolMenu.makeMenu(name, parent_name, text, link, target, width, height, regImage, overImage, regClass, overClass , align, rows, nolink, onclick, onmouseover, onmouseout)


Note that most of the properties for the items are not required and only needs to be specified if they are different from the level variables. In most cases you would only need name, parent_name, txt and link:

myCoolMenu.makeMenu("menu1", "", "My menu", "my_folder/index.html")

If you wish to set the height, but not the width and target just set:

myCoolMenu.makeMenu("menu1", "", "My menu", "my_folder/index.html","","",100)


Advanced users info
You can get and/or set a value from/to an individual item right after the creation of the item like this:

myCoolMenu.m["name_of_created_item"].property

You can also change any property of the div object related to the item, but that have to be done after constructing the menu. Note that Explorer and NS6 reuses all divs (expect the ones in level[0]) (only writes out the number of divs needed for each level), and that all browsers reuse the border divs for all levels exept level[0]. So if you change something on a div object it will be changed back when showing another submenu. Syntax for a single div (they use parts of the regular DHTML library script):

myCoolMenu.m["name_of_menu_to_change"].o.evnt //To change div properties
myCoolMenu.m["name_of_menu_to_change"].o.css //To change style properties

Syntax for the border div:

myCoolMenu.m["name_of_menu_to_change"].b.evnt //To change div properties
myCoolMenu.m["name_of_menu_to_change"].b.css //To change style properties

This could be used to for instance change the absolute postion on a top menu, straight after creation you'd place in code like this:

myCoolMenu.m["name_of_top_element1"].b.moveIt(500,500)

That way menuitem one would be placed out of line with the rest, but would still work as expected.

There are tons of stuff like this that you can do as long as you have some javascript knowledge. Good luck. If you do something really cool or add features let me know and maybe we can add it it to the add-in js.

Coolmenus properties - name

This is an unique name for the item. If not specified the script will automatticly make a name for the item.

Please note though that you HAVE to put in a name if you have subitems on this item because you have to tell the subitems to use this item as it's parent (see "parent" for more info)

How to set the variable:

myCoolMenu.makeMenu("my_name", parent_name, text, link, target, width, height, regImage, overImage, regClass, overClass , align, rows, nolink, onclick, onmouseover, onmouseout)

Coolmenus properties - parent_name

This is the name of the parent item. If not spesified (or spesified with a name that doesn't exist) the item will be a TOP level item.

If I had a menu like with one TOP item and one sub on that item:

News
 - newest news

i would specify the name and the parent name like this:

myCoolMenu.makeMenu("my_name")
myCoolMenu.makeMenu("", "my_name")


(remember that you need the other settings as well, that's just an example)

How to set the variable:

myCoolMenu.makeMenu(name, "my_parents_name", text, link, target, width, height, regImage, overImage, regClass, overClass , align, rows, nolink, onclick, onmouseover, onmouseout)

Coolmenus properties - text

This is the text for the item. If not specified the item will be empty. This should always be specified unless you're using images for your menu.

How to set the variable:

myCoolMenu.makeMenu(name, parent_name, "Menu text", link, target, width, height, regImage, overImage, regClass, overClass , align, rows, nolink, onclick, onmouseover, onmouseout)

Coolmenus properties - link

This is the link that this item should link to. This should always be specified unless this is a "nolink" item (see "nolink" for more info). If this item should just not link to anywhere set it to 0, or double empty quotes.

Remember that all links have to be set relative to the ROOT of your web.

How to set the variable:

myCoolMenu.makeMenu(name, parent_name, text, "myfolder/index.html", target, width, height, regImage, overImage, regClass, overClass , align, rows, nolink, onclick, onmouseover, onmouseout)

Coolmenus properties - width

This is used if you like to specify a width of an indivudual item. If this is not set the item will get it's width from the level[x].width property.

How to set the variable:

myCoolMenu.makeMenu(name, parent_name, text, link, target, 100, height, regImage, overImage, regClass, overClass , align, rows, nolink, onclick, onmouseover, onmouseout)

Coolmenus properties - height

This is used if you like to set an individual height on an item. If not spesified it will get the value from the level[x].height property. Specified in pixels.

How to set the variable:

myCoolMenu.makeMenu(name, parent_name, text, link, target, width, 100, regImage, overImage, regClass, overClass , align, rows, nolink, onclick, onmouseover, onmouseout)

Coolmenus properties - regImage

This is only used if you intend to use images (and NOT text) for this item. This image is the one that's shown when the user not has he's mouse over the item. Remember to place in the full path to the image relative to the ROOT of your web.

The image will automaticly get the height and width from this item (or this level if the item height and width is not set).

How to set the variable:

myCoolMenu.makeMenu(name, parent_name, text, link, target, width, height, "images/myimage.gif", overImage, regClass, overClass , align, rows, nolink, onclick, onmouseover, onmouseout)

Coolmenus properties - overImage

This is only used if you intend to use images (and NOT text) for this item. This image is the one that's shown when the user has  he's mouse over the item. Remember to place in the full path to the image relative to the ROOT of your web.

The image will automaticly get the height and width from this item (or this level if the item height and width is not set).

How to set the variable:

myCoolMenu.makeMenu(name, parent_name, text, link, target, width, height, regImage, "images/my_mouseover_image.gif", regClass, overClass , align, rows, nolink, onclick, onmouseover, onmouseout)

Coolmenus properties - regClass

This is the same as "level[x].regClass" only that this specifies a CSS class for this item only. If you have one item that you want to look differently from the rest of them you set that here.

How to set the variable:

myCoolMenu.makeMenu(name, parent_name, text, link, target, width, height, regImage, overImage, "myCSSclass", overClass , align, rows, nolink, onclick, onmouseover, onmouseout)

Coolmenus properties - overClass

This is the same as "level[x].overClass" and should be a CSS class that controls the look of this item when it's mouseovered. If not specified it will inherit the value from the level.

How to set the variable:

myCoolMenu.makeMenu(name, parent_name, text, link, target, width, height, regImage, overImage, regClass, "myCSSoverClass", align, rows, nolink, onclick, onmouseover, onmouseout)

Coolmenus properties - align

The same as "level[x].align". This is used to override the level variable, if you want the subitems of this item to align differently then the rest of the items in this level specify it here.

How to set the variable:

myCoolMenu.makeMenu(name, parent_name, text, link, target, width, height, regImage, overImage, regClass, overClass , "left", rows, nolink, onclick, onmouseover, onmouseout)

Coolmenus properties - rows

Same as "level[x].rows", only that this sets the rows of the subitems below this item only. Used if you want to override the level value.

How to set the variable:

myCoolMenu.makeMenu(name, parent_name, text, link, target, width, height, regImage, overImage, regClass, overClass , align, 1, nolink, onclick, onmouseover, onmouseout)

Coolmenus properties - nolink

If you have items that are meant to be info items only or something like that you can set this value to 1 and the item will not get a hand cursor and/or a link (the events will not work either)

How to set the variable:

myCoolMenu.makeMenu(name, parent_name, text, link, target, width, height, regImage, overImage, regClass, overClass , align, rows, 1, onclick, onmouseover, onmouseout)

Coolmenus properties - onclick

This is used if you want to execute other javascript code when this item is clicked.

How to set the variable:

myCoolMenu.makeMenu(name, parent_name, text, link, target, width, height, regImage, overImage, regClass, overClass , align, rows, nolink, "my_function()", onmouseover, onmouseout)

Coolmenus properties - onmouseover

This is used if you want other javascript code to execute when the user mouseover this item.

How to set the variable:

myCoolMenu.makeMenu(name, parent_name, text, link, target, width, height, regImage, overImage, regClass, overClass , align, rows, nolink, onclick, "do_something()", onmouseout)

Coolmenus properties - onmouseout

This is used if you want this item to execute other javascript code when the mouse leaves the element.