* Coolmenus 4 - Default Styles - Do Not Edit *

http://simplythebest.net/scripts/DHTML_scripts/dhtml_script_52a.html

Inserir após head

<style>

/* CoolMenus 4 - default styles - do not edit */

.clCMAbs{position:absolute; visibility:hidden; left:0; top:0}

/* CoolMenus 4 - default styles - end */

/*Style for the background-bar*/

.clBar{position:absolute; width:10; height:10; background-color:transparent; layer-background-color:transparent; visibility:hidden}

/*Styles for level 0*/

.clLevel0,.clLevel0over{position:absolute; padding:2px; font-family:arial,helvetica; font-size:12px; font-weight:bold}

.clLevel0{background-color:transparent; layer-background-color:transparent; color:#000080;}

.clLevel0over{background-color:transparent; layer-background-color:transparent; color:#008080; cursor:pointer; cursor:hand; }

.clLevel0border{position:absolute; visibility:hidden; background-color:transparent; layer-background-color:transparent}

/*Styles for level 1*/

.clLevel1, .clLevel1over{position:absolute; padding:2px; font-family:arial,helvetica; font-size:11px; font-weight:bold}

.clLevel1{background-color:#DADCBA; layer-background-color:#FCCE55; color:#006699;}

.clLevel1over{background-color:#006699; layer-background-color:#006699; color:#FCCE55; cursor:pointer; cursor:hand; }

.clLevel1border{position:absolute; visibility:hidden; background-color:#DADCBA; layer-background-color:#006699}

/*Styles for level 2*/

.clLevel2, .clLevel2over{position:absolute; padding:2px; font-family:arial,helvetica; font-size:10px; font-weight:bold}

.clLevel2{background-color:#DADCBA; layer-background-color:#FCCE55; color:#006699;}

.clLevel2over{background-color:#006699; layer-background-color:#0099cc; color:#CDDBEB; cursor:pointer; cursor:hand; }

.clLevel2border{position:absolute; visibility:hidden; background-color:#DADCBA; layer-background-color:#006699}

</style>

Inserir após body

<script language="JavaScript1.2" src="coolmenus4.js">

/*****************************************************************************

Copyright (c) 2001 Thomas Brattli ()

DHTML coolMenus - Get it at coolmenus.dhtmlcentral.com

Version 4.0_beta

This script can be used freely as long as all copyright messages are

intact.

Extra info - Coolmenus reference/help - Extra links to help files ****

CSS help: http://coolmenus.dhtmlcentral.com/projects/coolmenus/reference.asp?m=37

General: http://coolmenus.dhtmlcentral.com/reference.asp?m=35

Menu properties: http://coolmenus.dhtmlcentral.com/properties.asp?m=47

Level properties: http://coolmenus.dhtmlcentral.com/properties.asp?m=48

Background bar properties: http://coolmenus.dhtmlcentral.com/properties.asp?m=49

Item properties: http://coolmenus.dhtmlcentral.com/properties.asp?m=50

******************************************************************************/

// Courtesy of SimplytheBest.net - http://simplythebest.net/scripts/

</script>

<script language="JavaScript1.2" src="menu.js"</script>

Adittionals

) Define the style of the menu in this section of the <Style> command:

/*Style for the background-bar*/
.clBar{position:absolute; width:10; height:10; background-color:transparent; layer-background-color:transparent; visibility:hidden}
/*Styles for level 0*/
.clLevel0,.clLevel0over{position:absolute; padding:2px; font-family:arial,helvetica; font-size:12px; font-weight:bold}
.clLevel0{background-color:transparent; layer-background-color:transparent; color:#000080;}
.clLevel0over{background-color:transparent, layer-background-color:transparent; color:#000080; cursor:pointer; cursor:hand; }
.clLevel0border{position:absolute; visibility:hidden; background-color:transparent; layer-background-color:transparent}
and so forth.

5) There are many variables you can set in the menu.js script, so we'll walk through all of them here. We have set the most logical settings for all of them and if things work fine for you, you only have to change the menus in the menu1.js file.

Menu properties
oCMenu.frames =0 / 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.
oCMenu.pxBetween=15 / Used to set how much space you want between your top items. This can be specified in percentage or pixels. Remember to use quotes around percentage values, f.e. oCMenu.pxBetween="20%".
Note: the value of this property is ignored if "menuPlacement" is specified.
oCMenu.fromLeft=5 / This controls the left position of the menu. Can be specified in percentage or in pixels. If "menuPlacement" is used and the menu is in rows (rows=1) this property is ignored.
oCMenu.fromTop=80 / This sets the top position of the menu. It can be specified in percentage or in pixels. If "menuPlacement" is used (set to something else then 0) and the menu is in columns (rows=0) then this property is ignored.
oCMenu.rows=0 / This rows property is for the top level. If you set this to 1 you will get the top menu items placed beside each other. If you set it to 0 the items will align below each other.
oCMenu.menuPlacement="0" / Values supported: "right", "center", "bottom" and "bottomcenter". You can also set them directly in pixels or in percentage (remember to use the ' ' around the numbers).
oCMenu.offlineRoot="file:///C|/mysite/scripts/coolmenus/" / If you choose to have this code inside a menu.js file, or if you're using frames you must set these two variables. The offlineRoot variable is the actual path to the directory where you menu.js file is locally. Start with file:/// and use slashes, no backward slashes and end with a slash.
oCMenu.onlineRoot="/" / The value of the "offlineRoot" 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: oCMenu.onlineRoot="/myWeb/"
If you have your own domain name you just set this value to "/".
oCMenu.resizeCheck=1 / 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, 0 to set it off.
oCMenu.wait=1000 / This 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).
oCMenu.fillImg="cm_fill.gif" / 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 instead 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 you have the fill image in the images directory you should set this to "images/cm_fill.gif"
oCMenu.zIndex=0 / 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.
Background bar properties
oCMenu.useBar=1 / If set to 1 the script will make a background bar for the script, set to 0 it will not make a bar.
oCMenu.barWidth="menu" / The width of the background bar. Set this to "menu" if you want it to be the same width as the menu (this will change to match the border if you have one). This can be specified also in pixels (without quotation marks).
oCMenu.barHeight="menu" / The height of the background bar. Set this to "menu" if you want it to be the same height as the menu.
oCMenu.barClass="clBar" / The value of this property should be a CSS class that will be used for the background bar.
Note: The class for the background bar must contain: "width:10; height:10; position:absolute". If you specify a background color remember to add layer-background-color with the same value for NS4.
oCMenu.barX=0
oCMenu.barY=0 / The left and top positions of the bar. Set these to "menu" if you want them to be the same as the left and top position of the menu (this will change to match the border if you have one).
oCMenu.barBorderX=0
oCMenu.barBorderY=0 / These control the horizontal and vertical borders of the background bar. Specified in pixels.
oCMenu.barBorderClass="" / The value of this property should be a CSS class that will be the class for the backgroundbar border.
Level properties
oCMenu.level[0]=new cm_makeLevel() / Before you can set values to level properties you have to create the level.
oCMenu.level[0].width=99 / The width property set the width of all the items on the current level. You can set this for each individual menu item as well to override the level variable.
oCMenu.level[0].height=18 / The height property set the height of all the items on the current level. You can set this for each individual menu item as well to override the level variable.
oCMenu.level[0].regClass="clLevel0" / 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.
oCMenu.level[0].overClass="clLevel0over" / 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 overridden on each individual item.
oCMenu.level[0].borderX=0
oCMenu.level[0].borderY=0 / These are the horizontal and vertical borders of the current level specified in pixels.
oCMenu.level[0].borderClass="clLevel0border" / The value of this property should be a CSS class that will be used for the borders for this level.
oCMenu.level[0].offsetX=1
oCMenu.level[0].offsetY=5 / These in co-operation with the align property control how the subitems of items on this level are placed.
oCMenu.level[0].rows=0 / 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.
oCMenu.level[0].arrow=0 / This gives you the ability to add an arrow that will automatically appear on the right of the item if the item has submenus. The value must be an image file, and it must be specified 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"
oCMenu.level[0].arrowWidth=0
oCMenu.level[0].arrowHeight=0 / These are the the width and the height of the arrow image. These have to be manually set (if you are using arrows) or Explorer and Opera might give some strange results. Specified in pixels.
oCMenu.level[0].align="right" / 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 supported: "bottom", "top", "left", "right", "righttop", "lefttop", "bottomleft" and "topleft".
Menu properties
All menus inherit the properties from the higher level, unless specified. If a level does not have a parameter specified, it looks for it at the higher level, if not specified there either, it will go a level higher, until level[0] is reached if not specified at any lower level. Keep this in mind when setting the top level. You start with level[0] (top bar items), and move on to level[1] (first level submenu), level[2] (2nd level submenu), and so forth.
Add-ins
To use any of the cm_add-in functions you have to do one of the following:
1. Copy the code from the cm-addins.js (the file can be found in the coolmenus4.zip) and paste it into your coolmenus4.js file.
or
2. Add a script link to the cm_addins.js file in your page. For example:
<script language="JavaScript1.2" src="cm_addins.js">
You can delete the other add-ins that you don't need from the file.If the add-in has properties you have to set, it's explained in the source code.
Optional dynamic effects
controllable on each level. Use them together or leave them out.
oCMenu.level[0].clippx=2
set how many pixels it will clip each time to control the speed of the animation.
oCMenu.level[0].cliptim=2
set the speed of the timer for the clip effect in milliseconds.
Optional filter effects
controllable on each level. Add at the end of the parameter list.
oCMenu.level[1].filter="progid:DXImageTransform.Microsoft.Fade(duration=0.5)"
oCMenu.level[0].filter=0 (default or omitted. See below for examples)
Menu items
oCMenu.makeMenu('top0','','PlanMagic','http://planmagic.com','')
oCMenu.makeMenu('sub00','top0','Main index','http://planmagic.com')
oCMenu.makeMenu('sub01','top0','Products','http://planmagic.com/products.html')
oCMenu.makeMenu('sub001','sub01','PlanMagic Business','http://planmagic.com/business_planning.html','',140,0)
oCMenu.makeMenu('sub002','sub01','PlanMagic Marketing','http://planmagic.com/marketing_planning.html','',140,0)
oCMenu.makeMenu('sub003','sub01','PlanMagic WebQuest Pro','http://planmagic.com/webquest.html','',140,0)
oCMenu.makeMenu('sub004','sub01','PlanMagic Finance Pro','http://planmagic.com/finance.html','',140,0)
The variables for each menu item have to be specified. You have to include the following parameters:
name: f.e. sub00. This is a unique name for the item. If not specified the script will automatically 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.
parent_name: f.e. top0. The name of the menu item you want this to connect to.
text: f.e. PlanMagic. The text you want in the item (except if you use images).
link: f.e. http://planmagic.com. The page you want the item to link to.
target: The target window or frame you want the link to go to. Default is the same window if you're not using frames, and the main frame is the default if you're using frames.
width: f.e. 140. The width of the element. If not specified it will get the default width from the higher level.
height: The height of the element. If not specified it will get the default height from the higher level.
regImage: The "off" image for an element if you want to use images.
overImage: The image that appears onMouseOver if using images.
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.
overClass: This controls the look of this item when it's mouseovered. If not specified it will inherit the value from the level.
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.
rows: This sets the rows of the subitems below this item only. Used if you want to override the level value.
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).
onclick: If you want something to happen when the element is clicked (different from going to a link) you can specify it here.
onmouseover: This will happen when you MouseOver the element. Could be status text, another imageswap or whatever.
onmouseout: This will happen when you MouseOut the element.
Make the necessary number of menus you wish to use. Make sure you have the same number of top0 menu items as there are levels specified.

Special animation filters (IE5.5+ only)

If you set this to a value it will override the clip parameters in the supported browsers. You can also delete the clip parameters if you're going to use a filter. We have left all the below lines in the menu.js file. Delete them or select one in the level[0] menu, and copy your selection to the levels where you want a certain effect. You can leave the parameter out if not wanted, or copy any one of the below examples and see how it looks. Change the level[0] into the correct level number !!

oCMenu.level[0].filter="progid:DXImageTransform.Microsoft.Wheel(duration=0.5,spokes=5)"
oCMenu.level[0].filter="progid:DXImageTransform.Microsoft.Barn(duration=0.5,orientation=horizontal)"
oCMenu.level[0].filter="progid:DXImageTransform.Microsoft.Blinds(duration=0.5,bands=5)"
oCMenu.level[0].filter="progid:DXImageTransform.Microsoft.CheckerBoard(duration=0.5)"
oCMenu.level[0].filter="progid:DXImageTransform.Microsoft.Fade(duration=0.5)"
oCMenu.level[0].filter="progid:DXImageTransform.Microsoft.GradientWipe(duration=0.5,wipeStyle=0)"
oCMenu.level[0].filter="progid:DXImageTransform.Microsoft.Iris(duration=0.5,irisStyle=STAR)"
oCMenu.level[0].filter="progid:DXImageTransform.Microsoft.Iris(duration=0.5,irisStyle=CIRCLE)"
oCMenu.level[0].filter="progid:DXImageTransform.Microsoft.Pixelate(duration=0.5,maxSquare=40)"
oCMenu.level[0].filter="progid:DXImageTransform.Microsoft.Wheel(duration=0.5,spokes=5)"
oCMenu.level[0].filter="progid:DXImageTransform.Microsoft.RandomDissolve(duration=0.5)"
oCMenu.level[0].filter="progid:DXImageTransform.Microsoft.Spiral(duration=0.5)"
oCMenu.level[0].filter="progid:DXImageTransform.Microsoft.Stretch(duration=0.5,stretchStyle=push)"
oCMenu.level[0].filter="progid:DXImageTransform.Microsoft.Strips(duration=0.5,motion=rightdown)"
You can have as many levels and sublevels as you want. Just make sure you specify the correct parent for each item.