Results 1 to 5 of 5

Thread: AnyLink JS Drop Down Menu

  1. #1
    Join Date
    May 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default AnyLink JS Drop Down Menu

    I make a premise. I am a beginner
    I chose this MENU http://www.dynamicdrive.com/dynamici...pmenuindex.htm , I would like to make a change.
    I wish the Default Example MENU to go up.
    Is it possible?
    What should I change?

  2. #2
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

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

    Code:
    <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.
    DD Admin

  3. #3
    Join Date
    May 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default It does not work

    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

  4. #4
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    the current script does not recognise up

    the following changes in red are required

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

    Code:
    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)
    	}
    },
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  5. #5
    Join Date
    May 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Wonderfullll
    I have changed as you said
    Now I can finish my work
    THANKS vwphillips!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •