//**** DHTML Web Menu, (c) 2004, OpenCube Inc., - www.opencube.com **** // // DO NOT STOP HERE! - THIS TEMPLATE FILE CONTAINS ACTUAL MENU SETTINGS FOR sample.html // // We recommend deleting the quick tips section below and other comments before // using this template on your web site to help reduce the total file size of your menu. /* Welcome to the DHTML Web Pointer Menu, below are some quick tips to help accelerate the learning curve. Don't be fooled by the tiny code size of the menu, its packed with almost every customization option imaginable. OpenCube created the internet's first commercial drop down menu using Java in 1996 and has provided navigation solutions to over 50,000 commercial web site customers. Feel free to contact technical support if you are having difficulty reaching your implementation guidelines. Support Contacts & FAQs: http://www.opencube.com/support.html QUICK TIPS... -Menu text, URLs, icon images, sizing and orientation, plus more is all defined in this text file using the settings below. -Menu styles (colors, fonts, margins, etc.) are all defined in the menu_styles.css text file. -Several global settings which apply to all the web menus on your html page are locted in the head section of the html source (see sample.html source) -The menu is placed in the page with a simple JavaScript tag which acts as an inline element (same as positioning an image tag... use tables, div’s, spacer gifs, etc.). See the sample.html source for a first hand look at the positioning tag. -There are no limits, use as many main menu items, sub menu items, levels, and icons as you need, the self explanatory indexing scheme is used below to create the sample menu. -Just as you can use numerical index values with some settings in this file to customize a specific sub menu group (i.e. this.is_horizontal0 = true) you can also use '_main' to refer to the main menu group. -To hopefully simplify matters, all supporting files for this sample (open sample.html in a browser to see the menu this settings file creates) are in this folder. -Typically the biggest confusion isn't how to customize the menu, rather how to get it into your web site. Start by taking a thorough look at the source of the sample.html page. There are two basic things to do, copy the head section to your documents head (see sample.html source) and copy the positioning tag to the exact location in your source were you wish the menu to appear. To tweak your folder locations do the following... Copy all the supporting script files to your desired script folder, then tell the menu were this folder is using the cdd__codebase setting in the head section of the html. Next, tell the menu were this data file is located. First with the JavaScript ‘src’ statement at the top of the head tag in the html source. Last with the cdd__database setting a little further down (next to the codebase setting). Terminate both the codebase and database values with a '/' character (i.e. cdd__codebase = "myscriptfolder/") -At this point the menu should be working in your html page, if not, 99% of the time its a simple typo in one of your settings causing the problem, everything must be exact or the entire menu will not function (test often, and be cautious). -You can comment out any indexed item in this file to disable it by using forward slashes... //everything here is ignored - works per line -Do not comment out default settings (non indexed), you may disable the menu. -You can target your links to a frame, new window, parent frame, etc. The most common request is how to target a specifically sized window, see the first sub menu items link in this file for a first hand look. (target a specific frame by setting the target value to the name of your frame) -All image references and URL links are defined relative to the location of this settings file on your site rather than the html page containing the menu (you can also use absolute links, http://...). This ensures accurate relative links, regardless of you html pages folder locations. -The reaction speed of the sub menu display is customizable using the cdd__showhide_delay, which is located in the global setting section within the html page. -To create multiple menus on one page... Make a duplicate of the entire menu data section in this document and give the 'cdd_menu0' function name (located on the first line of the data section) a new index number ('cdd_menu1'). When positioning, tell the web menu which one to use by adjusting the index value in the statement (example below uses 1)... -There is a special settings file for Netscape 4 to replicate the look of your menu in that browser. Open 'menu_ns4_styles.js' and adjust to your specifications, the look of almost any menu can be duplicated and functionality is identical. -Use IE as your initial testing ground for the menu, then test and adjust the special settings as needed for other browsers. By default the menu will function 100% identical in all browsers. Depending on your implementation the look may vary slightly for Netscape and opera, use the special settings mentioned above to exact the look in all browsers. -You can use any valid CSS settings beyond what is shown in the styles file for the menu except for dimension and position settings (width, height, top, left). All dimensions and positioning of the sub menus and main menu group is defined in this file. -Only the width of both horizontal menu items and vertical menu groups may be defined (in this file). The heights of you items are automatically determined by the padding defined in the styles file, plus the size of the fonts or graphics you are using. -You can use HTML or plain text for any menu item, if using HTML keep the entire statement on one line and convert all double quotes to single quotes (see sample below...) this.item = "sample item text" -Make all your sub menus optionally horizontal by setting the 'is_horitonzal' default parameter value below to 'true'. For a vertical main menu use, 'is_horizontal_main = false'. Any combination of these parameters plus specific sub menu settings (i.e. 'is_horizontal1 = false') may be used to create any type or combination of layouts, this basic principal applies to all the settings in the file. -The cdd_pixel.gif file must be located in the same folder as the supporting script files. This image file is used by the menu to position itself as an inline element in non-IE browsers. */ function cdd_menu0(){//////////////////////////Start Menu Data///////////////////////////////// /********************************************************************************************** Menu 0 - General Settings and Menu Structure **See the menu_styles.css file for additional customization options** ***********************************************************************************************/ um0http = 1 /*--------------------------------------------- Icon Images ---------------------------------------------*/ //Define two types of unlimited icon images below, associate any image //with any item using both the 'icon_rel' and 'icon_abs' parameter in the //sub menu structure section (set to the index number of the icon image) //Relative positioned icon images (flow with main menu or sub item text) this.rel_icon_image0 = "graphics/purple_bullet.gif" this.rel_icon_rollover0 = "graphics/blue_bullet.gif" this.rel_icon_image_wh0 = "12,8" this.rel_icon_image1 = "graphics/purple_bullet.gif" this.rel_icon_rollover1 = "graphics/blue_bullet.gif" this.rel_icon_image_wh1 = "13,8" this.pointer_image_xy = "-9,0" //x and y offset of pointer image this.rel_icon_image2 = "graphics/purple_bullet.gif" this.rel_icon_rollover2 = "graphics/blue_bullet.gif" this.rel_icon_image_wh2 = "12,8" this.rel_icon_image3 = "graphics/filler.png" this.rel_icon_rollover3 = "graphics/filler.png" this.rel_icon_image_wh3 = "13,8" this.pointer_image_xy = "-9,0" //x and y offset of pointer image this.rel_icon_image4 = "graphics/adobe.gif" this.rel_icon_rollover4 = "graphics/adobe.gif" this.rel_icon_image_wh4 = "12,8" this.rel_icon_image5 = "graphics/filler.png" this.rel_icon_rollover5 = "graphics/filler.png" this.rel_icon_image_wh5 = "13,8" this.pointer_image_xy = "-9,0" //x and y offset of pointer image //Absolute positioned icon images (coordinate positioned - relative to //right top corner of the menu item displaying the icon.) this.abs_icon_image0 = "graphics/filler.png" this.abs_icon_rollover0 = "graphics/filler.png" this.abs_icon_image_wh0 = "8,10" this.abs_icon_image_xy0 = "-9,5" /*--------------------------------------------- Pointers & Dividers ---------------------------------------------*/ //Pointers are optional, specific settings override the default pointer. //The x and y offset of each pointer image is relative to the upper left //corner of the menu group using the pointer. //Pointer Settings //Divider Settings this.use_divider_caps = false //cap the top and bottom of each menu group this.divider_width = 1 //applies to horizontal menus only this.divider_height = 0 //applies to vertical menus only //available specific settings this.use_divider_capsX_X = true this.divider_widthX = 20 this.divider_heightX = 20 /*--------------------------------------------- Menu Orientation and Dimensions ---------------------------------------------*/ //All values below are defined in pixel units. Only the //width of items and menu groups may be defined, heights //are automatically determined by the font size and padding //values below. See the menu_styles.css file for additional //border color and style settings. this.is_horizontal = false //applies to all menu groups this.is_horizontal_main = true //applies to main group only this.menu_width = 175 //applies to vertical menus this.menu_width_items = 120 //applies to items in a horizontal menu //Padding Values this.menu_padding_main = "0,0,0,0" //top, right, bottom, left this.menu_padding_sub = "5,5,5,5" this.item_padding_main = "2,2,2,2" this.item_padding_sub = "3,5,3,0" //Border Sizing this.menu_border_main = 1 this.menu_border_sub = 1 this.item_border_main = 0 this.item_border_sub = 0 //Specific Item Setting Examples (change 'X' to appropriate index value) this.is_horizontalX = true this.menu_widthX = 200 this.menu_width_itemsX = 100 this.menu_width_itemX_X = 100 this.menu_padding_subX = "10,5,10,5" this.item_padding_mainX = "10,5,10,5" this.item_padding_subX_X = "10,5,10,5" this.menu_border_subX = 1 this.item_border_mainX = 1 this.item_border_subX_X = 1 /*--------------------------------------------- Optional Style Sheet Class Name Association ---------------------------------------------*/ //Use the following section to optionally associate menu groups //and menu items with existing CSS classes from your site. //global class names //this.main_menu_class = "myclassname" //this.main_items_class = "myclassname" //this.main_items_rollover_class = "myclassname" //this.sub_menu_class = "myclassname" //this.sub_items_class = "myclassname" //this.sub_items_rollover_class = "myclassname" //specific menu items //this.item_classX_X = "myclassname" //this.item_rollover_classX_X = "myclassname" /*--------------------------------------------- Exposed Menu Events - Custom Script Attachment ---------------------------------------------*/ this.show_menu = "" this.hide_menu = "" //available specific settings this.show_menuX = "alert('show id')" this.hide_menuX = "alert('hide id')" //use the following to execute a JavaScript statement for any menu item //change 'X' below, to the menu items index number. this.clickX = "alert('Sample Click Code - Exposed Menu Event')" /*------------------------------------------------ Browser Workarounds -------------------------------------------------*/ //Opera 5 & 6 - alternate HTML display (Opera 7 displays menu 100%) this.opera_old_display_html = "Please update your opera browser."; /*--------------------------------------------- Main Menu Group and Items ---------------------------------------------*/ //Main Menu Group 0 this.item0 = "ABOUT" this.menu_width_item0 = 105 this.item_padding_main0 = "2,1,2,8" this.item1 = "EQUIPMENT" this.menu_width_item1 = 145 this.item_padding_main1 = "2,1,2,20" this.url1 = "../../equipment.html" this.item2 = "." this.item_rollover_class2 = "transparent" this.menu_width_item2 = 320 this.item_padding_main2 = "2,1,2,60" this.url2 = "../../index.html" this.item3 = "TRAVEL" this.menu_width_item3 = 140 this.item_padding_main3 = "2,1,2,8" this.url3 = "../../travel.html" this.item4 = "TRAINING" this.menu_width_item4 = 60 this.item_padding_main4 = "2,1,2,8" this.url4 = "../../training.html" /*--------------------------------------------- Sub Menu Group and Items ---------------------------------------------*/ //Sub Menu 0 _0 this.menu_xy0 = "-135,25" this.menu_width0 = 145 this.item0_0 = "Our Store" this.item0_1 = "Our Staff" this.item0_2 = "Contact Info & Hours" this.item0_3 = "Pools, Dive Sites, Maps" this.item0_4 = "Clubs & Groups" this.item0_5 = "Links" this.item0_6 = "Events" this.icon_rel0_0 = 2 this.icon_rel0_1 = 2 this.icon_rel0_2 = 2 this.icon_rel0_3 = 2 this.icon_rel0_4 = 2 this.icon_rel0_5 = 2 this.icon_rel0_6 = 2 this.url0_0 = '../../retail.html' this.url0_1 = '../../staff.html' this.url0_2 = '../../contact.html' this.url0_5 = '../../links.html' this.url0_6 = '../../events.html' //Sub Menu 0 _1 this.menu_xy1 = "-125,25" this.menu_width1 = 105 this.item1_0 = "Rentals" this.item1_1 = "Service" this.item1_2 = "Service FAQ" this.icon_rel1_0 = 2 this.icon_rel1_1 = 2 this.icon_rel1_2 = 2 this.url1_0 = '../../rental.html' this.url1_1 = '../../service.html' this.url1_2 = '../../faq.html' //Sub Menu 4 this.menu_xy4 = "-95,25" this.menu_width4 = 145 this.item4_0 = "Levels of Awareness" this.item4_1 = "Medical/Admin Forms" this.item4_2 = "Discover/Refresh" this.item4_3 = "Youth Diving" this.item4_4 = "Open Water - Beginner" this.item4_5 = "Nitrox/Enriched Air" this.item4_6 = "Advanced Open Water" this.item4_7 = "Rescue/Prepared Diver" this.item4_8 = "Specialties" this.item4_9 = "Professional Level" this.item4_10 = "Rebreathers" this.item4_11 = "Cavern and Cave" this.item4_12 = "Technical Diving" this.item4_13 = "DAN Training" this.item4_14 = "PADI eLearning" this.item4_15 = "Student Feedback" this.icon_rel4_0 = 2 this.icon_rel4_1 = 2 this.icon_rel4_2 = 2 this.icon_rel4_3 = 2 this.icon_rel4_4 = 2 this.icon_rel4_5 = 2 this.icon_rel4_6 = 2 this.icon_rel4_7 = 2 this.icon_rel4_8 = 2 this.icon_rel4_9 = 2 this.icon_rel4_10 = 2 this.icon_rel4_11 = 2 this.icon_rel4_12 = 2 this.icon_rel4_13 = 2 this.icon_rel4_14 = 2 this.icon_rel4_15 = 2 this.url4_0 = '../../awareness.html' this.url4_1 = '../../med.html' this.url4_2 = '../../discover.html' this.url4_3 = '../../youth.html' this.url4_5 = '../../nitrox.html' this.url4_6 = '../../advanced.html' this.url4_7 = '../../prepared.html' this.url4_8 = '../../specialty.html' this.url4_9 = '../../professional.html' this.url4_11 = '../../cavern.html' this.url4_12 = '../../technical.html' this.url4_14 = '../../elearning.html' this.url4_15 = '../../feedback.html' //Sub Menu 0 _3 this.menu_xy0_3 = "-10,0" this.menu_width0_3 = 147 this.item0_3_0 = "Pool: GW Rec Ctr" this.item0_3_1 = "Dive: Millbrook Quarry" this.item0_3_2 = "Dive: Lake Rawlings" this.item0_3_3 = "Dive: Bainbridge" this.icon_rel0_3_0 = 2 this.icon_rel0_3_1 = 2 this.icon_rel0_3_2 = 2 this.icon_rel0_3_3 = 2 this.url_target0_3_0 = "_blank" this.url_target0_3_1 = "_blank" this.url_target0_3_2 = "_blank" this.url_target0_3_3 = "_blank" this.url0_3_0 = '../../pdf/gwrc.pdf' this.url0_3_1 = '../../pdf/millbrook.pdf' this.url0_3_2 = 'http://www.lakerawlings.com' this.url0_3_3 = 'http://www.divebsc.com' //Sub Menu 0 _4 this.menu_xy0_4 = "-108,18" this.menu_width0_4 = 240 this.item0_4_0 = "Venture Crew 301" this.item0_4_1 = "Diving Divas" this.item0_4_2 = "Underwater Adventure Seekers" this.item0_4_3 = "Atlantis Rangers" this.item0_4_4 = "Patowmack Divers Dive Club" this.item0_4_5 = "Magothy River Association" this.item0_4_6 = "National Aquarium in Baltimore" this.item0_4_7 = "Scottish Country Dancing/ScubaDance" this.item0_4_8 = "Maritime Archaeological & Historical Society" this.item0_4_9 = "PEW Environment Group" this.item0_4_10 = "The Ocean Conservancy" this.item0_4_11 = "The Olney Scuba Adventure Dive Club" this.item0_4_12 = "Fathom Divers Dive Club" this.item0_4_13 = "Military Historical Tours" this.icon_rel0_4_0 = 2 this.icon_rel0_4_1 = 2 this.icon_rel0_4_2 = 2 this.icon_rel0_4_3 = 2 this.icon_rel0_4_4 = 2 this.icon_rel0_4_5 = 2 this.icon_rel0_4_6 = 2 this.icon_rel0_4_7 = 2 this.icon_rel0_4_8 = 2 this.icon_rel0_4_9 = 2 this.icon_rel0_4_10 = 2 this.icon_rel0_4_11 = 2 this.icon_rel0_4_12 = 2 this.icon_rel0_4_13 = 2 this.url_target0_4_0 = "_self" this.url_target0_4_1 = "_self" this.url_target0_4_2 = "_blank" this.url_target0_4_3 = "_blank" this.url_target0_4_4 = "_blank" this.url_target0_4_5 = "_blank" this.url_target0_4_6 = "_blank" this.url_target0_4_7 = "_blank" this.url_target0_4_8 = "_blank" this.url_target0_4_9 = "_blank" this.url_target0_4_10 = "_blank" this.url_target0_4_11 = "_blank" this.url_target0_4_12 = "_blank" this.url_target0_4_13 = "_blank" this.url0_4_0 = '../../venture_crew.html' this.url0_4_1 = '../../dive_divas.html' this.url0_4_2 = 'http://www.uasdivers.org' this.url0_4_3 = 'http://www.atlantisrangers.org' this.url0_4_4 = 'http://www.dcdiver.com' this.url0_4_5 = 'http://www.magothyriver.org/Help_the_Magothy.html' this.url0_4_6 = 'http://www.aqua.org' this.url0_4_7 = 'http://www.rscds-greaterdc.org' this.url0_4_8 = 'http://www.mahsnet.org' this.url0_4_9 = 'http://www.endoverfishing.org/splash/' this.url0_4_10 = 'http://www.oceanconservancy.org/site/PageServer?pagename=home' this.url0_4_11 = 'http://olneyscubaadventure.pages.qpg.com' this.url0_4_12 = 'http://www.fathomdivers.org' this.url0_4_13 = 'http://www.miltours.com' //Sub Menu 3 _0 this.menu_xy3 = "-135,25" this.menu_width3 = 95 this.item3_0 = "Bonaire is #1" this.icon_rel3_0 = 2 this.url3_0 = '../../bonaire.html' //Sub Menu 4_4 this.menu_xy4_4 = "-250,0" this.menu_width4_4 = 125 this.item4_4_0 = "Open Water Pool" this.item4_4_1 = "Open Water Dive" this.icon_rel4_4_0 = 2 this.icon_rel4_4_1 = 2 this.url4_4_0 = '../../ow.html' this.url4_4_1 = '../../owd.html' //Sub Menu 4_10 this.menu_xy4_10 = "-155,20" this.menu_width4_10 = 175 this.item4_10_0 = "Rebreather Training" this.item4_10_1 = "Semi-Closed Certification" this.icon_rel4_10_0 = 2 this.icon_rel4_10_1 = 2 this.url4_10_0 = '../../rebreather.html' this.url4_10_1 = '../../semiclosed_rebreather.html' //Sub Menu 4_13 this.menu_xy4_13 = "-240,0" this.menu_width4_13 = 250 this.item4_13_0 = "On-Site Neurological Assessment for Divers" this.item4_13_1 = "Diving Emergency Management Provider" this.icon_rel4_13_0 = 2 this.icon_rel4_13_1 = 2 this.url4_13_0 = '../../dan1.html' this.url4_13_1 = '../../dan2.html' //Sub Menu 4_11 this.menu_xy4_11 = "-255,0" this.menu_width4_11 = 130 this.item4_11_0 = "Cavern Diver" this.item4_11_1 = "Introduction to Cave" this.icon_rel4_11_0 = 2 this.icon_rel4_11_1 = 2 this.url4_11_0 = '../../caverndive.html' this.url4_11_1 = '../../caveintro.html' //Sub Menu 4_12 this.menu_xy4_12 = "-255,0" this.menu_width4_12 = 130 this.item4_12_0 = "Beginner Technical" this.item4_12_1 = "Advanced Technical" this.icon_rel4_12_0 = 2 this.icon_rel4_12_1 = 2 this.url4_12_0 = '../../beginnertech.html' this.url4_12_1 = '../../advancedtech.html' }///////////////////////// END Menu Data /////////////////////////////////////////