Login

Save Password - Forgot Pass? 		Not a member?
Become a DC
member now!



         Setting up CoolMenus 3
  • Downloading and using the code
  • Making the Menu Object
  • Other Default Settings
  • Background Bar Settings
  • Placement Properties
  • Level Properties
  • Setting the Menu Variables
  • Customising the Menus by Over-riding the defaults
  • Putting Your Completed Menu On-line
  • Support
      Rate this tutorial:
    This tutorial have been read 4103 times.

    Print-friendly version

    		•

    Setting up CoolMenus 3
    Written 02/07/2002 by Matthew Wombell. Last updated 02/07/2002.


    Level Properties

    //TOP LEVEL PROPERTIES - MUST BE SPESIFIED FOR LEVEL[0]
oCMenu.level[0]=new Array() 
oCMenu.level[0].width=111 
oCMenu.level[0].height=35 
oCMenu.level[0].bgcoloroff="#000000" 
oCMenu.level[0].bgcoloron="#000000" 
oCMenu.level[0].textcolor="#FFFFFF" 
oCMenu.level[0].hovercolor="#CCCCCC" 
oCMenu.level[0].style="padding-top:1px; font-family:

    tahoma,arial,helvetica; font-size:12px;" //One line
oCMenu.level[0].border=0 
oCMenu.level[0].bordercolor="#999999" 
oCMenu.level[0].offsetX=0 
oCMenu.level[0].offsetY=-1 
oCMenu.level[0].NS4font="verdana"
oCMenu.level[0].NS4fontSize="2"

/*New: Added animation features that can be controlled on each level.*/
oCMenu.level[0].clip=1 
oCMenu.level[0].clippx=15 
oCMenu.level[0].cliptim=50 
oCMenu.level[0].filter="progid:DXImageTransform.Microsoft.Fade(duration=1.0)"
oCMenu.level[0].align="bottom"

    This is the whole properties for the levels, you can repeat them for the other levels, but as each level is given a different value in the java script, you will need to replace the oCMenu.level[0] with oCMenu.level[x], replacing the x with the value that you want to use.

    oCMenu.level[0]=new Array()
    This has to remain to make the code work
    oCMenu.level[0].width=111
    The width can be set to be a pixel value (as is given above), or with a percentage - REMEMBER to use 'brackets' (') around this value
    oCMenu.level[0].height=35
    Quite obviously the height of the level, this can be set as a pixel value or a percentage (remember the ' bit if you use percentages)
    oCMenu.level[0].bgcoloroff="#000000"
    The default colour of the top level when the mouse is "off" the level box oCMenu.level[0].bgcoloron="#000000"
    The default colour of the top level when the mouse is "over" the level box - can be same as off (as in the example at end of the tutorial), or different, which highlights the colour of box the mouse cursor is over
    oCMenu.level[0].textcolor="#FFFFFF"
    The colour of the text, again, this can be given as a word, e.g. Red, Green or Blue, or a hexadecimal colour, like the example (in this case, white), when the mouse is "off" the box
    oCMenu.level[0].hovercolor="#CCCCCC"
    The colour of the text, when the mouse is "hovering" over the box. See above for what works in this bit of the code
    oCMenu.level[0].style="padding-top:1px; font- family:tahoma,arial,helvetica; font-size:12px;"
    This line tells the browser which style to apply to your menu. The first bit is how much padding to apply to the menu - NB - it must be in pixels. Then the font family is referred to, fill this in with either 1 standard font, or a group of fonts. The font size is that of the size of the font in that level of the menu
    oCMenu.level[0].border=0
    The value for the border of the level (in this case, top-level) item. This value MUST be in pixels too
    oCMenu.level[0].bordercolor="#999999"
    The colour of the border mentioned above
    oCMenu.level[0].offsetX=0
    The "offset" of the submenus (x-axis) from the top-level item (value in pixels)
    oCMenu.level[0].offsetY=-1
    The "offset" of the submenus (y-axis) from the top-level item (value in pixels) 
    oCMenu.level[0].NS4font="verdana"
oCMenu.level[0].NS4fontSize="2"

    The font and size that can be understood by Netscape 4 - size from -7 to +7, and numbers 1,2,3,4,5,6,7. 
    /*New: Added animation features that can be controlled on each level.*/
oCMenu.level[0].clip=1 
oCMenu.level[0].clippx=15 
oCMenu.level[0].cliptim=50 
oCMenu.level[0].filter="progid:DXImageTransform.Microsoft.Fade(duration=1.0)"
oCMenu.level[0].align="bottom"

    These are the animation controls for the appearance of the menu, once the mouse pointer is placed above the menu object.

    oCMenu.level[0].clip=1
    This decides whether you have a menu that slides out (value=1), or if you want a menu that suddenly appears (value=0) 
    oCMenu.level[0].clippx=15
oCMenu.level[0].cliptim=50

    If you set the clip to equal 1, then you need to give clippx, a value. This sets how many pixels the menu scrolls per value of the timer. The timer is set in milliseconds. You need to keep the cliptim value as high as possible; otherwise, you may encounter problems in Netscape 4. The advise from Thomas is to play around with these settings to get he desired effect.
    oCMenu.level[0].filter="progid:DXImageTransform.Microsoft.Fade(duration=1.0)"
    This is a filter that is understood by Internet Explorer 5+ IT IS NOT UNDERSTOOD BY NETSCAPE. Visit Microsoft's complete filter list for its browsers. The one section that can be mentioned is the duration; this is a value in seconds

    You may use the above for ANY of the levels in your menu, just replace the [0] with the level number that you want to set the values for. You MUST put all of these sections BEFORE the variables for each of the menu items

    oCMenu.level[0].align="bottom"
    This decides where the menu will appear from, in this case, the menu will appear directly under the menu item, this can be specified for each level. See the code for information on the values that can be specified here

    « Placement PropertiesSetting the Menu Variables »

    Copyright ©2000-2002 DHTMLCentral.com, Bratta Communications. All rights reserved.