PDA

View Full Version : AnyLink JS Drop Down Menu



selezionevino
05-24-2012, 10:00 PM
I make a premise. I am a beginner
I chose this MENU http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm , I would like to make a change.
I wish the Default Example MENU to go up.
Is it possible?
What should I change?
:confused:

ddadmin
05-24-2012, 10:50 PM
To get the menu to drop down to the right of the anchor link instead of the default below it, add an extra "rev" attribute inside the anchor with a value of "up':


<p><a href="http://www.dynamicdrive.com" class="menuanchorclass" rel="anylinkmenu1" rev="up">Anchor Link</a></p>

This is documented on the menu's script page actually.

selezionevino
05-25-2012, 09:32 AM
Sorry
I had already tried but it does not work with rev="up"
The tent always goes down. I want tent to go up.
Attached file

vwphillips
05-25-2012, 10:51 AM
the current script does not recognise up

the following changes in red are required


setupmenu:function(targetclass, anchorobj, pos){
this.standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body
var relattr=anchorobj.getAttribute("rel")
dropmenuid=relattr.replace(/\[(\w+)\]/, '')
var dropmenuvar=window[dropmenuid]
var dropmenu=this.addDiv(null, dropmenuvar.divclass, dropmenuvar.inlinestyle) //create and add main sub menu DIV
dropmenu.innerHTML=this.getmenuHTML(dropmenuvar)
var menu=this.menusmap[targetclass+pos]={
id: targetclass+pos,
anchorobj: anchorobj,
dropmenu: dropmenu,
revealtype: (relattr.length!=dropmenuid.length && RegExp.$1=="click") || anylinkmenu.ismobile ? "click" : "mouseover",
orientation: anchorobj.getAttribute("rev")=="lr"? "lr" : anchorobj.getAttribute("rev")=="up"?"up":"ud",
shadow: this.addDiv(null, "anylinkshadow", null) //create and add corresponding shadow
}
menu.anchorobj._internalID=targetclass+pos
menu.anchorobj._isanchor=true
menu.dropmenu._internalID=targetclass+pos
menu.shadow._internalID=targetclass+pos
menu.dropmenu.setcss=this.setcss
menu.shadow.setcss=this.setcss
menu.shadow.setcss({width: menu.dropmenu.offsetWidth+"px", height:menu.dropmenu.offsetHeight+"px"})
this.setopacity(menu.shadow, this.effects.shadow.opacity)
this.addEvent([menu.anchorobj, menu.dropmenu, menu.shadow], function(e){ //MOUSEOVER event for anchor, dropmenu, shadow
var menu=anylinkmenu.menusmap[this._internalID]
if (this._isanchor && menu.revealtype=="mouseover" && !anylinkmenu.isContained(this, e)){ //event for anchor
anylinkmenu.showmenu(menu.id)
anylinkmenu.addState(this, "add")
}
else if (typeof this._isanchor=="undefined"){ //event for drop down menu and shadow
clearTimeout(menu.hidetimer)
}
}, "mouseover")
this.addEvent([menu.anchorobj, menu.dropmenu, menu.shadow], function(e){ //MOUSEOUT event for anchor, dropmenu, shadow
if (!anylinkmenu.isContained(this, e)){
var menu=anylinkmenu.menusmap[this._internalID]
menu.hidetimer=setTimeout(function(){
anylinkmenu.addState(menu.anchorobj, "remove")
anylinkmenu.hidemenu(menu.id)
}, anylinkmenu.effects.delayhide)
}
}, "mouseout")
this.addEvent([menu.anchorobj, menu.dropmenu], function(e){ //CLICK event for anchor, dropmenu
var menu=anylinkmenu.menusmap[this._internalID]
if ( this._isanchor && menu.revealtype=="click"){
if (menu.dropmenu.style.visibility=="visible")
anylinkmenu.hidemenu(menu.id)
else{
anylinkmenu.addState(this, "add")
anylinkmenu.showmenu(menu.id)
}
if (e.preventDefault)
e.preventDefault()
return false
}
else
menu.hidetimer=setTimeout(function(){anylinkmenu.hidemenu(menu.id)}, anylinkmenu.effects.delayhide)
}, "click")
},


and


showmenu:function(menuid){
var menu=anylinkmenu.menusmap[menuid]
clearTimeout(menu.hidetimer)
this.getoffsetof(menu.anchorobj)
this.getdimensions(menu)
var posx=menu.anchorobj._offsets.left + (menu.orientation=="lr"? this.dimensions.anchorw : 0) //base x pos
var posy=menu.anchorobj._offsets.top+this.dimensions.anchorh - (menu.orientation=="lr"? this.dimensions.anchorh : 0)//base y pos
if (posx+this.dimensions.dropmenuw+this.effects.shadow.depth[0]>this.dimensions.docscrollx+this.dimensions.docwidth){ //drop left instead?
posx=posx-this.dimensions.dropmenuw + (menu.orientation=="lr"? -this.dimensions.anchorw : this.dimensions.anchorw)
}
if (menu.orientation=='up'||(posy+this.dimensions.dropmenuh>this.dimensions.docscrolly+this.dimensions.docheight)){ //drop up instead?
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
}
if (this.effects.fade.enabled){
this.setopacity(menu.dropmenu, 0) //set opacity to 0 so menu appears hidden initially
if (this.effects.shadow.enabled)
this.setopacity(menu.shadow, 0) //set opacity to 0 so shadow appears hidden initially
}
menu.dropmenu.setcss({left:posx+'px', top:posy+'px', visibility:'visible'})
if (this.effects.shadow.enabled){
//menu.shadow.setcss({width: menu.dropmenu.offsetWidth+"px", height:menu.dropmenu.offsetHeight+"px"})
menu.shadow.setcss({left:posx+anylinkmenu.effects.shadow.depth[0]+'px', top:posy+anylinkmenu.effects.shadow.depth[1]+'px', visibility:'visible'})
}
if (this.effects.fade.enabled){
clearInterval(menu.animatetimer)
menu.curanimatedegree=0
menu.starttime=new Date().getTime() //get time just before animation is run
menu.animatetimer=setInterval(function(){anylinkmenu.revealmenu(menuid)}, 20)
}
},

selezionevino
05-25-2012, 11:50 AM
Wonderfullll
I have changed as you said
Now I can finish my work
THANKS vwphillips!