//Menu object creation /*---------------------------------------------------------------- *Menu properties Additional info *---------------------------------------------------------------- * oCMenu.frames =0 Set this property to 1 if you are using frames for your menus (if you have your main items and sub items in different frames that is). If you have your entire menu in ONE frame set this to 0. *---------------------------------------------------------------- * oCMenu.pxBetween=15 Used to set how much space you want between your top items. This can be specified in percentage or pixels. Remember to use quotes around percentage values, f.e. oCMenu.pxBetween="20%". * Note: the value of this property is ignored if "menuPlacement" is specified. *---------------------------------------------------------------- * oCMenu.fromLeft=5 This controls the left position of the menu. Can be specified in percentage or in pixels. If "menuPlacement" is used and the menu is in rows (rows=1) this property is ignored. *---------------------------------------------------------------- * oCMenu.fromTop=80 This sets the top position of the menu. It can be specified in percentage or in pixels. If "menuPlacement" is used (set to something else then 0) and the menu is in columns (rows=0) then this property is ignored. *---------------------------------------------------------------- * oCMenu.rows=0 This rows property is for the top level. If you set this to 1 you will get the top menu items placed beside each other. If you set it to 0 the items will align below each other. *---------------------------------------------------------------- * oCMenu.menuPlacement="0" Values supported: "right", "center", "bottom" and "bottomcenter". You can also set them directly in pixels or in percentage (remember to use the ' ' around the numbers). *---------------------------------------------------------------- * oCMenu.offlineRoot="" If you choose to have this code inside a menu.js file, or if you're using frames you must set these two variables. The offlineRoot variable is the actual path to the directory where you menu.js file is locally. Start with file:/// and use slashes, no backward slashes and end with a slash. *---------------------------------------------------------------- * oCMenu.onlineRoot="" The value of the "offlineRoot" property should be the path to the ROOT of your web. Example: my website is hosted at geocities, my url is: http://www.geocities.com/myWeb/ * My onlineRoot would then be: oCMenu.onlineRoot="/myWeb/" * If you have your own domain name you just set this value to "/". *---------------------------------------------------------------- * oCMenu.resizeCheck=1 This is a boolean, set to 1 it will refresh the menu on page resize in IE and NS6 and reload the page in the rest of the browsers, 0 to set it off. *---------------------------------------------------------------- * oCMenu.wait=1000 This controls how long the script should wait before hiding the open menu items after the mouse has left them. Value is in milliseconds (1000 = 1 second). *---------------------------------------------------------------- * oCMenu.fillImg="cm_fill.gif" This property is new in this version. Netscape 4 and Opera now uses a transparent image that cove the menu item which makes the "hand" cursor work on the entire element. This also helps because now the events are set on the image instead of the layers, this way is more stable in NS4. * The value here is the full path relative from the ROOT of your web (or the onlineRoot and offlineRoot property values) to your fill image. This means that if you have the fill image in the images directory you should set this to "images/cm_fill.gif" *---------------------------------------------------------------- * oCMenu.zIndex=0 The value of this variable controls what zIndex the menu should "start" on. The first element of the menu (the backgroundbar) will have this zIndex and all other elements will have a higher value. This means that if you have another script on the page which has layers you want to appear "behind" this one, set the zIndex of the menu to something higher then the zIndex those elements have. * Background bar properties Additional info *---------------------------------------------------------------- * oCMenu.useBar=1 If set to 1 the script will make a background bar for the script, set to 0 it will not make a bar. *---------------------------------------------------------------- * oCMenu.barWidth="menu" The width of the background bar. Set this to "menu" if you want it to be the same width as the menu (this will change to match the border if you have one). This can be specified also in pixels (without quotation marks). *---------------------------------------------------------------- * oCMenu.barHeight="menu" The height of the background bar. Set this to "menu" if you want it to be the same height as the menu. *---------------------------------------------------------------- * oCMenu.barClass="clBar" The value of this property should be a CSS class that will be used for the background bar. * Note: The class for the background bar must contain: "width:10; height:10; position:absolute". If you specify a background color remember to add layer-background-color with the same value for NS4. *---------------------------------------------------------------- * oCMenu.barX=0 The left and top positions of the bar. Set these to "menu" if you want them to be the same as the left and top position of the menu (this will change to match the border if you have one). * oCMenu.barY=0 *---------------------------------------------------------------- * oCMenu.barBorderX=0 These control the horizontal and vertical borders of the background bar. Specified in pixels. * oCMenu.barBorderY=0 *---------------------------------------------------------------- * oCMenu.barBorderClass="" The value of this property should be a CSS class that will be the class for the backgroundbar border. *---------------------------------------------------------------- * * Level properties Additional info * *---------------------------------------------------------------- * oCMenu.level[0]=new cm_makeLevel() Before you can set values to level properties you have to create the level. *---------------------------------------------------------------- * oCMenu.level[0].width=99 The width property set the width of all the items on the current level. You can set this for each individual menu item as well to override the level variable. *---------------------------------------------------------------- * oCMenu.level[0].height=18 The height property set the height of all the items on the current level. You can set this for each individual menu item as well to override the level variable. *---------------------------------------------------------------- * oCMenu.level[0].regClass="clLevel0" The value of this property should be a CSS class that will be used for all items in the level. You can override this value on each individual item if you choose to. In this class you set all things like background colors, font sizes and stuff like that. *---------------------------------------------------------------- * oCMenu.level[0].overClass="clLevel0over" This is basically the same as "regClass" only this sets the styles that all items in this level will have when the mouse is over one of them. This can also be overridden on each individual item. *---------------------------------------------------------------- * oCMenu.level[0].borderX=0 These are the horizontal and vertical borders of the current level specified in pixels. * oCMenu.level[0].borderY=0 *---------------------------------------------------------------- * oCMenu.level[0].borderClass="clLevel0border" The value of this property should be a CSS class that will be used for the borders for this level. *---------------------------------------------------------------- * oCMenu.level[0].offsetX=1 These in co-operation with the align property control how the subitems of items on this level are placed. * oCMenu.level[0].offsetY=5 *---------------------------------------------------------------- * oCMenu.level[0].rows=0 You can specify it for each level and for each item as well. That means that you can have some levels with horizontal sub items and some with vertical sub items. This property will in this case set the value of the sub items of this level. *---------------------------------------------------------------- * oCMenu.level[0].arrow=0 This gives you the ability to add an arrow that will automatically appear on the right of the item if the item has submenus. The value must be an image file, and it must be specified with the full path from the ROOT of your web. If you do not specify this the level will not use this feature. * How to set the variable: myCoolMenu.level[x].arrow="images/my_arrow_image.gif" *---------------------------------------------------------------- * oCMenu.level[0].arrowWidth=0 These are the the width and the height of the arrow image. These have to be manually set (if you are using arrows) or Explorer and Opera might give some strange results. Specified in pixels. * oCMenu.level[0].arrowHeight=0 *---------------------------------------------------------------- * oCMenu.level[0].align="right" The value of this property controls the alignment of the subitems of this level. All items (except the top items) will be positioned relative to the parent element. The align property in co-operation with offsetX and offsetY spesifies the position of the subitems. * Values supported: "bottom", "top", "left", "right", "righttop", "lefttop", "bottomleft" and "topleft". *---------------------------------------------------------------- */ oCMenu=new makeCM("oCMenu") //Making the menu object. Argument: menuname oCMenu.frames=0 //Menu properties oCMenu.pxBetween=0 oCMenu.fromLeft=17 oCMenu.fromTop=1 oCMenu.rows=1 oCMenu.menuPlacement="left" oCMenu.offlineRoot="" oCMenu.onlineRoot="" oCMenu.resizeCheck=1 oCMenu.wait=500 oCMenu.fillImg="cm_fill.gif" oCMenu.zIndex=400 //Background bar properties oCMenu.useBar=0 oCMenu.barWidth="menu" oCMenu.barHeight="menu" oCMenu.barClass="clBar" oCMenu.barX=0 oCMenu.barY="menu" oCMenu.barBorderX=0 oCMenu.barBorderY=0 oCMenu.barBorderClass="" //Level properties - ALL properties have to be specified in level 0 oCMenu.level[0]=new cm_makeLevel() //Add this for each new level oCMenu.level[0].width=0 oCMenu.level[0].height=0 oCMenu.level[0].regClass="clLevel0" oCMenu.level[0].overClass="clLevel0over" oCMenu.level[0].borderX=0 oCMenu.level[0].borderY=0 oCMenu.level[0].borderClass="clLevel0border" oCMenu.level[0].offsetX=-5 oCMenu.level[0].offsetY=0 oCMenu.level[0].rows=0 oCMenu.level[0].align="bottom" //dynamic effect (controllable for each level) //oCMenu.level[0].clippx=2 //oCMenu.level[0].cliptim=2 //special animation filters (IE5.5+ only, controllable for each level) //oCMenu.level[0].filter="progid:DXImageTransform.Microsoft.Fade(duration=0.5)" //Other special animation filters (IE5.5+ only, controllable for each level) //oCMenu.level[0].filter="progid:DXImageTransform.Microsoft.Wheel(duration=0.5,spokes=5)" //oCMenu.level[0].filter="progid:DXImageTransform.Microsoft.Barn(duration=0.5,orientation=horizontal)" //oCMenu.level[0].filter="progid:DXImageTransform.Microsoft.Blinds(duration=0.5,bands=5)" //oCMenu.level[0].filter="progid:DXImageTransform.Microsoft.CheckerBoard(duration=0.5)" //oCMenu.level[0].filter="progid:DXImageTransform.Microsoft.Fade(duration=0.5)" //oCMenu.level[0].filter="progid:DXImageTransform.Microsoft.GradientWipe(duration=0.5,wipeStyle=0)" //oCMenu.level[0].filter="progid:DXImageTransform.Microsoft.Iris(duration=0.5,irisStyle=STAR)" //oCMenu.level[0].filter="progid:DXImageTransform.Microsoft.Iris(duration=0.5,irisStyle=CIRCLE)" //oCMenu.level[0].filter="progid:DXImageTransform.Microsoft.Pixelate(duration=0.5,maxSquare=40)" //oCMenu.level[0].filter="progid:DXImageTransform.Microsoft.Wheel(duration=0.5,spokes=5)" //oCMenu.level[0].filter="progid:DXImageTransform.Microsoft.RandomDissolve(duration=0.5)" //oCMenu.level[0].filter="progid:DXImageTransform.Microsoft.Spiral(duration=0.5)" //oCMenu.level[0].filter="progid:DXImageTransform.Microsoft.Stretch(duration=0.5,stretchStyle=push)" //oCMenu.level[0].filter="progid:DXImageTransform.Microsoft.Strips(duration=0.5,motion=rightdown)" //EXAMPLE SUB LEVEL[1] PROPERTIES - You have to specify the properties you want different from LEVEL[0] - If you want all items to look the same just remove this oCMenu.level[1]=new cm_makeLevel() //Add this for each new level (adding one to the number) oCMenu.level[1].width=oCMenu.level[0].width-4 oCMenu.level[1].height=18 oCMenu.level[1].regClass="clLevel1" oCMenu.level[1].overClass="clLevel1over" oCMenu.level[1].borderX=1 oCMenu.level[1].borderY=1 oCMenu.level[1].align="left" oCMenu.level[1].arrow="/images/arrow.gif" oCMenu.level[0].arrowWidth=10 oCMenu.level[0].arrowHeight=10 oCMenu.level[1].offsetX=0 oCMenu.level[1].offsetY=-1 oCMenu.level[1].borderClass="clLevel1border" //dynamic effect //oCMenu.level[1].clippx=2 //oCMenu.level[1].cliptim=2 //special animation filters //oCMenu.level[1].filter="progid:DXImageTransform.Microsoft.Fade(duration=0.5)" //EXAMPLE SUB LEVEL[2] PROPERTIES - You have to specify the properties you want different from LEVEL[1] OR LEVEL[0] - If you want all items to look the same just remove this /*oCMenu.level[2]=new cm_makeLevel() //Add this for each new level (adding one to the number) oCMenu.level[2].width=150 oCMenu.level[2].height=18 oCMenu.level[2].offsetX=0 oCMenu.level[2].offsetY=0 oCMenu.level[2].regClass="clLevel2" oCMenu.level[2].overClass="clLevel2over" oCMenu.level[2].borderClass="clLevel2border" */ /****************************************** Menu item creation: myCoolMenu.makeMenu(name, parent_name, text, link, target, width, height, regImage, overImage, regClass, overClass , align, rows, nolink, onclick, onmouseover, onmouseout) The variables for each menu item have to be specified. You have to include the following parameters: name: f.e. sub00. This is a unique name for the item. If not specified the script will automatically make a name for the item. Please note though that you have to put in a name if you have subitems on this item because you have to tell the subitems to use this item as it's parent. parent_name: f.e. top0. The name of the menu item you want this to connect to. text: f.e. PlanMagic. The text you want in the item (except if you use images). link: f.e. http://planmagic.com. The page you want the item to link to. target: The target window or frame you want the link to go to. Default is the same window if you're not using frames, and the main frame is the default if you're using frames. width: f.e. 140. The width of the element. If not specified it will get the default width from the higher level. height: The height of the element. If not specified it will get the default height from the higher level. regImage: The "off" image for an element if you want to use images. overImage: The image that appears onMouseOver if using images. regClass: This is the same as "level[x].regClass" only that this specifies a CSS class for this item only. If you have one item that you want to look differently from the rest of them you set that here. overClass: This controls the look of this item when it's mouseovered. If not specified it will inherit the value from the level. align: This is used to override the level variable, if you want the subitems of this item to align differently then the rest of the items in this level specify it here. rows: This sets the rows of the subitems below this item only. Used if you want to override the level value. nolink: If you have items that are meant to be info items only or something like that you can set this value to 1 and the item will not get a hand cursor and/or a link (the events will not work either). onclick: If you want something to happen when the element is clicked (different from going to a link) you can 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. *************************************/ oCMenu.makeMenu('aboutus','','','http://www.cachelake.com/fnimall/aboutus.phtml','',77,72,'/images/Layout/navigation/aboutUsOFF.gif','/images/Layout/navigation/aboutUsON.gif', '', '') oCMenu.makeMenu('policy','aboutus','Policy Information','/fnimall/policies.phtml','',125,20,'','','clLevel1', 'clLevel1over') oCMenu.makeMenu('ourstore','','','http://www.cachelake.com/fnimall/our_store.phtml','',66,72,'/images/Layout/navigation/ourStoreOFF.gif', '/images/Layout/navigation/ourStoreON.gif') oCMenu.makeMenu('breakfast','ourstore','Breakfast Items','/fnimall/category/Breakfast/listing.phtml','',125,20,'','','clLevel1', 'clLevel1over') oCMenu.makeMenu('quick_lunches','ourstore','Quick Lunches','/fnimall/category/QuickLunches/listing.phtml','',125,20,'','','clLevel1', 'clLevel1over') oCMenu.makeMenu('meat_entrees','ourstore','Meat Entreés','/fnimall/category/MeatEntrees/listing.phtml','',125,20,'','','clLevel1', 'clLevel1over') oCMenu.makeMenu('vegetarian_entrees','ourstore','Vegetarian Entreés','/fnimall/category/VegetarianEntrees/listing.phtml','',125,20,'','','clLevel1', 'clLevel1over') oCMenu.makeMenu('side_dinners','ourstore','Side Dishes','/fnimall/category/SideDish/listing.phtml','',125,20,'','','clLevel1', 'clLevel1over') oCMenu.makeMenu('desserts','ourstore','Desserts','/fnimall/category/Desserts/listing.phtml','',125,20,'','','clLevel1', 'clLevel1over') oCMenu.makeMenu('panbreads','ourstore','Frying Pan Breads','/fnimall/category/FryinPan/listing.phtml','',125,20,'','','clLevel1', 'clLevel1over') oCMenu.makeMenu('sweetpotato','ourstore','Sweet Potatoes','/fnimall/category/SweetPotatoes/listing.phtml','',125,20,'','','clLevel1', 'clLevel1over') oCMenu.makeMenu('wildrice','ourstore','Wild Rice','/fnimall/category/WildRice/listing.phtml','',125,20,'','','clLevel1', 'clLevel1over') oCMenu.makeMenu('soups_chowders','ourstore','Soups, Chowders, & Salads','/fnimall/category/Soups/listing.phtml','',125,30,'','','clLevel1', 'clLevel1over') oCMenu.makeMenu('meats','ourstore','Cold Prep','/fnimall/category/ColdPrep/listing.phtml','',125,20,'','','clLevel1', 'clLevel1over') oCMenu.makeMenu('bowls','ourstore','Bowls','/fnimall/category/Bowls/listing.phtml','',125,20,'','','clLevel1', 'clLevel1over') oCMenu.makeMenu('one_stop_shop','ourstore','One Stop Shop','/fnimall/onestop.phtml','',125,20,'','','clLevel1', 'clLevel1over') oCMenu.makeMenu('overstock','ourstore','Overstock Outlet','/fnimall/overstock.phtml','',125,20,'','','clLevel1', 'clLevel1over') oCMenu.makeMenu('overstock_outlet','','','http://www.cachelake.com/fnimall/overstock.phtml','',113,72,'/images/Layout/navigation/overstock_off.gif', '/images/Layout/navigation/overstock_on.gif', '', '') oCMenu.makeMenu('bulk_dealers','','','http://www.cachelake.com/fnimall/bulk_deal_fund.phtml','',96,72,'/images/Layout/navigation/bulk_dealersOFF.gif', '/images/Layout/navigation/bulk_dealersON.gif') oCMenu.makeMenu('fundraising','','','http://www.cachelake.com/fnimall/bulk_deal_fund.phtml#fundraisers','',92,72,'/images/Layout/navigation/fundRaisingOFF.gif', '/images/Layout/navigation/fundRaisingON.gif') oCMenu.makeMenu('testimonials','','','http://www.cachelake.com/fnimall/testimonials.phtml','',93,72,'/images/Layout/navigation/shippingInfoOFF.gif', '/images/Layout/navigation/shippingInfoON.gif') oCMenu.makeMenu('contactus','','','http://www.cachelake.com/fnimall/contact_us.phtml','',78,72,'/images/Layout/navigation/contactUsOFF.gif','/images/Layout/navigation/contactUsON.gif', '', '') oCMenu.makeMenu('faqs','','','/faq.phtml','',52,72,'/images/Layout/navigation/faqsOFF.gif','/images/Layout/navigation/faqsON.gif','', '') oCMenu.makeMenu('home','','','/fnimall/','',52,72,'/images/Layout/navigation/homeOFF.gif','/images/Layout/navigation/homeON.gif','', '') //Leave this line - it constructs the menu oCMenu.construct()