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.


    Customising the Menus by Over-riding the defaults

    /*Variables for each menu item: (** means that they have to be specified!)
name: The name of the item. This must be unique for each item. 
Do not use spaces or strange characters in this one! **

parent: The name of the menuitem you want this to "connect" to. 
This will be a submenu of the item that have the name you place in here. 
** for all other then the topitems

text: The text you want in the item. ** (except if you use images) 

link: The page you want this item to link to.

target: The target window or frame you want the link to go to (Default is same 
window if you're not using frames, and the mainframe if you're using frames)
width: The width of the element. If not specified it will get the default 
width specified above.

height: The height of the element. If not specified it will get the default 
height specified above.

img1: The "off" image for element if you want to use images.

img2: The image that appears onmouseover if using images.

bgcoloroff: The background colour for this item. If not specified it will get 
the default background colour specified above.

bgcoloron: The "on" background colour for this item. If not specified it will 
get the default "on" background colour specified above.

textcolor: The text colour for this item. If not specified it will get the 
default text colour specified above.

hovercolor: The "on" text colour for this item. If not specified it will get
the default "on" text colour specified above. Netscape4 ignores this

onclick: If you want something to happen when the element is clicked (different 
from going to a link) 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.

Remember you can have as many levels/sublevels as you want. Just make sure you 
specify the correct "parent" for each item.

To set styles for each level see above.
*/


    This is the author's note for all the variables in the menu. Most of the above are defaults set in the code for each of the levels. But, you may wish to change the background colour of one of the boxes in the drop down list, or you may want to increase the height or width of the box to accommodate the text or image that you use.

    The list gives you an explanation of what each one is for, so, I will not go into all that detail. Just read through the above information and you will understand which one is for.

    What detail I will go into is how to over-ride each of the defaults.

    When you are over-riding any of the defaults you will need to go through the same processes each time. These are as follows:

    1. decide which variable you will choose
    2. find out what number they are in the list
    3. enter the necessary details at the beginning of the code, i.e. the menu numbers, the content of the menu etc.
    4. add as many ' as you need
    5. then add the values for the variable

    An example of this is when I wanted to edit the code for the menu on my school web-site. I wanted to put in a warning that the section that the person was entering was heavily dependant on flash animation, and there was a link to macromedia's site to download the plug-in if they needed it. This is obvious in the example at the end of the tutorial. This specific customisation included the change in size of the box that the warning was in as well as the change in text colour and background to the sub-menu's background, opening in a blank window, with the text centralised - over-riding the defaults. The resultant line of code read: 
    oCMenu.makeMenu('sub310','sub31','<div><center> NB - the sixth form mini-site 
    
requires Flash Player 5 <br>...GO GET IT!!</div>',
'http://www.macromedia.com/downloads','_blank','175','45',',','#FFFFFF',','#FF0000')

    What this one doesn't include is image swap and a different function when you click the function box - instead of/as well as the link.

    The best advice I can give here is to play around, or download the code from the school site and have a play around with it (the link here will remain valid until further notice & the content of the site is copyright of Matthew Wombell 2002) - NB - you are not entering the actual school site, but the tester page to make sure everything is working.

    « Setting the Menu VariablesPutting Your Completed Menu On-line »

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