Homepage Menu DropMenu Homepage
Overview Menu DropMenu Overview F-A-Q Script Goals Known Issues Browser Check
Instructions Menu Step 1 - The Script Step 2 - The Variables Step 3 - Menu Header Step 4 - The Menus Step 5 - Style Sheet
Download Menu Download Dropmenu DropMenu PageMaker
Contact Menu Contact Privacy Statement
Partner Sites Menu WebDevTips andys onestop

Step 2 - The Variables

As mentioned previously, I have tried to keep the variables needing set to a bare minimum. Hopefully, I have achieved that. Take a look at the vars.js I use on this site

var howmanymenus = 4; // 0=1 1=2 2=3 etc 
var menunames = new Array(howmanymenus); 
menunames[0] = "menu"; 
menunames[1] = "menu2"; 
menunames[2] = "menu3"; 
menunames[3] = "menu4"; 
menunames[4] = "menu5"; 
//widths of navbar menu headers 
var navwidth = new Array(howmanymenus); 
navwidth[0] = 70; 
navwidth[1] = 70; 
navwidth[2] = 90; 
navwidth[3] = 90; 
navwidth[4] = 70; 
var cellpad=2; 
var effectopen = 5; //set to -1 for no effects 
var effectclose = 4; //set to -1 for no effects 
var buttonwidth = 150; //how wide is each menu Item 
var buttonheight = 21; //how high is each menu Item 
var menudir ="hor"; //horizontal or vert  use "hor" or "ver"

var path_to_stylesheet = "PATH TO YOUR MAIN STYLE SHEET";

//these are for news only
var newstimer=8; //in seconds
var newseffect=12;//open and close effect
var newswide=500;
var newshigh=100;

Not that huge and very easy to follow. Let's Explain them.

howmanymenus - how many menus there is( 0=1 1=2 2=3 etc)
menunames - this array contains the names you have given to the menus
navwidth - this array is for the main menu - this allows us to have different sizes of 'button'
cellpad - if you have cellpadding in your table set this the same as that value - this opens the menus at the correct position e.g. if the table for the nav bar = cellpadding=10 then set cellpad=10; if cellpadding=2 then cellpad=2; :) easy
effectopen - this is where you set the effect you want when the menu opens (IE Only) See usable values and effects below
effectclose - this is where you set the effect you want when the menu closes (IE Only) See usable values and effects below
buttonwidth - how wide is each menu Item used to space the hor menus
buttonheight - how high is each menu Item used to space the ver menus
menudir - horizontal or vertical use "hor" or "ver"
path_to_stylesheet - Set this to point to your main style sheet. The first style sheet that is loaded by the browser is the non javascript style - only once javascript is detected and the browser detected as ok then we load the main style sheet - (the script takes care of this so theres no need to worry about it - just set the path in vars.js and it will work)
newstimer - If you want to display a news header this sets how long it displays for
newseffect - transition filter to apply to the news header
newswide - set the width of the news layer
newshigh - set the height of the news layer

MSIE transition values and effects

0 Box in : 1 Box out
2 Circle in : 3 Circle out
4 Wipe up: 5 Wipe down
6 Wipe right : 7 Wipe left
8 Vertical blinds : 9 Horizontal blinds
10 Checkerboard across : 11 Checkerboard down
12 Random dissolve
13 Split vertical in : 14 Split vertical out
15 Split horizontal in : 16 Split horizontal out
17 Strips left down : 18 Strips left up
19 Strips right down : 20 Strips right up
21 Random bars horiz : 22 Random bars vert
23 Random
previous - next
If you like our script, please rate it!



Valid HTML 4.01! Valid CSS!