//** 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 ddlevelsmenu={ 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: ["./images/arrow-down.png", 12,12], //[path_to_down_arrow, arrowwidth, arrowheight] rightarrow: ["./images/arrow-down.png", 12,12], //[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). ///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){ ddlevelsmenu.hidemenu(ddlevelsmenu.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 (ddlevelsmenu.ismobile || !ddlevelsmenu.iscontained(this, e)){ var submenu=ddlevelsmenu.subuls[this._master][parseint(this._pos)] if (this._istoplevel){ ddlevelsmenu.css(this, "selected", "add") cleartimeout(ddlevelsmenu.hidetimers[this._master][this._pos]) } ddlevelsmenu.getoffsetof(header) var scrollx=window.pagexoffset? window.pagexoffset : ddlevelsmenu.standardbody.scrollleft var scrolly=window.pageyoffset? window.pageyoffset : ddlevelsmenu.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>ddlevelsmenu.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>ddlevelsmenu.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=ddlevelsmenu.subuls[this._master][parseint(this._pos)] if (this._istoplevel){ if (!ddlevelsmenu.iscontained(this, e) && !ddlevelsmenu.iscontained(submenu.parentnode, e)) //hide drop down div if mouse moves out of menu bar item but not into drop down div itself ddlevelsmenu.hidemenu(submenu.parentnode) } else if (!this._istoplevel && !ddlevelsmenu.iscontained(this, e)){ ddlevelsmenu.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(){ddlevelsmenu.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