Coolmenus properties - Level properties

Here are all the properties of each level. This might be a little hard to understand if you haven't used CoolMenus before.

I will try to explain: If you see the site menu above you you'll see 7 links, they are all part of level[0] - the top level. If you mouseover "News" you will see 2 more items, they are part of level[1], if you then mouseover "Projects" you'll see 3 more items, they are also part of level[1] - the subitems. If you then mouseover "Scripts" you'll see four items (still level[1]), then mouseover "Categories" in level[1], now 4 more items appear that are part of level? Yea you got it (just in case; they are part of level[2]).

The level property specifies different values that applies to all items in that level. All level properties MUST be specified on the top level (level[0]). In all proceeding levels all properties only need to be specified when they are different from the level above. All level variables that haven't been spesified will inherit it's value from the level below it.

NOTE: Version 4 is a little different then version 3. It now inherits the values from the last level it was specified on, no matter what. (before it only tried one level down, then got the value from the top level)

Before you can set values to level properties you have to create the level. This is also different from version 3. The syntax is like this:

myCoolMenu.level[x]=new makeLevel() //Where X is the level number

Some of the properties can be set on a single item as well, it will then override the level value.

For advanced users
I have added a simpler way to create the levels in this version. This does require a little javascript knowledge though. In stead of setting each property manually you just pass the values to the makeLevel function and it will set them for you.

The syntax is like this:

myCoolMenu.level[x]=new cm_makeLevel(width, height, regClass, overClass, borderX, borderY, borderClass, rows, align, offsetX, offsetY, arrow, arrowWidth, arrowHeight, roundBorder)

This also works the regular way that you only specify the property you want to set. If you want to set only the width of level[1] you go like this:

myCoolMenu.level[1]=new makeLevel(110)

If you are only setting another property set the ones before to 0. Example; Setting only the arrow value:

myCoolMenu.level[1]=new makeLevel(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, "/images/my_arrow_image.gif")


The level variables are stored in:

myCoolMenu.l[level_num]

So if you'd like to change the alignment of a level in runtime you could set:

myCoolMenu.l[1].align='top'

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 - width

The width property set the width of all the items on the current level. You can set this for each indidual menu item as well to override the level variable.

How to set the variable:

myCoolMenu.level[x].width=10

myCoolMenu.level[x].width="10%"

Coolmenus properties - height

The height property set the height of all the items on the current level. You can set this for each indidual menu item as well to override the level variable.

How to set the variable:

myCoolMenu.level[x].height=20

myCoolMenu.level[x].height="20%"

Coolmenus properties - regClass

This property is new in this version. The value of this property should be a CSS class that will be used for all items in the level. You can override this value on each individual item if you choose to. In this class you set all things like background colors, font sizes and stuff like that. This replaces the old style property and the color variables in version 3.

See the CSS part of help section for more information.

How to set the variable:

myCoolMenu.level[x].regClass="myCSSclass"

Coolmenus properties - overClass

This is basically the same as "regClass" only this sets the styles that all items in this level will have when the mouse is over one of them. This can also be overrided on each individual item.

How to set the variable:

myCoolMenu.level[x].overClass="myCSSclass"

Coolmenus properties - borderX

This is the horizontal border of the current level specified in pixels. Set to 0 if you don't want a horizontal border.

How to set the variable:

myCoolMenu.level[x].borderX=2

Coolmenus properties - borderY

Same as "borderX" only this goes for the vertical borders of the items in this level. Specified in pixels

How to set the variable:

myCoolMenu.level[x].borderY=10

Coolmenus properties - borderClass

This property is new in this version. The value of this property should be a CSS class that will be used for the borders for this level. This replaces the old "borderbackgroundcolor" in version 3. This means it's easier to customize the look of the border (you could for instance use a background-image for the border class to get some cool effects).

Again see the CSS help part for more info.

How to set the variable:

myCoolMenu.level[x].borderClass="myCSSclass"

Coolmenus properties - rows

This property is new in this version, in version 3 you only specified this variable for the entire menu, now you can specify it for each level and for each item as well. That means that you can have some levels with horizontal sub items and some with vertical sub items.

This property will in this case set the value of the sub items of this level.

The myCoolMenu.rows will set this for level[0], while myCoolMenu.level[0].rows will set this for level[1].

How to set the variable:

myCoolMenu.level[x].rows=0 //Items beside eachother

myCoolMenu.level[x].rows=1 //Items beneath eachother

Coolmenus properties - align

The value of this property controls the alignment of the subitems of this level. All items (except the top items) will be positioned relative to the parent element. The align property in co-operation with offsetX and offsetY spesifies the position of the subitems.

Values:
"bottom": The sub menus of this level will come out on the top of this item
"top": The sub menus of this level will come out on the bottom of this item
"left": The sub menus of this level will come out on the right of this item
"right": The sub menus of this level will come out on the left of this item

New values in version 4:
"righttop": The menus will come out to the right but go upwards.
"lefttop": The menus will out to the left but go upwards.
"bottomleft": The menus comes out of the bottom but goes left.
"topleft": The menu comes out above the current element and goes left.

In generally "left" and "right" works best for menus in columns and "top" and "bottom" works best for menus in rows. The new "bottomleft" and "topleft" are usefull for menus that use columns on sublevels.

But by all means feel free to play with it.

This property can now be set on each individual item as well.

How to set the variable:

myCoolMenu.level[x]="my_align"

Coolmenus properties - offsetX

This in co-operation with the align property controls how the subitems of items on this level is placed.

Let's say you have this levels align property set to right. Then the subitems will pop out straight to the right of the item mouseovered. If you set the value of this property to 20 the element will appear 20 pixels more to the right.

See the align property for more info or play with it.

How to set the variable:

myCoolMenu.level[x].offsetX=10

Coolmenus properties - offsetY

This in co-operation with the align property controls how the subitems of items on this level is placed.

Let's say you have this levels align property set to bottom. Then the subitems will pop out straight to the right of the item mouseovered. If you set the value of this property to 20 the element will appear 20 pixels down from the bottom of the item mouseovered.

See the align property for more info or play with it.

How to set the variable:

myCoolMenu.level[x].offsetX=10

Coolmenus properties - arrow

This is new in this version and gives you the abbility to add an arrow that will automaticly appear on the right of the item if the item has submenus. The value must be an image file, and it must be spesified with the full path from the ROOT of your web.

If you do not specify this the level will not use this feature.

How to set the variable:

myCoolMenu.level[x].arrow="images/my_arrow_image.gif"

Coolmenus properties - arrowWidth

This is the width of the arrow image. This has to be manually set (if you are using arrows) or Explorer and Opera might give some strange results. Spesified in pixels.

How to set the variable:

myCoolMenu.level[x].arrowWidth=10

Coolmenus properties - arrowHeight

This is the heightof the arrow image. This has to be manually set (if you are using arrows) or Explorer and Opera might give some strange results. Spesified in pixels.

How to set the variable:

myCoolMenu.level[x].arrowHeight=10

Coolmenus properties - roundBorder

This is used to get a border around all the submenus of this level. So if you set the other border variables to 0, and set a value in here you get a surronding border.

This uses the same class as the other border properties.