//========================================================================== // DEFINING AND INITIALIZING THE GLOBAL VARIABLES //========================================================================== /* Defining the online and offline url parameters. Here we need to know the root in order to properly configure the menu item links */ var rootofflineURL = "http://www.brass-key.com/"; // Be sure to include the trailing slash var rootonlineURL = "http://www.brass-key.com/"; // Be sure to include the trailing slash /* Now we need to know where you are keeping the menu's function files such as ie.js, ns.js, etc... These values can be absolute or relative. The value of these variables will be placed in front of the filename at the time the file is called into action, to create a completae path to the file */ var functionPath_offline = "scripts/"; // Be sure to include the trailing slash var functionPath_online = "http://www.brass-key/scripts/"; // Be sure to include the trailing slash // The value of this variable just decides which of the two variables to use above var functionMODE = "offline"; // offline or online // Are you using frames? 1 = yes, 0 = no var useFrames = 0; // If yes, what is the name of the frame that the submenus will be popping up in? var frameName = "mainFrameName"; /* The most commonly used options are 0 for a horizontal Top Item layout and 3 where the Top Items are stacked one on top of the other... */ var submenuAlignment = 0; /* Alignment VALUE options: submenuAlignment 0 = BOTTOM 1 = TOP 2 = RIGHT 3 = LEFT The results of the next two variables will vary depending on the value of the topGroup_alignment variable--- FIRST the menu is positioned based on the topGroup_alignment variable, and THEN the topGroup_fromleft and topGroup_fromtop values are applied to the menus position. Play around with these values until it is positioned correctly. */ var topGroup_fromleft = 363; // Offset distance of the top group from the left edge of the browser after the alignment value is applied var topGroup_fromtop = 25; // Distance from top of browser window in px var topGroup_spacebetween = 0; // Horiz space between each nav category var page_boundry_check = 1; // Do you want the submenus to detect whether or not they are going to popup outside of the browsers window area? 1=yes and 0=no var topGroup_alignment = 0; /* Alignment VALUE options: topGroup_alignment 0 = vertical TOP and horizontal LEFT 1 = vertical TOP and horizontal CENTER 2 = vertical TOP and horizontal RIGHT 3 = vertical CENTER and horizontal LEFT 4 = ABSOLUTE CENTER 5 = vertical CENTER and horizontal RIGHT 6 = vertical BOTTOM and horizontal LEFT 7 = vertical BOTTOM and horizontal CENTER 8 = vertical BOTTOM and horizontal RIGHT */ var AutoClose = 1000; // The amount of time in milliseconds before the menus go away after MOUSEOUT /* The folowing two variables force the menu to follow the user as he/she scrolls either horizontally or vertically. 1 = yes, and 0 = no. (((NOTE: if you are using frames, be sure to set these variables to 1 !!! ))) */ var verticalScroll = 0; var horizontalScroll = 0; /* Intitializing the array for the top menu items and defining the settings relating specifically to the top menu items */ var TopItems = new Array; TopItems.height = 80; // The height of the top menu items TopItems.width = 80; // The width of each top item TopItems.padding = 0; // The distance in pixels between the display text and the top edge of the item block TopItems.useborder = 0; // Do you want to use a border on the Top menu Items-- 1=yes 0=no TopItems.bordercolor = ""; // If so, what color is the border TopItems.borderwidth = 0; // Border width in pixels TopItems.stackem = 0; // Stack the top level items? 1 = yes 0 - no (Hint: Any time you change the value of this variable, the variable submenuAlignment will also have to be changed.) TopItems.font_family = "Arial"; // font-family TopItems.font_size = 12; // font-size -- Internet Explorer -- PIXELS TopItems.NSpoint_size = 9; // point-size -- Netscape -- POINTS TopItems.font_style = "none"; // font-style -- Internet Explorer TopItems.text_decoration = "none"; // text-decoration TopItems.font_weight = "normal"; // font-weight TopItems.font_coloroff = "000000"; // font-color -- The OFF state TopItems.font_coloron = "#FFDE00"; // font-color -- The ON state TopItems.bgcoloroff = "#ffffff"; // background-color -- The OFF state TopItems.bgcoloron = "#666666"; // background-color -- The ON state TopItems.cursor = "hand"; // cursor -- arrow OR hand /* Intitializing the array for the sublevel menu items and defining the settings relating specifically to the all sublevel menu items */ var MenuItems = new Array; MenuItems.height = 18; // The height of the top menu items MenuItems.width = 230; // The width of each top item MenuItems.padding = 0; // The distance in pixels between the display text and the top edge of the item block MenuItems.useborder = 1; // Do you want to use a border on the Sub Menu Groups -- 1=yes 0=no MenuItems.bordercolor = "3e3e7f"; // If so, what color is the border MenuItems.borderwidth = 1; // Border width in pixels MenuItems.stackem = 1; // Stack the sub level items? 1 = yes 0 - no // CSS related settings for the sublevels of the menu --- given appropriate CSS values MenuItems.font_family = "verdana"; // font-family MenuItems.font_size = 11; // font-size -- Internet Explorer -- PIXELS MenuItems.NSpoint_size = 9; // point-size -- Netscape -- POINTS MenuItems.font_style = "bold"; // font-style -- Internet Explorer MenuItems.text_decoration = "none"; // text-decoration MenuItems.font_weight = "normal"; // font-weight MenuItems.font_coloroff = "000063"; // font-color -- The OFF state MenuItems.font_coloron = "#000063"; // font-color -- The ON state MenuItems.bgcoloroff = "#ffffff"; // background-color -- The OFF state MenuItems.bgcoloron = "#fbe0b4"; // background-color -- The ON state MenuItems.cursor = "hand"; // cursor -- arrow OR hand //========================================================================== // DEFINING THE MENU ITEMS AND ITS HIERARCHY //========================================================================== /* SYNTAX: TopItems[0] = new Array("MENU-TO-DISPLAY","TEXT-TO-DISPLAY","URL-TO-EXECUTE-ONCLICK","TARGET","LEFT-IMAGE","RIGHT-IMAGE","X-OFFSET","Y-OFFSET","ITEM-WIDTH","ITEM-HEIGHT","IMAGE-OFF","IMAGE-ON","BACKGROUND-COLOR-OFF","BACKGROUND-COLOR-ON","TEXT-COLOR-OFF","TEXT-COLOR-ON","ONCLICK-EVENT","ONMOUSEOVER-EVENT","ONMOUSEOUT-EVENT"); Variables for each TOP MENU ITEMS: -- MENU-TO-DISPLAY: This is the SUBMENU-NAME of the grouping of menu items that you want to pop up when this menu item is moused over. -- TEXT-TO-DISPLAY: The text you want displayed in this menu item. -- URL-TO-EXECUTE-ONCLICK: The page you want this item to link to upon being clicked. -- 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) -- LEFT-IMAGE: The source path of an icon image to place on the LEFT of the menu item followed by a caret delimited list of values - width and height of the image. SYNTAX: "path/to/image.file^image_width^image_height" -- RIGHT-IMAGE: The source path of an icon image to place on the RIGHT of the menu item (like an arrow or something) followed by a caret delimited list of values - width and height of the image. SYNTAX: "path/to/image.file^image_width^image_height" LEAVE THESE TWO VARIABLES SET TO "-1" FOR NOW...I WILL HAVE THEM WORKING IN THE NEXT UPDATE @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ -- X-OFFSET: The number of pixels to offset the X axis of the menu that is popping up (from the left) -- Y-OFFSET: The number of pixels to offset the Y axis of the menu that is popping up (from the top) @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ -- ITEM-WIDTH: Over ride the default settings above by defining the WIDTH of the menu item here. -- ITEM-HEIGHT: Over ride the default settings above by defining the HEIGHT in pixels of the menu item here. -- IMAGE-OFF: Instead of using text for the and solid color background for this menu item, you may use an image for the item itself. Define the source path of the OFF state image here. -- IMAGE-ON: Same as IMAGE-OFF only this is the source path of the ON state image for this item. -- BACKGROUND-COLOR-OFF: Over ride the default settings above by defining the background color in the OFF state here for this item. -- BACKGROUND-COLOR-ON: Over ride the default settings above by defining the background color in the ON state here for this item. -- TEXT-COLOR-OFF: Over ride the default settings above by defining the text color in the OFF state here for this item. -- TEXT-COLOR-ON: Over ride the default settings above by defining the text color in the ON state here for this item. -- ONCLICK-EVENT: Execute a javascript command here when this menu item is clicked upon. -- ONMOUSEOVER-EVENT: Execute a javascript command here when this menu item is moused over. -- ONMOUSEOUT-EVENT: Execute a javascript command here when the mouse moves off of this item. If you decide that all you want to specify for a menu item is: "MENU-TO-DISPLAY", "TEXT-TO-DISPLAY", and "TEXT-COLOR-ON", you still have to show empty place holders between items like this: TopItems[0] = new Array("Fruit","Fruit","","","","","","","","","","","","","","#45a45c"); Trailing place holders are not necessary. */ /*SYNTAX: TopItems[0] = new Array("MENU-TO-DISPLAY","TEXT-TO-DISPLAY","URL-TO-EXECUTE-ONCLICK","TARGET","LEFT-IMAGE","RIGHT-IMAGE","X-OFFSET","Y-OFFSET","ITEM-WIDTH","ITEM-HEIGHT","IMAGE-OFF","IMAGE-ON","BACKGROUND-COLOR-OFF","BACKGROUND-COLOR-ON","TEXT-COLOR-OFF","TEXT-COLOR-ON","ONCLICK-EVENT","ONMOUSEOVER-EVENT","ONMOUSEOUT-EVENT"); */ TopItems[0] = new Array("Products"," products","../products/index.html","","","","0","0","99","21","../images/nav_products_off.gif","../images/nav_products_on.gif"); TopItems[1] = new Array("collectors"," collectors","../club/index.html","","","","0","0","102","21","../images/nav_club_off.gif","../images/nav_club_on.gif"); TopItems[2] = new Array("about"," about","../about/index.html","","","","0","0","98","21","../images/nav_about_off.gif","../images/nav_about_on.gif"); TopItems[3] = new Array("contact"," contact","../contact/info.html","","","","0","0","97","21","../images/nav_contact_off.gif","../images/nav_contact_on.gif"); /**** NOTE: Notice the non-breaking spaces ( ) used in all of the the Top and Menu Items. The padding is, for now, only being applied to the distance from the top edge of the menu item area. This is on my list to work on for the next update. But for now, the non-breaking spaces are being used to pad the left side. */ /* MenuItems are a little different that TopItems. The easiest way to try and describe the logic going on here is what I call Radio Button Logic... In HTML Radio Buttons are grouped together via a "group name" and each Radio Button is given a value of its own. Applying that logic here, think of each menu item as a radio button. The menu items are are grouped together into submenus via a MENU-NAME. Then each menu item is given a value --- which is actually the MENU-NAME of another sub menu group --- which is the group that pops up when that menu item is moused over. Using this method of organization, it is now possible to have any sub menu group pop up in multiple places. :) SYNTAX: MenuItems[0] = new Array("SUBMENU-NAME","MENU-TO-DISPLAY","TEXT-TO-DISPLAY","URL-TO-EXECUTE-ONCLICK","TARGET","LEFT-IMAGE","RIGHT-IMAGE","X-OFFSET","Y-OFFSET","ITEM-WIDTH","ITEM-HEIGHT","IMAGE-OFF","IMAGE-ON","BACKGROUND-COLOR-OFF","BACKGROUND-COLOR-ON","TEXT-COLOR-OFF","TEXT-COLOR-ON","ONCLICK-EVENT","ONMOUSEOVER-EVENT","ONMOUSEOUT-EVENT"); Variables for each TOP MENU ITEMS: (** means that they have to be defined with a value other than "" !) ** SUBMENU-NAME: The name of the submenu group that this item belongs to. This must be unique for each grouping of menu items. Do not use spaces or strange characters in this one! In fact, the first character can not be a number, it needs to be a letter. -- MENU-TO-DISPLAY: This is the SUBMENU-NAME of the grouping of menu items that you want to pop up when this menu item is moused over. -- TEXT-TO-DISPLAY: The text you want displayed in this menu item. -- URL-TO-EXECUTE-ONCLICK: The page you want this item to link to upon being clicked. -- 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) -- LEFT-IMAGE: The source path of an icon image to place on the LEFT of the menu item followed by a caret delimited list of values - width and height of the image. SYNTAX: "path/to/image.file^image_width^image_height" -- RIGHT-IMAGE: The source path of an icon image to place on the RIGHT of the menu item (like an arrow or something) followed by a caret delimited list of values - width and height of the image. SYNTAX: "path/to/image.file^image_width^image_height" LEAVE THESE TWO VARIABLES SET TO "-1" FOR NOW...I WILL HAVE THEM WORKING IN THE NEXT UPDATE @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ -- X-OFFSET: The number of pixels to offset the X axis of the menu that is popping up (from the left) -- Y-OFFSET: The number of pixels to offset the Y axis of the menu that is popping up (from the top) @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ \ -- ITEM-WIDTH: Over ride the default settings above by defining the WIDTH of the menu item here. -- ITEM-HEIGHT: Over ride the default settings above by defining the HEIGHT in pixels of the menu item here. -- IMAGE-OFF: Instead of using text for the and solid color background for this menu item, you may use an image for the item itself. Define the source path of the OFF state image here. -- IMAGE-ON: Same as IMAGE-OFF only this is the source path of the ON state image for this item. -- BACKGROUND-COLOR-OFF: Over ride the default settings above by defining the background color in the OFF state here for this item. -- BACKGROUND-COLOR-ON: Over ride the default settings above by defining the background color in the ON state here for this item. -- TEXT-COLOR-OFF: Over ride the default settings above by defining the text color in the off state here for this item. -- TEXT-COLOR-ON: Over ride the default settings above by defining the text color in the on state here for this item. -- ONCLICK-EVENT: Execute a javascript command here when this menu item is clicked upon. -- ONMOUSEOVER-EVENT: Execute a javascript command here when this menu item is moused over. -- ONMOUSEOUT-EVENT: Execute a javascript command here when the mouse moves off of this item. If you decide that all you want to specify "MENU-TO-DISPLAY", "TEXT-TO-DISPLAY", and "ITEM-WIDTH", you still have to show empty place holders between items like this: MenuItems[0] = new Array("Fruit","subApples","","","","","","","300"); Trailing empty place holders are not necessary. Notice the index number with every menu item. It is not important that you keep these in any specific order, but only that each menu item is has a unique number of its own and CONSECUTIVELY ORDERED (it will throw an error if you skip a number). However it does help to keep sanity while setting up a complex hierarchy if you do keep the items numbered in some kind of order. For the ultimate efficiency, it is recommend that you start with 0 and number them consecutively. */ /**** NOTE: Notice the non-breaking spaces ( ) used in all of the the Top and Menu Items. The padding is, for now, only being applied to the distance from the top edge of the menu item area. This is on my list to work on for the next update. But for now, the non-breaking spaces are being used to pad the left side. */ /* SYNTAX: MenuItems[0] = new Array("SUBMENU-NAME","MENU-TO-DISPLAY","TEXT-TO-DISPLAY","URL-TO-EXECUTE-ONCLICK","TARGET","LEFT-IMAGE","RIGHT-IMAGE","X-OFFSET","Y-OFFSET","ITEM-WIDTH","ITEM-HEIGHT","IMAGE-OFF","IMAGE-ON","BACKGROUND-COLOR-OFF","BACKGROUND-COLOR-ON","TEXT-COLOR-OFF","TEXT-COLOR-ON","ONCLICK-EVENT","ONMOUSEOVER-EVENT","ONMOUSEOUT-EVENT"); */ // products MenuItems[0] = new Array("Products","","  View Collectibles","../products/index.html","_self","","","-1","-1"); MenuItems[1] = new Array("Products","subProductsa","  Dolls & Collectibles","","_self","","../images/blk_arrow.gif^16^16","-1","-1"); MenuItems[2] = new Array("Products","subProductsb","  Ornaments","","_self","","../images/blk_arrow.gif^16^16","-1","-1"); MenuItems[3] = new Array("Products","subProductsc","  Seasonal","","_self","","../images/blk_arrow.gif^16^16","-1","-1"); //Products/Productsa MenuItems[4] = new Array("subProductsa","","  Disney Princess Signature Series","../products/disney2002.html","_self","","","-1","-1","","","","","","",""); MenuItems[5] = new Array("subProductsa","","  Disney Princess 2nd Series","../products/disney2003.html","_self","","","-1","-1"); MenuItems[6] = new Array("subProductsa","","  Disney Princess Holiday Series","../products/disneyholiday.html","_self","","","-1","-1"); MenuItems[7] = new Array("subProductsa","","  Disney Princess Holiday Jewel Series","products/disneyjewel2003.html","_self","","","-1","-1"); MenuItems[8] = new Array("subProductsa","","  Disney Princess Royal Holiday Series","products/disneyroyal2003.html","_self","","","-1","-1"); MenuItems[9] = new Array("subProductsa","","  Disney Trio Series","products/disneytrio.html","_self","","","-1","-1"); MenuItems[10] = new Array("subProductsa","","  Orient Express","../products/retired/orient.html","_self","","","-1","-1"); MenuItems[11] = new Array("subProductsa","","  White Dove","../products/retired/whitedove.html","_self","","","-1","-1"); MenuItems[12] = new Array("subProductsa","","  Sweet N' Sporty™ ","../products/retired/sweet.html","_self","","","-1","-1"); MenuItems[13] = new Array("subProductsa","","  Jane Austen","../products/retired/janeaustin.html","_self","","","-1","-1"); //Products/Productsb MenuItems[14] = new Array("subProductsb","","  BK Collectibles™ ","../products/bkcollection.html","_self","","","-1","-1"); MenuItems[15] = new Array("subProductsb","","  Rudolph® the Red-Nosed Reindeer","../products/christmastreasures_rudolph.html","_self","","","-1","-1"); MenuItems[16] = new Array("subProductsb","","  How The Grinch Stole Christmas","../products/christmastreasures_grinch.html","_self","","","-1","-1"); MenuItems[17] = new Array("subProductsb","","  Santa Claus is Comin' to Town","../products/christmastreasures_santa.html","_self","","","-1","-1"); MenuItems[18] = new Array("subProductsb","","  Frosty the Snowman","../products/christmastreasures_frosty.html","_self","","","-1","-1"); //Products/Productsc MenuItems[19] = new Array("subProductsc","","  Disney Villages","../products/disneyvillage.html","_self","","","-1","-1"); MenuItems[20] = new Array("subProductsc","","  Snow Flake Falls™ ","../products/retired/snowflake.html","_self","","","-1","-1"); // collectors MenuItems[21] = new Array("collectors","","  Overview","../Collectors1_1/newmember.html","_self","","","-1","-1"); MenuItems[22] = new Array("collectors","","  Registration","../Collectors1_1/agechecker.aspx","_self","","","-1","-1"); // about MenuItems[23] = new Array("about","","  Overview","../about/index.html","_self","","","-1","-1"); MenuItems[24] = new Array("about","","  Company History","../about/history.html","_self","","","-1","-1"); MenuItems[25] = new Array("about","","  In the News","../about/press.html","_self","","","-1","-1"); MenuItems[26] = new Array("about","","  Frequently Asked Questions","../about/faq.html","_self","","","-1","-1"); // Standard browser check .... leave this and do not modify ... it is used throughout the script .... // I advise building additional variables rather than trying to modify the existing ones. var BV=parseFloat(navigator.appVersion.indexOf("MSIE")>0?navigator.appVersion.split(";")[1].substr(6):navigator.appVersion); var BN=navigator.appName; var VER=navigator.appVersion; var DOM=document.getElementById?true:false; var IsWin=(navigator.userAgent.indexOf('Win')!=-1); var IE55=(VER.indexOf("MSIE 5.5"))>-1 && DOM?true:false; var IsMac=(navigator.userAgent.indexOf('Mac')!=-1); var OP=(navigator.userAgent.indexOf('Opera')!=-1&&BV>=4)?true:false; var NS=(BN.indexOf('Netscape')!=-1&&(BV>=4&&BV<5)&&!OP)?true:false; var SM=(BN.indexOf('Netscape')!=-1&&(BV>=5)||OP)?true:false; var IE=(BN.indexOf('Explorer')!=-1&&(BV>=4)||SM)?true:false; // 5.1 changes begin here...... if(BV>=4){ if(functionMODE=="offline") var directory = functionPath_offline; else var directory = functionPath_online; document.write(""); } else { /* Edit the value of this msg variable to say what you would like to tell people who are using a browser that is not compatible with this menu. */ var msg = "The browser you are using is not compatible with the pop up menu system used on this page. It is recommended that you at least Internet Explorer v4.0 or Netscape Navigator v4.0 to navigate this website."; alert(msg); } /*Another consideration you may want to make is that some people cruise the net with JavaScript turned OFF in their browser. If JavaScript is turned off in their browser, they will also not be able to view the menu. It is a good idea to have another minor form of navigation for these folks. Such as departmental links in a footer or somewhere else on the page. Remember that professional web design makes an attempt to accommodate all users that might browsing the site. If you have any other ideas to further increase the compatibility of this script, please let me know. I will give it my best shot. --- Greg Landers */