//Written by Evan Kirkconnell. ekirkco@uark.edu //This menu is intended to be absolutely free and the source should always remain //totally open. var menu_globals=new Array(); //this array holds info about general menu setup var menu_styles=new Array(); //this array holds styles used in menu var menu_array=new Array(); //this array holds all menu item names, targets, and styles var menu_divs=new Array(); //this array holds all divs used in the menu.(in the order they are inserted into html by the addDivs() function var menu_selects=new Array(); //this array holds all used in the html. Selects are always top-level in IE, this is used to make them disappear when the menu is being used. var menu_timeoutID; //used to make the menu collapse properly when the mouse is moved off. ////////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////// //Set up menu appearance and position menu_globals.alignment = 0; //Menu alignment, 0 for a column of main menu items, 1 for a row of main menu items menu_globals.mainMenuTop = 200; //top offset of menu menu_globals.mainMenuLeft = 30; //left offset of menu menu_globals.mainMenuHeight = 40; //Height in pixels of each main menu item menu_globals.mainMenuTextColor = "#404040"; //Text color of main menu menu_globals.mainMenuBGColor = "#ffffff"; //Background color of main menu menu_globals.mainMenuTextOver = "#0000fa"; //Main menu text color when mouse is over menu_globals.mainMenuBGOver = "#ffff00"; //Main menu background color when mouse is over menu_globals.mainMenuBorder = 0; //Main menu container border width menu_globals.mainMenuBorderColor = "#000000";//Main menu container border color menu_globals.mainVerticalOffset = 1; //Vertical offset of top-level submenus(positive numbers move them down) menu_globals.mainHorizontalOffset = -1; //Horizontal offset of top-level submenus(positive numbers move them to the right) menu_globals.menuBorder = 0; //Menu item border width menu_globals.menuBorderColor = "#000000"; //Menu item border color menu_globals.subMenuBorder = 0; //Submenu container border color menu_globals.subMenuBorderColor = "#000000"; //Submenu container border color menu_globals.subMenuHeight = 40; //Submenu item height menu_globals.subMenuTextColor = "#ffffff"; //Submenu default text color menu_globals.subMenuBGColor = "#ffffff"; //Submenu default background color menu_globals.subMenuTextOver = "#0000fa"; //Text color of submenu when mouse is over menu_globals.subMenuBGOver = "#0000ab"; //Background color of submenu when mouse is over menu_globals.subPic = ""; //picture for menu arrow(displayed when submenu exists) menu_globals.subPicHeight = 0; //height of arrow image in pixels(adjustable) menu_globals.subPicWidth = 5; //width of arrow image in pixels(adjustable) menu_globals.verticalOffset = 0; //Vertical offset of submenus(positive numbers move them down) menu_globals.horizontalOffset = -2; //Horizontal offset of submenus(positive numbers move them right) menu_globals.mouseTimeout = 800; //Time(in milliseconds) to delay before closing all submenus when mouse moves out menu_globals.hideSelects = 1; //Set to non-zero value if there are dropdown menus that overlap submenus ////////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////// //Set up styles that can be used for any menu item see http://www.w3.org/TR/REC-CSS1 // and http://www.w3.org/TR/REC-CSS2 menu_styles[0] = "font-size: 10pt;font-weight:lighter;"; menu_styles["huge"] = "font-size: 100%;"; ////////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////// //Customize menu items //first array is array of names, second is array of targets, third is array of styles. Names are required, //targets and styles are not. However, when not present, you still need the commas that come BEFORE what IS defined. //Styles are numbers that correspond to the number of the style defined above. //EXAMPLE: SOME targets and SOME syles: ["name1","name2","name3"],["target1",,"target3"],[,,0] //EXAMPLE: NO targets and NO styles: ["name1","name2"],[],[] //EXAMPLE: NO targets and SOME styles: ["name1","name2"],[],[0,0] //EXAMPLE: SOME targets and NO styles: ["name1","name2","name3"],["target1","target2"] //NOTE: Prefixing the target with a colon will make it open in a new window(pop-up) //Main //menu_array[0]=new menuItem(0,["",""," Dogs "," Vegetables "," Other "],["menu.html",1,2,3],[0,0,0,0]); //Fruit //menu_array[1]=new menuItem(1,[" Apples "," Oranges "],[2,"orange.jpg"],[0,0]); //Dogs //menu_array[2]=new menuItem(2,[" Wikipedia "," Google "],["http://en.wikipedia.org/wiki/Dog",":http://images.google.com/images?svnum=10&hl=en&lr=&q=dog&btnG=Search"],[0,0]); //Vegetables //menu_array[3]=new menuItem(3,[" Green Beans "," Squash "],["greenbeans.html","squash.html"],[0,0]); ////////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////// //This is a javascript class. It's used to store information about each menu item and each menu container. //This can be somewhat confusing as the variable 'menu' is an array of objects of this class. Also //Variables 'name' and 'target' within this class are arrays. Thus, we have the syntax: menu_array[x].name[y] //In english, this represents the name of the y'th element of the x'th menu. Also, menu_array[x].width holds //the width of the x'th submenu. Please note that this is not an array because each submenu only has //one width. function menuItem(num,name,target, style){ this.num=num; this.name=name; //name is an array of this menu item's names if(typeof(target) == "undefined"){ alert("Invalid menu, no target for menu "+num); }else{ this.target = target; } this.target=target; //target is an array of this menu item's targets if(typeof(style) == "undefined"){ alert("Invalid menu, no style for menu "+num); }else{ this.style=style; } if(num==0){ //divPos holds the div number(in order) of the container div for the menu this is not an array. this.divPos=0; }else{ this.divPos=menu_array[num-1].divPos+menu_array[num-1].size+2; } this.width=0; //this will be automatically set later this.height=0; //this will be automatically set later this.size=name.length; }