//** All Levels Navigational Menu- (c) Dynamic Drive DHTML code library: http://www.dynamicdrive.com //** Script Download/ instructions page: http://www.dynamicdrive.com/dynamicindex1/ddlevelsmenu/ //** Usage Terms: http://www.dynamicdrive.com/notice.htm //** Current version: 3.03 See changelog.txt for details if (typeof dd_domreadycheck=="undefined") //global variable to detect if DOM is ready var dd_domreadycheck=false var ddlevelsrightmenu={ enableshim: true, //enable IFRAME shim to prevent drop down menus from being hidden below SELECT or FLASH elements? (tip: disable if not in use, for efficiency) arrowpointers:{ downarrow: ["ddlevelsfiles/arrow-down.gif", 11,7], //[path_to_down_arrow, arrowwidth, arrowheight] rightarrow: ["/App_Themes/Brown.ar/Images/arrow.png", 5, 11], //[path_to_right_arrow, arrowwidth, arrowheight] showarrow: {toplevel: true, sublevel: true} //Show arrow images on top level items and sub level items, respectively? }, hideinterval: 200, //delay in milliseconds before entire menu disappears onmouseout. effects: {enableswipe: true, enableslide: true, enablefade: true, duration: 200}, httpsiframesrc: "blank.htm", //If menu is run on a secure (https) page, the IFRAME shim feature used by the script should point to an *blank* page *within* the secure area to prevent an IE security prompt. Specify full URL to that page on your server (leave as is if not applicable). ///http://no need to edit beyond here//////////////////// topmenuids: [], //array containing ids of all the primary menus on the page topitems: {}, //object array containing all top menu item links subuls: {}, //object array containing all ULs lastactivesubul: {}, //object object containing info for last mouse out menu item's UL topitemsindex: -1, ulindex: -1, hidetimers: {}, //object array timer shimadded: false, nonFF: !/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent), //detect non FF browsers ismobile:navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i) != null, //boolean check for popular mobile browsers getoffset:function(what, offsettype){ return (what.offsetParent)? what[offsettype]+this.getoffset(what.offsetParent, offsettype) : what[offsettype] }, getoffsetof:function(el){ el._offsets={left:this.getoffset(el, "offsetLeft"), top:this.getoffset(el, "offsetTop")} }, getwindowsize:function(){ this.docwidth=window.innerWidth? window.innerWidth-10 : this.standardbody.clientWidth-10 this.docheight=window.innerHeight? window.innerHeight-15 : this.standardbody.clientHeight-18 }, gettopitemsdimensions:function(){ for (var m=0; m0){ this.shimmy.topshim.style.left=scrollX+"px" this.shimmy.topshim.style.top=scrollY+"px" this.shimmy.topshim.style.width="99%" this.shimmy.topshim.style.height=topgap+"px" //distance from top window edge to top of menu item } if (bottomgap>0){ this.shimmy.bottomshim.style.left=scrollX+"px" this.shimmy.bottomshim.style.top=header._offsets.top + header._dimensions.h +"px" this.shimmy.bottomshim.style.width="99%" this.shimmy.bottomshim.style.height=bottomgap+"px" //distance from bottom of menu item to bottom window edge } } }, hideshim:function(){ this.shimmy.topshim.style.width=this.shimmy.bottomshim.style.width=0 this.shimmy.topshim.style.height=this.shimmy.bottomshim.style.height=0 }, buildmenu:function(mainmenuid, header, submenu, submenupos, istoplevel, dir){ header._master=mainmenuid //Indicate which top menu this header is associated with header._pos=submenupos //Indicate pos of sub menu this header is associated with header._istoplevel=istoplevel if (istoplevel){ this.addEvent(header, function(e){ ddlevelsrightmenu.hidemenu(ddlevelsrightmenu.subuls[this._master][parseInt(this._pos)].parentNode) }, "click") } this.subuls[mainmenuid][submenupos]=submenu header._dimensions={w:header.offsetWidth, h:header.offsetHeight, submenuw:submenu.offsetWidth, submenuh:submenu.offsetHeight} this.getoffsetof(header) submenu.parentNode.style.left=0 submenu.parentNode.style.top=0 submenu.parentNode.style.visibility="hidden" submenu.style.visibility="hidden" this.addEvent(header, function(e){ //mouseover event if (ddlevelsrightmenu.ismobile || !ddlevelsrightmenu.isContained(this, e)){ var submenu=ddlevelsrightmenu.subuls[this._master][parseInt(this._pos)] if (this._istoplevel){ ddlevelsrightmenu.css(this, "selected", "add") clearTimeout(ddlevelsrightmenu.hidetimers[this._master][this._pos]) } ddlevelsrightmenu.getoffsetof(header) var scrollX=window.pageXOffset? window.pageXOffset : ddlevelsrightmenu.standardbody.scrollLeft var scrollY=window.pageYOffset? window.pageYOffset : ddlevelsrightmenu.standardbody.scrollTop var submenurightedge=this._offsets.left + this._dimensions.submenuw + (this._istoplevel && dir=="topbar"? 0 : this._dimensions.w) var submenubottomedge=this._offsets.top + this._dimensions.submenuh //Sub menu starting left position var menuleft=(this._istoplevel? this._offsets.left + (dir=="sidebar"? this._dimensions.w : 0) : this._dimensions.w) if (submenurightedge-scrollX>ddlevelsrightmenu.docwidth){ menuleft+= -this._dimensions.submenuw + (this._istoplevel && dir=="topbar" ? this._dimensions.w : -this._dimensions.w) } submenu.parentNode.style.left=menuleft+"px" //Sub menu starting top position var menutop=(this._istoplevel? this._offsets.top + (dir=="sidebar"? 0 : this._dimensions.h) : this.offsetTop) if (submenubottomedge-scrollY>ddlevelsrightmenu.docheight){ //no room downwards? if (this._dimensions.submenuh0){ //if user clicks on a header (instead of a menu item) e.preventDefault() e.stopPropagation() } } } }, (this.ismobile)? "click" : "mouseover") this.addEvent(header, function(e){ //mouseout event var submenu=ddlevelsrightmenu.subuls[this._master][parseInt(this._pos)] if (this._istoplevel){ if (!ddlevelsrightmenu.isContained(this, e) && !ddlevelsrightmenu.isContained(submenu.parentNode, e)) //hide drop down div if mouse moves out of menu bar item but not into drop down div itself ddlevelsrightmenu.hidemenu(submenu.parentNode) } else if (!this._istoplevel && !ddlevelsrightmenu.isContained(this, e)){ ddlevelsrightmenu.hidemenu(submenu.parentNode) } }, "mouseout") }, setopacity:function(el, value){ el.style.opacity=value if (typeof el.style.opacity!="string"){ //if it's not a string (ie: number instead), it means property not supported el.style.MozOpacity=value try{ if (el.filters){ el.style.filter="progid:DXImageTransform.Microsoft.alpha(opacity="+ value*100 +")" } } catch(e){} } }, showmenu:function(header, submenu, dir){ if (this.effects.enableswipe || this.effects.enablefade){ if (this.effects.enableswipe){ var endpoint=(header._istoplevel && dir=="topbar")? header._dimensions.submenuh : header._dimensions.submenuw submenu.parentNode.style.width=submenu.parentNode.style.height=0 submenu.parentNode.style.overflow="hidden" } if (this.effects.enablefade){ submenu.parentNode.style.width=submenu.offsetWidth+"px" submenu.parentNode.style.height=submenu.offsetHeight+"px" this.setopacity(submenu.parentNode, 0) //set opacity to 0 so menu appears hidden initially } submenu._curanimatedegree=0 submenu.parentNode.style.visibility="visible" submenu.style.visibility="visible" clearInterval(submenu._animatetimer) submenu._starttime=new Date().getTime() //get time just before animation is run submenu._animatetimer=setInterval(function(){ddlevelsrightmenu.revealmenu(header, submenu, endpoint, dir)}, 10) } else{ submenu.parentNode.style.visibility="visible" submenu.style.visibility="visible" } }, revealmenu:function(header, submenu, endpoint, dir){ var elapsed=new Date().getTime()-submenu._starttime //get time animation has run if (elapsed0) //account for page being in IFRAME, in which above doesn't fire in IE this.addEvent(window, function(){functionref()}, "load"); }, init:function(mainmenuid, dir){ this.standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body this.topitemsindex=-1 this.ulindex=-1 this.topmenuids.push(mainmenuid) this.topitems[mainmenuid]=[] //declare array on object this.subuls[mainmenuid]=[] //declare array on object this.hidetimers[mainmenuid]=[] //declare hide entire menu timer this.enableshim = (this.ismobile)? false : this.enableshim //disable shim if mobile browser if (this.enableshim && !this.shimadded){ this.shimmy={} this.shimmy.topshim=this.addshimmy(document.body) //create top iframe shim obj this.shimmy.bottomshim=this.addshimmy(document.body) //create bottom iframe shim obj this.shimadded=true } var menubar=document.getElementById(mainmenuid) var alllinks=menubar.getElementsByTagName("a") var shelldivs=[] this.getwindowsize() for (var i=0; i