Submenu's for the AnyLink Drop Down Menu

**kpsony** · 08-09-2008, 06:08 AM

1) Script Title: AnyLink Drop Down Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...pmenuindex.htm

3) Describe problem:
Want to incorporate submenus into this script.

**Nile** · 08-10-2008, 02:11 AM

This script doesn't support submenus and wouldn't be the best one for it either. Check out the SuckerFish Menu in the CSS Library on dynamicdrive.
I hope this helps,
Nile

**ddadmin** · 08-10-2008, 04:59 AM

Or All Levels Menu, which is the most similar to AnyLinks Menu, but with support for additional levels of sub menus.

**kpsony** · 08-10-2008, 07:56 AM

The problem with those is I cant figure out how to incorporate jquery-1.2.6.pack.js that makes the menus fade in (i dont know how to program, obviously). I want these menus to fade in/out.

**jscheuer1** · 08-10-2008, 09:16 AM

Originally Posted by kpsony

The problem with those is I cant figure out how to incorporate jquery-1.2.6.pack.js that makes the menus fade in (i dont know how to program, obviously). I want these menus to fade in/out.

Well, there you are. Anylink is a very simple menu. If it were beefed up to allow for multi-levels, it would probably be just about as difficult to deal with visa vis jQuery as any other multi-level menu.

Pick one and give it a shot, if after that you need help, ask.

**ddadmin** · 08-10-2008, 06:53 PM

To add a Fade In effect to All Levels Menu using jQuery is fairly straightforward. Note that the below only causes the sub menus to fade in when being revealed, and doesn't include fade out when disappearing.

First, make sure in the HEAD of your HTML page, you've added the reference to the jQuery library. Then, inside ddlevels.js, find the below line:

Code:

submenu.style.visibility="visible"

and change that to:

Code:

submenu.style.display="none"
submenu.style.visibility="visible"
jQuery(submenu).fadeIn()

That should do it.

**kpsony** · 08-10-2008, 08:05 PM

So, here's the code I have:

In the head tags on my page I have the following:

Code:

<head>

<link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-base.css" />
<link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-topbar.css" />
<link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-sidebar.css" />

<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="ddlevelsfiles/ddlevelsmenu.js">

/***********************************************
* All Levels Navigational Menu- (c) Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

</head>

And this is the Javascript I have in the in the ddlevelsmenu.js:

Code:

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)])
		}, "click")
	}
	this.subuls[mainmenuid][submenupos]=submenu
	header._dimensions={w:header.offsetWidth, h:header.offsetHeight, submenuw:submenu.offsetWidth, submenuh:submenu.offsetHeight}
	this.getoffsetof(header)
	submenu.style.left=0
	submenu.style.top=0
	submenu.style.visibility="hidden"
	this.addEvent(header, function(e){ //mouseover event
		if (!ddlevelsmenu.isContained(this, e)){
			if (typeof ddlevelsmenu.hidetimers[this._master][parseInt(this._pos)]!="undefined")
				clearTimeout(ddlevelsmenu.hidetimers[this._master][parseInt(this._pos)])
			if (this._istoplevel)
				ddlevelsmenu.css(this, "selected", "add")
			var submenu=ddlevelsmenu.subuls[this._master][parseInt(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.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.submenuh<this._offsets.top+(dir=="sidebar"? this._dimensions.h : 0)-scrollY){ //move up?
					menutop+= - this._dimensions.submenuh + (this._istoplevel && dir=="topbar"? -this._dimensions.h : this._dimensions.h)
				}
				else{ //top of window edge
					menutop+= -(this._offsets.top-scrollY) + (this._istoplevel && dir=="topbar"? -this._dimensions.h : 0)
				}
			}
			submenu.style.top=menutop+"px"			
			ddlevelsmenu.positionshim(this, submenu, dir, scrollX, scrollY)
			submenu.style.display="none"
			submenu.style.visibility="visible"
			jQuery(submenu).fadeIn()
		}
	}, "mouseover")
	this.addEvent(header, function(e){ //mouseout event
		if (this._istoplevel){
			var submenu=ddlevelsmenu.subuls[this._master][parseInt(this._pos)]
			if (!ddlevelsmenu.isContained(this, e) && !ddlevelsmenu.isContained(submenu, e)) //hide drop down ul if mouse moves out of menu bar item but not into drop down ul itself
				ddlevelsmenu.hidemenu(submenu)
		}
		else if (!this._istoplevel && !ddlevelsmenu.isContained(this, e)){
			var headerlist=this
			ddlevelsmenu.hidetimers[this._master][parseInt(this._pos)]=setTimeout(function(){
				var submenu=ddlevelsmenu.subuls[headerlist._master][parseInt(headerlist._pos)]
				ddlevelsmenu.hidemenu(submenu)
			}, ddlevelsmenu.hideinterval)
		}
	}, "mouseout")
},

hidemenu:function(submenu){
	if (typeof submenu._pos!="undefined"){ //if submenu is outermost UL drop down menu
		this.css(this.topitems[submenu._master][parseInt(submenu._pos)], "selected", "remove")
		this.hideshim()
	}
	submenu.style.left=0
	submenu.style.top="-1000px"
	submenu.style.display="none"
	submenu.style.visibility="hidden"
	jQuery(submenu).fadeOut()
},

**kpsony** · 08-10-2008, 08:06 PM

That's not working... any other ideas? Or do you know of any other menus that could do this?

**ddadmin** · 08-10-2008, 11:22 PM

Looks right. Make sure the path to jquery-1.2.6.pack.js is correct in your HEAD section. Please post a link to the page on your site that contains the problematic script so we can check it out.

**kpsony** · 08-13-2008, 04:19 PM

So, the fade in works now, but now I cant figure out how to get them to fade out on mouse out. here's my code:

Code:

		ddlevelsmenu.hidemenu(ddlevelsmenu.subuls[this._master][parseInt(this._pos)])
		}, "click")
	}
	this.subuls[mainmenuid][submenupos]=submenu
	header._dimensions={w:header.offsetWidth, h:header.offsetHeight, submenuw:submenu.offsetWidth, submenuh:submenu.offsetHeight}
	this.getoffsetof(header)
	submenu.style.left=0
	submenu.style.top=0
	submenu.style.visibility="hidden"
	this.addEvent(header, function(e){ //mouseover event
		if (!ddlevelsmenu.isContained(this, e)){
			if (typeof ddlevelsmenu.hidetimers[this._master][parseInt(this._pos)]!="undefined")
				clearTimeout(ddlevelsmenu.hidetimers[this._master][parseInt(this._pos)])
			if (this._istoplevel)
				ddlevelsmenu.css(this, "selected", "add")
			var submenu=ddlevelsmenu.subuls[this._master][parseInt(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.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.submenuh<this._offsets.top+(dir=="sidebar"? this._dimensions.h : 0)-scrollY){ //move up?
					menutop+= - this._dimensions.submenuh + (this._istoplevel && dir=="topbar"? -this._dimensions.h : this._dimensions.h)
				}
				else{ //top of window edge
					menutop+= -(this._offsets.top-scrollY) + (this._istoplevel && dir=="topbar"? -this._dimensions.h : 0)
				}
			}
			submenu.style.top=menutop+"px"			
			ddlevelsmenu.positionshim(this, submenu, dir, scrollX, scrollY)
			submenu.style.display="none"
			submenu.style.visibility="visible"
			jQuery(submenu).fadeIn()
		}
	}, "mouseover")
	this.addEvent(header, function(e){ //mouseout event
		if (this._istoplevel){
			var submenu=ddlevelsmenu.subuls[this._master][parseInt(this._pos)]
			if (!ddlevelsmenu.isContained(this, e) && !ddlevelsmenu.isContained(submenu, e)) //hide drop down ul if mouse moves out of menu bar item but not into drop down ul itself
				ddlevelsmenu.hidemenu(submenu)
				
					
		}
		else if (!this._istoplevel && !ddlevelsmenu.isContained(this, e)){
			var headerlist=this
			ddlevelsmenu.hidetimers[this._master][parseInt(this._pos)]=setTimeout(function(){
				var submenu=ddlevelsmenu.subuls[headerlist._master][parseInt(headerlist._pos)]
				ddlevelsmenu.hidemenu(submenu)
				}, ddlevelsmenu.hideinterval)
		}
	}, "mouseout")
},

hidemenu:function(submenu){
	if (typeof submenu._pos!="undefined"){ //if submenu is outermost UL drop down menu
		this.css(this.topitems[submenu._master][parseInt(submenu._pos)], "selected", "remove")
		this.hideshim()
	}
	jQuery(submenu).fadeOut()
	submenu.style.left=0
	submenu.style.top="-1000px"
	submenu.style.display="none"
	submenu.style.visibility="hidden"
},


addEvent:function(target, functionref, tasktype) {
	if (target.addEventListener)
		target.addEventListener(tasktype, functionref, false);
	else if (target.attachEvent)
		target.attachEvent('on'+tasktype, function(){return functionref.call(target, window.event)});
},

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 array on object
	if (!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 menuitems=menubar.getElementsByTagName("*")
	this.getwindowsize()
	for (var i=0; i<menuitems.length; i++){
		if (menuitems[i].getAttribute('rel')){
			this.topitemsindex++
			this.ulindex++
			var menulink=menuitems[i].getElementsByTagName("a")[0]
			this.topitems[mainmenuid][this.topitemsindex]=menulink //store ref to main menu links
			var dropul=document.getElementById(menuitems[i].getAttribute('rel'))
			dropul.style.zIndex=2000 //give drop down menus a high z-index
			dropul._master=mainmenuid  //Indicate which main menu this main UL is associated with
			dropul._pos=this.topitemsindex //Indicate which main menu item this main UL is associated with
			this.addEvent(dropul, function(){ddlevelsmenu.hidemenu(this)}, "click")
			var arrowpointer=(dir=="sidebar")? "rightarrowpointer" : "downarrowpointer"
			this.addpointer(menulink, arrowpointer, this[arrowpointer])
			this.buildmenu(mainmenuid, menulink, dropul, this.ulindex, true, dir) //build top level menu
			
			//dropul.onmouseover=function(){
				//do nothing
			//}
			this.addEvent(dropul, function(e){ //hide menu if mouse moves out of main UL element into open space
				if (!ddlevelsmenu.isContained(this, e) && !ddlevelsmenu.isContained(ddlevelsmenu.topitems[this._master][parseInt(this._pos)], e)){
					var dropul=this
					ddlevelsmenu.hidetimers[this._master][parseInt(this._pos)]=setTimeout(function(){
						ddlevelsmenu.hidemenu(dropul)
						}, ddlevelsmenu.hideinterval)
				}
			}, "mouseout")
			var subuls=dropul.getElementsByTagName("ul")
			for (var c=0; c<subuls.length; c++){
				this.ulindex++
				var parentli=subuls[c].parentNode
				this.addpointer(parentli.getElementsByTagName("a")[0], "rightarrowpointer", this.rightarrowpointer)
				this.buildmenu(mainmenuid, parentli, subuls[c], this.ulindex, false, dir) //build sub level menus
			}
		}
	} //end for loop
	this.addEvent(window, function(){ddlevelsmenu.getwindowsize(); ddlevelsmenu.gettopitemsdimensions()}, "resize")
},

setup:function(mainmenuid, dir){
	this.addEvent(window, function(){ddlevelsmenu.init(mainmenuid, dir)}, "load")
}

}

Thread: Submenu's for the AnyLink Drop Down Menu

Thread Tools

Search Thread

Submenu's for the AnyLink Drop Down Menu

Bookmarks

Bookmarks

Posting Permissions