PDA

View Full Version : 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/dynamicindex1/dropmenuindex.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 (http://www.dynamicdrive.com/style/csslibrary/item/suckertree-menu-horizontal/) in the CSS Library on dynamicdrive.
I hope this helps,
Nile

ddadmin
08-10-2008, 04:59 AM
Or All Levels Menu (http://www.dynamicdrive.com/dynamicindex1/ddlevelsmenu/index.htm), 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
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:


submenu.style.visibility="visible"

and change that to:


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:

<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:

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:



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")
}

}

kpsony
08-15-2008, 07:20 AM
Anybody?

coolstuff2k8
08-20-2008, 05:16 PM
How can we apply the fading of submenus on mouseover and mouseout?

ddadmin
08-22-2008, 05:40 AM
Sorry for the delay. With regards to adding a fade out effect to All Levels Menu (on top of the fade in I posted earlier), find the below lines inside the .js file:


submenu.style.left=0
submenu.style.top="-1000px"
submenu.style.visibility="hidden"

and replace that with:


jQuery(submenu).fadeOut()

That should do it.

coolstuff2k8
08-25-2008, 07:09 PM
I am using Suckerfish Horizontal Dropdown menu. I am using the code you mentioned for fadeIn(). It works fine when we hover the item for first time. But when we hover for second time and so on, the fadeIn() is not applying.

fadeOut() seems to work fine.

Any help???