https://www.above.com/registrar/javascript/anylinkmenu.js

1//** AnyLink JS Drop Down Menu v2.0- (c) Dynamic Drive DHTML code library: http://www.dynamicdrive.com
2//** Script Download/ instructions page: http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm
3//** January 29th, 2009: Script Creation date
4
5//**May 22nd, 09': v2.1
6	//1) Automatically adds a "selectedanchor" CSS class to the currrently selected anchor link
7	//2) For image anchor links, the custom HTML attributes "data-image" and "data-overimage" can be inserted to set the anchor's default and over images.
8
9//**June 1st, 09': v2.2
10	//1) Script now runs automatically after DOM has loaded. anylinkmenu.init) can now be called in the HEAD section
11
12if (typeof dd_domreadycheck=="undefined") //global variable to detect if DOM is ready
13	var dd_domreadycheck=false
14
15var anylinkmenu={
16
17menusmap: {},
18preloadimages: [],
19effects: {delayhide: 200, shadow:{enabled:true, opacity:0.3, depth: [5, 5]}, fade:{enabled:false, duration:500}}, //customize menu effects
20
21dimensions: {},
22
23getoffset:function(what, offsettype){
24	return (what.offsetParent)? what[offsettype]+this.getoffset(what.offsetParent, offsettype) : what[offsettype]
25},
26
27getoffsetof:function(el){
28	el._offsets={left:this.getoffset(el, "offsetLeft"), top:this.getoffset(el, "offsetTop"), h: el.offsetHeight}
29},
30
31getdimensions:function(menu){
32	this.dimensions={anchorw:menu.anchorobj.offsetWidth, anchorh:menu.anchorobj.offsetHeight,
33		docwidth:(window.innerWidth ||this.standardbody.clientWidth)-20,
34		docheight:(window.innerHeight ||this.standardbody.clientHeight)-15,
35		docscrollx:window.pageXOffset || this.standardbody.scrollLeft,
36		docscrolly:window.pageYOffset || this.standardbody.scrollTop
37	}
38	if (!this.dimensions.dropmenuw){
39		this.dimensions.dropmenuw=menu.dropmenu.offsetWidth
40		this.dimensions.dropmenuh=menu.dropmenu.offsetHeight
41	}
42},
43
44isContained:function(m, e){
45	var e=window.event || e
46	var c=e.relatedTarget || ((e.type=="mouseover")? e.fromElement : e.toElement)
47	while (c && c!=m)try {c=c.parentNode} catch(e){c=m}
48	if (c==m)
49		return true
50	else
51		return false
52},
53
54setopacity:function(el, value){
55	el.style.opacity=value
56	if (typeof el.style.opacity!="string"){ //if it's not a string (ie: number instead), it means property not supported
57		el.style.MozOpacity=value
58		if (el.filters){
59			el.style.filter="progid:DXImageTransform.Microsoft.alpha(opacity="+ value*100 +")"
60		}
61	}
62},
63
64showmenu:function(menuid){
65	var menu=anylinkmenu.menusmap[menuid]
66	clearTimeout(menu.hidetimer)
67	this.getoffsetof(menu.anchorobj)
68	this.getdimensions(menu)
69	var posx=menu.anchorobj._offsets.left + (menu.orientation=="lr"? this.dimensions.anchorw : 0) //base x pos
70	var posy=menu.anchorobj._offsets.top+this.dimensions.anchorh - (menu.orientation=="lr"? this.dimensions.anchorh : 0)//base y pos
71	if (posx+this.dimensions.dropmenuw+this.effects.shadow.depth[0]>this.dimensions.docscrollx+this.dimensions.docwidth){ //drop left instead?
72		posx=posx-this.dimensions.dropmenuw + (menu.orientation=="lr"? -this.dimensions.anchorw : this.dimensions.anchorw)
73	}
74	if (posy+this.dimensions.dropmenuh>this.dimensions.docscrolly+this.dimensions.docheight){  //drop up instead?
75		posy=Math.max(posy-this.dimensions.dropmenuh - (menu.orientation=="lr"? -this.dimensions.anchorh : this.dimensions.anchorh), this.dimensions.docscrolly) //position above anchor or window's top edge
76	}
77	if (this.effects.fade.enabled){
78		this.setopacity(menu.dropmenu, 0) //set opacity to 0 so menu appears hidden initially
79		if (this.effects.shadow.enabled)
80			this.setopacity(menu.shadow, 0) //set opacity to 0 so shadow appears hidden initially
81	}
82	menu.dropmenu.setcss({left:posx+'px', top:posy+'px', visibility:'visible'})
83	if (this.effects.shadow.enabled){
84		//menu.shadow.setcss({width: menu.dropmenu.offsetWidth+"px", height:menu.dropmenu.offsetHeight+"px"})
85		menu.shadow.setcss({left:posx+anylinkmenu.effects.shadow.depth[0]+'px', top:posy+anylinkmenu.effects.shadow.depth[1]+'px', visibility:'visible'})
86	}
87	if (this.effects.fade.enabled){
88		clearInterval(menu.animatetimer)
89		menu.curanimatedegree=0
90		menu.starttime=new Date().getTime() //get time just before animation is run
91		menu.animatetimer=setInterval(function(){anylinkmenu.revealmenu(menuid)}, 20)
92	}
93},
94
95revealmenu:function(menuid){
96	var menu=anylinkmenu.menusmap[menuid]
97	var elapsed=new Date().getTime()-menu.starttime //get time animation has run
98	if (elapsed<this.effects.fade.duration){
99		this.setopacity(menu.dropmenu, menu.curanimatedegree)
100		if (this.effects.shadow.enabled)
101			this.setopacity(menu.shadow, menu.curanimatedegree*this.effects.shadow.opacity)
102	}
103	else{
104		clearInterval(menu.animatetimer)
105		this.setopacity(menu.dropmenu, 1)
106		menu.dropmenu.style.filter=""
107	}
108	menu.curanimatedegree=(1-Math.cos((elapsed/this.effects.fade.duration)*Math.PI)) / 2
109},
110
111setcss:function(param){
112	for (prop in param){
113		this.style[prop]=param[prop]
114	}
115},
116
117setcssclass:function(el, targetclass, action){
118	var needle=new RegExp("(^|\\s+)"+targetclass+"($|\\s+)", "ig")
119	if (action=="check")
120		return needle.test(el.className)
121	else if (action=="remove")
122		el.className=el.className.replace(needle, "")
123	else if (action=="add" && !needle.test(el.className))
124		el.className+=" "+targetclass
125},
126
127hidemenu:function(menuid){
128	var menu=anylinkmenu.menusmap[menuid]
129	clearInterval(menu.animatetimer)
130	menu.dropmenu.setcss({visibility:'hidden', left:0, top:0})
131	menu.shadow.setcss({visibility:'hidden', left:0, top:0})
132},
133
134getElementsByClass:function(targetclass){
135	if (document.querySelectorAll)
136		return document.querySelectorAll("."+targetclass)
137	else{
138		var classnameRE=new RegExp("(^|\\s+)"+targetclass+"($|\\s+)", "i") //regular expression to screen for classname
139		var pieces=[]
140		var alltags=document.all? document.all : document.getElementsByTagName("*")
141		for (var i=0; i<alltags.length; i++){
142			if (typeof alltags[i].className=="string" && alltags[i].className.search(classnameRE)!=-1)
143				pieces[pieces.length]=alltags[i]
144		}
145		return pieces
146	}
147},
148
149addDiv:function(divid, divclass, inlinestyle){
150	var el=document.createElement("div")
151	if (divid)
152		el.id=divid
153	el.className=divclass
154	if (inlinestyle!="" && typeof el.style.cssText=="string")
155		el.style.cssText=inlinestyle
156	else if (inlinestyle!="")
157		el.setAttribute('style', inlinestyle)
158	document.body.appendChild(el)
159	return el
160},
161
162getmenuHTML:function(menuobj){
163	var menucontent=[]
164	var frag=""
165	for (var i=0; i<menuobj.items.length; i++){
166		frag+='<li><a href="' + menuobj.items[i][1] + '" target="_self">' + menuobj.items[i][0] + '</a></li>\n'
167		if (menuobj.items[i][2]=="efc" || i==menuobj.items.length-1){
168			menucontent.push(frag)
169			frag=""
170		}
171	}
172	if (typeof menuobj.cols=="undefined")
173		return '<ul>\n' + menucontent.join('') + '\n</ul>'
174	else{
175		frag=""
176		for (var i=0; i<menucontent.length; i++){
177			frag+='<div class="' + menuobj.cols.divclass + '" style="' + menuobj.cols.inlinestyle + '">\n<ul>\n' + menucontent[i] + '</ul>\n</div>\n'
178		}
179		return frag
180	}
181},
182
183addEvent:function(targetarr, functionref, tasktype){
184	if (targetarr.length>0){
185		var target=targetarr.shift()
186		if (target.addEventListener)
187			target.addEventListener(tasktype, functionref, false)
188		else if (target.attachEvent)
189			target.attachEvent('on'+tasktype, function(){return functionref.call(target, window.event)})
190		this.addEvent(targetarr, functionref, tasktype)
191	}
192},
193
194domready:function(functionref){ //based on code from the jQuery library
195	if (dd_domreadycheck){
196		functionref()
197		return
198	}
199	// Mozilla, Opera and webkit nightlies currently support this event
200	if (document.addEventListener) {
201		// Use the handy event callback
202		document.addEventListener("DOMContentLoaded", function(){
203			document.removeEventListener("DOMContentLoaded", arguments.callee, false )
204			functionref();
205			dd_domreadycheck=true
206		}, false )
207	}
208	else if (document.attachEvent){
209		// If IE and not an iframe
210		// continually check to see if the document is ready
211		if ( document.documentElement.doScroll && window == window.top) (function(){
212			if (dd_domreadycheck) return
213			try{
214				// If IE is used, use the trick by Diego Perini
215				// http://javascript.nwbox.com/IEContentLoaded/
216				document.documentElement.doScroll("left")
217			}catch(error){
218				setTimeout( arguments.callee, 0)
219				return;
220			}
221			//and execute any waiting functions
222			functionref();
223			dd_domreadycheck=true
224		})();

225	}
226	if (document.attachEvent && parent.length>0) //account for page being in IFRAME, in which above doesn't fire in IE
227		this.addEvent(window, function(){functionref()}, "load");
228},
229
230addState:function(anchorobj, state){
231	if (anchorobj.getAttribute('data-image')){
232		var imgobj=(anchorobj.tagName=="IMG")? anchorobj : anchorobj.getElementsByTagName('img')[0]
233		if (imgobj){
234			imgobj.src=(state=="add")? anchorobj.getAttribute('data-overimage') : anchorobj.getAttribute('data-image')
235		}
236	}
237	else
238		anylinkmenu.setcssclass(anchorobj, "selectedanchor", state)
239},
240
241addState:function(anchorobj, state){
242	if (anchorobj.getAttribute('data-image')){
243		var imgobj=(anchorobj.tagName=="IMG")? anchorobj : anchorobj.getElementsByTagName('img')[0]
244		if (imgobj){
245			imgobj.src=(state=="add")? anchorobj.getAttribute('data-overimage') : anchorobj.getAttribute('data-image')
246		}
247	}
248	else
249		anylinkmenu.setcssclass(anchorobj, "selectedanchor", state)
250},
251
252setupmenu:function(targetclass, anchorobj, pos){
253	this.standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body
254	var relattr=anchorobj.getAttribute("rel")
255	dropmenuid=relattr.replace(/\[(\w+)\]/, '')
256	var dropmenuvar=window[dropmenuid]
257	var dropmenu=this.addDiv(null, dropmenuvar.divclass, dropmenuvar.inlinestyle) //create and add main sub menu DIV
258	dropmenu.innerHTML=this.getmenuHTML(dropmenuvar)
259	var menu=this.menusmap[targetclass+pos]={
260		id: targetclass+pos,
261		anchorobj: anchorobj,	
262		dropmenu: dropmenu,
263		revealtype: (relattr.length!=dropmenuid.length && RegExp.$1=="click")? "click" : "mouseover",
264		orientation: anchorobj.getAttribute("rev")=="lr"? "lr" : "ud",
265		shadow: this.addDiv(null, "anylinkshadow", null) //create and add corresponding shadow
266	}
267	menu.anchorobj._internalID=targetclass+pos
268	menu.anchorobj._isanchor=true
269	menu.dropmenu._internalID=targetclass+pos
270	menu.shadow._internalID=targetclass+pos
271	menu.dropmenu.setcss=this.setcss
272	menu.shadow.setcss=this.setcss
273	menu.shadow.setcss({width: menu.dropmenu.offsetWidth+"px", height:menu.dropmenu.offsetHeight+"px"})
274	this.setopacity(menu.shadow, this.effects.shadow.opacity)
275	this.addEvent([menu.anchorobj, menu.dropmenu, menu.shadow], function(e){ //MOUSEOVER event for anchor, dropmenu, shadow
276		var menu=anylinkmenu.menusmap[this._internalID]
277		if (this._isanchor && menu.revealtype=="mouseover" && !anylinkmenu.isContained(this, e)){ //event for anchor
278			anylinkmenu.showmenu(menu.id)
279			anylinkmenu.addState(this, "add")
280		}
281		else if (typeof this._isanchor=="undefined"){ //event for drop down menu and shadow
282			clearTimeout(menu.hidetimer)
283		}
284	}, "mouseover")
285	this.addEvent([menu.anchorobj, menu.dropmenu, menu.shadow], function(e){ //MOUSEOUT event for anchor, dropmenu, shadow
286		if (!anylinkmenu.isContained(this, e)){
287			var menu=anylinkmenu.menusmap[this._internalID]
288			menu.hidetimer=setTimeout(function(){
289				anylinkmenu.addState(menu.anchorobj, "remove")
290				anylinkmenu.hidemenu(menu.id)
291			}, anylinkmenu.effects.delayhide)
292		}
293	}, "mouseout")
294	this.addEvent([menu.anchorobj, menu.dropmenu], function(e){ //CLICK event for anchor, dropmenu
295		var menu=anylinkmenu.menusmap[this._internalID]
296		if ( this._isanchor && menu.revealtype=="click"){
297			if (menu.dropmenu.style.visibility=="visible")
298				anylinkmenu.hidemenu(menu.id)
299			else{
300				anylinkmenu.addState(this, "add")
301				anylinkmenu.showmenu(menu.id)
302			}
303			if (e.preventDefault)
304				e.preventDefault()
305			return false
306		}
307		else
308			menu.hidetimer=setTimeout(function(){anylinkmenu.hidemenu(menu.id)}, anylinkmenu.effects.delayhide)
309	}, "click")
310},
311
312init:function(targetclass){
313	this.domready(function(){anylinkmenu.trueinit(targetclass)})
314},
315
316trueinit:function(targetclass){
317	var anchors=this.getElementsByClass(targetclass)
318	var preloadimages=this.preloadimages
319	for (var i=0; i<anchors.length; i++){
320		if (anchors[i].getAttribute('data-image')){ //preload anchor image?
321			preloadimages[preloadimages.length]=new Image()
322			preloadimages[preloadimages.length-1].src=anchors[i].getAttribute('data-image')
323		}
324		if (anchors[i].getAttribute('data-overimage')){ //preload anchor image?
325			preloadimages[preloadimages.length]=new Image()
326			preloadimages[preloadimages.length-1].src=anchors[i].getAttribute('data-overimage')
327		}
328		this.setupmenu(targetclass, anchors[i], i)
329	}
330}
331
332}