|
|
|
Setting up CoolMenus 3
|
|
Downloading and using the codeCoolMenu3, for which this tutorial is based around, can be found as a download from here, this includes several examples for use as building blocks, for both with and without frames. Making the Menu ObjectYou may, by all means change the title for your own content; you need not leave the default: < Although, you must keep the copyright note, otherwise you will be breaking the law. LEAVE the Default Browser Check, as indicated by the notes by Thomas in the script, scroll down until you find the lines that read:
oCMenu=new makeCoolMenu("oCMenu")
oCMenu.useframes=0
oCMenu.frame="frmMain"
This section is very important especially if you want to use frames. In the java script that goes with the menu, there is a function to call the rest of the scripting that needs to be left alone, thus, leave, unless you are fluent in java, the java script alone. This is what is called by the line:
oCMenu=new makeCoolMenu("oCMenu") //Making the menu object. Argument: menuname
The first decision is if you are using a frameset or not, if you are, then you need to change the: oCMenu.useframes=0 to read: oCMenu.useframes=1 NB - the code for the coolmenu needs to be within the frame that you want it to appear in! If you are using a frameset, please give the name of the frame that you are using as the frame where the coolmenu sub-menus will scroll out, here: oCMenu.frame="frmMain" Even if you are not using a frameset, please make sure that the name of your frame, is put "here", between the Shift+2 (pc) keys - note that in some html editors, the default "frmMain" is the name, and in others, "MainFrame" etc. use the right one for your html editor! Other Default SettingsYou are able to decide for yourself if the menu is activated by mouseover or onclick, this can be useful if you wish to use the menu as a drop down that stays visible, giving guidelines on the site, such as help etc. and wish it to only disappear when the user clicks the head of the menu. If you want to activate the onclick, change the O in the section below to a 1...
oCMenu.useclick=0 The next three sections are set up to work as a default: oCMenu.useNS4links=1 oCMenu.NS4padding=2 oCMenu.checkselect=0 Background Bar SettingsWe will skip a short section, in the script & return to it later (Step x, Putting the Script Online). Scroll down to the line that reads, //Background bar properties ... This is the section concerned with the background bar of a coolmenu, you can configure it so that the 'bar' is either transparent or a html colour, or of a hexadecimal (hex) colour. (Check the resources pages where the is a link to a site that shows and tells you what worded colours are understood by what browsers - if you do use this setting, make sure that the colour is understood cross-browser) oCMenu.usebar=1 oCMenu.barcolor="Navy" oCMenu.barwidth="100%" oCMenu.barheight="menu" oCMenu.barx=0 oCMenu.bary=0 oCMenu.barinheritborder=0 What to do with these bits of the code: oCMenu.usebar=xIf you want one, replace the x with a 1, if not, replace the x with a 0 oCMenu.barcolor="colour" You can specify the worded colour, e.g. Red, Green, Blue etc. or a hexadecimal colour, e.g. #FFFFFFF (white) oCMenu.barwidth="x" You can set it so that the menu has a background bar so many pixels across (in which case, replace ALL of the "x"), and thus, replace the "x" with a number of pixels, e.g. 200px - You can also use a percentage, and replace the "x" with, e.g. "100%" - You can (also) use the total width of your particular menu, and that means that the bar will stop when you reach the end of your menu, just change the "x" for: menu oCMenu.barheight="x" This is the height of the background bar. This can, as in the case of oCMenu.barwidth, be replaced by a percentage, pixel value or be set to be the menu height, follow the instructions for bar width (above for formatting) oCMenu.barx="x" This sets the left position of the bar, the default is 0, which is the left hand side of the screen, if you position your menu x pixels from the side of the screen, then you need to replace your "x" with a value, for example, if you put your menu 200px from the left, then you would replace your "x" with: 200 - this part of the script understands the numerical value, so the px is NOT needed. oCMenu.bary="x" As with the barx value, you need to set this one to equal your positioning of the menu (from top of the screen this time) oCMenu.barinheritborder="x" As written in the script, you can have the background bar inherit the border of the top-level menus. If you want it to, you set the "x" to be 1, if not, set it to 0 Placement Properties
oCMenu.rows=1
oCMenu.fromleft=20
oCMenu.fromtop=0
oCMenu.pxbetween=30
oCMenu.menuplacement=new Array('2%','20%','36%','57%','70%','80%')
The above code is somewhat important to how your menu will appear. oCMenu.rows=1If the value here is set to 1, then the menu will appear as a row across the screen, if it is set to 0, then the menu will appear as a column down the screen oCMenu.fromleft=20This gives you the number of pixels/percentage distance across the screen that your menu will start from, set this to be pixels or "percentage", i.e. if you use pixels, then use just a figure, e.g. 20, or if you use a percentage, put in quotation marks, e.g. '30%' oCMenu.fromtop=0This is similar to the above; just it positions your menu x pixels or 'y%' from the top of your screen oCMenu.pxbetween=30If you give a value here, then, you can set the next option below to 0, this is basically the number of pixels between the top-level text boxes oCMenu.menuplacement="something" This one is a little more complicated than the others in this section. First of all, did you give a pixel value for: oCMenu.pxbetween? If you did, simply set this one to 0, if not, then you will want to set the distances across the screen that the top-level boxes appear. In the example that the code in this tutorial was taken (menu 1), the boxes appear one after the other, but if you want a more professional look, you will want to put the boxes x pixels across the screen, at regular intervals, e.g. 100px, 200px, 300px etc. This is catered for in the code, to do this, you will need to put in the following: oCMenu.menuplacement=new Array('2%','20%','36%','57%','70%','80%')
This is the source code from another menu example. The new Array links the code to a particular part of the java script file. The values here are for percentages, although it is just a simple to use pixels, e.g.
oCMenu.menuplacement=new Array(0,100,200,300,400,500)
Another option is to have the menus aligned to one of the sides of the screen, the ONLY values that work, is if you replace the "something" bit with:
FOR COLUMNS align=left, align=right, align=center, align=bottom
FOR ROWS align=top, align=bottom, align=bottom, align=center, align=bottomcenterLevel 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: 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=111The 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=0The 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=0The "offset" of the submenus (x-axis) from the top-level item (value in pixels) oCMenu.level[0].offsetY=-1The "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 Setting the Menu VariablesThe Code in the original looks similar to:
oCMenu.makeMenu('top0',',' News','/news/index.asp',')
oCMenu.makeMenu('sub00','top0','Newest news','/news/index.asp')
oCMenu.makeMenu('sub001','sub00','- New DHTML API released')
oCMenu.makeMenu('sub002','sub00','- Explorer 7 is out')
oCMenu.makeMenu('sub003','sub00','- Opera 6 supports innerHTML')
oCMenu.makeMenu('sub01','top0','News archive','/news/archive.asp')
oCMenu.makeMenu('top1',',' Scripts','/scripts/index.asp')
oCMenu.makeMenu('sub10','top1','New scripts','/index.asp?show=new')
oCMenu.makeMenu('sub11','top1','All scripts','/index.asp?show=all')
oCMenu.makeMenu('sub12','top1','Popular scripts','/index.asp?show=pop')
oCMenu.makeMenu('top2',',' Articles','/articles/index.asp')
oCMenu.makeMenu('sub21','top2','Tutorials','/tutorials/index.asp')
oCMenu.makeMenu('sub210','sub21','New tutorials','/tutorials/index.asp')
oCMenu.makeMenu('sub211','sub21','Tutorials archive','/archive.asp')
oCMenu.makeMenu('sub22','top2','Other articles','/index.asp')
oCMenu.makeMenu('sub220','sub22','New articles','/index.asp?show=new')
oCMenu.makeMenu('sub221','sub22','Article archive','/archive.asp')
oCMenu.makeMenu('top3',',' Forums','/forums/')
oCMenu.makeMenu('sub30','top3','General','/forums/forum.asp')
oCMenu.makeMenu('sub31','top3','Scripts','/forums/forum.asp')
oCMenu.makeMenu('sub32','top3','Crossbrowser','/forums/forum.asp')
oCMenu.makeMenu('sub33','top3','CoolMenus','/forums/forum.asp')
oCMenu.makeMenu('sub34','top3','dhtmlcentral.com','/forums/forum.asp')
oCMenu.makeMenu('sub35','top3','Cool sites','/forums/forum.asp')
oCMenu.makeMenu('top5',',' CoolMenus','/coolmenus/index.asp')
oCMenu.makeMenu('sub50','top5','Examples','/examples.asp')
oCMenu.makeMenu('sub500','sub50','With frames','show=with')
oCMenu.makeMenu('sub501','sub50','Without frames','/show=without')
oCMenu.makeMenu('sub51','top5','Download','download.asp')
oCMenu.makeMenu('sub510','sub51','Download','download.asp',',150,40)
oCMenu.makeMenu('sub52','top5','Tutorial','tutorial.asp')
oCMenu.makeMenu('sub520','sub52','how to set','/tutorial.asp',',150,40)
oCMenu.makeMenu('sub53','top5','MenuMaker',',',0,0,',',',',',',
'window.open("/coolmenus/maker/","","width=800,height=600")')
oCMenu.makeMenu('sub54','top5','FAQ','/coolmenus/faq.asp')
oCMenu.makeMenu('sub55','top5','Help forum','/forums/forum.asp')
This is reasonably straightforward to understand. Each of the top menus take a value: oCMenu.makeMenu('top0',',' Whatever',') Where 'topX' is number of the top-level item The ' in-between the ,'s relate to one of the customisation of the script (to over-ride the defaults), which is explained in detail in the next step The ' Whatever' is the text that is shown in the box The next set of ' is again customisation of the script Each of the submenus takes the appearance of: oCMenu.makeMenu('sub00','top0','New Scripts','/scripts/index.asp?show=new') The 'sub10' value is the number of the menu i.e. 0 etc. followed by the number of the submenu at the top, i.e. 0 The 'top0' relates to the number of the menu that the sub-menu appears under 'New Scripts' is the text that goes into the box '/scripts/index.asp?show=new' is the link that the box makes The 3rd level of submenus are: oCMenu.makeMenu('sub0000','sub000','sub1/subsub1/test1.html','sub1/subsub1/test1.html') This example have been altered, but the submenu that is the one here has the following coding: 'sub0000' is the menu number, the first 0 is for the number of the top menu, the second is the number of the sub-menu (level 1), the third being the number of the level 2 menu 'sub000' is the sub-menu that this menu is relative to For each extra menu you add, you can follow the clear(er) instructions that are in the code itself. 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','<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. Putting Your Completed Menu On-lineThere are several things to remember when putting your menu on-line. Firstly you need to set the directory of where your java script is to be called from... < |