Need Help With AnyLink Drop Down Menu

[Sw1fT]

Script: AnyLink Drop Down JS Menu
http://www.dynamicdrive.com/dynamici...pmenuindex.htm

Hello,

I have recently added the AnyLink menu to a website I am building and i've run into a problem where the navigation menu item the dropdown is linked to is a mouseover itself, and when a menu item is selected the navigation menu item returns to its mouseout state. here is a picture showing what I mean:




I don't know if anyone on here is particularly savvy with this menu but I have tried editing the code to have a separate mouseover inside the dropdown, but this is not working, the code is shown below:

revealmenu:function(menuid){
	var menu=anylinkmenu.menusmap[menuid]
	var elapsed=new Date().getTime()-menu.starttime //get time animation has run
	if (elapsed<this.effects.fade.duration){
		this.setopacity(menu.dropmenu, menu.curanimatedegree)
		if (this.effects.shadow.enabled)
			this.setopacity(menu.shadow, menu.curanimatedegree*this.effects.shadow.opacity)
	}
	else{
		clearInterval(menu.animatetimer)
		this.setopacity(menu.dropmenu, 1)
		menu.dropmenu.style.filter=""
		document.GetElementById(b2).src="images/nav_b2_over.gif"
	}
	menu.curanimatedegree=(1-Math.cos((elapsed/this.effects.fade.duration)*Math.PI)) / 2
},

and the mouseout is:

hidemenu:function(menuid){
	var menu=anylinkmenu.menusmap[menuid]
	clearInterval(menu.animatetimer)
	menu.dropmenu.setcss({visibility:'hidden', left:0, top:0})
	menu.shadow.setcss({visibility:'hidden', left:0, top:0})
	document.GetElementById(b2).src="images/nav_b2.gif"
},

If anybody could perhaps point me in the right direction that would be brilliant, as I would ideally like to have the navigation menu button remain mouseover'd until the menu itself is closed

Thankyou for any help

Sw1fT

[Sw1fT]

Sorry, posted in the wrong section.

any help would be appreciated

Sw1fT

[ddadmin]

Hmm I'm not exactly sure I understand your question. Do you have a link to a working example to illustrate?

[Sw1fT]

no sorry I do not have a link as the website has not been uploaded yet

basically, I want the anchor link for the dropdown (in this case, the "Services" link) to remain blue (mouseovered) when the dropdown is displayed, but, as the screenshot shows, when an item in the dropdown menu is hovered over, the Services link turns back to pink.

so what i need to know is how i can edit the code so that when the menu is dropped, regardless where on the menu is highlighted, the services tab will remain blue.

i hope i am making the problem clear, if not I can make an image of what i want the website to do

[ddadmin]

I see. There are a few menu scripts that support this as far as toggling CSS classes (not images, however), such as Chrome Menu. Doing something for Anylink Menu and on images is more difficult, however. The code you have above looks like it's heading in the right direction- what happens when you try the above?

[Sw1fT]

Sorry for the late reply,

when I try the above code it does nothing, simply works in exactly the same way, I mean, am I clutching at straws trying to edit this code?

I really like the layout of this menu and so I am very open to suggestions, I am convinced it is not the code that is at fault, it is merely the placement of it, as there are so many functions in the code itself it is hard to know which one is responsible for the true calling of the menu and hiding of it.

As soon as I find the correct placement, I am assuming the current code would work.

Thanks for any help

Sw1fT

[ddadmin]

Upon closer inspection of your code in bold above, I do see a syntax error. Instead of:

document.GetElementById(b2).src="images/nav_b2_over.gif"

It should be:

document.getElementById('b2').src="images/nav_b2_over.gif"

Notice the case sensitivity of getElementById, plus the quotes required around the ID attribute. Do this for the other line in bold as well.

Having said the above, the location for adding the "reveal" line is probably best moved to the below within the code instead:

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 (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)
	}
	document.getElementById('b2').src="images/nav_b2_over.gif"

},

With that it should work, but since you're hard coding the image changes, this only works if your menu contains a single menu item with a drop down menu associated with it. In other words, it's not scalable at all, hence the reason why you need such a feature built in, which Chrome Menu does but only for CSS classes at this point.

[Sw1fT]

Thanks for all the help, I have got it working but like you say, it is not scalable, I have tried passing variables to the function, such as image id's, which could be used in an if statement, but none of it works. I have also tried finding the variables for the different menu's, but as they are made in a separate javascript sheet I doubt I can use them to control anything.

thanks for all the help, I am going to have to have a think about whether or not the second menu is necesary, and if it is, I will need to try and move chrome menu onto my page with as little fuss as possible.

Sw1fT

[Sw1fT]

OK I will be changing this topic to resolved after this post as I have found a VERY cheeky and loose way of creating the desired effect.

What I have done is removed the onMouseOut code from the in the menu for the normal mouseover image change, not the dropdown, and then left the code in the hidemenu function.

I know that is a bit confusing but, for arguments sake, say the two images are called img1.gif and img2.gif, with their mouseover images named _over.gif respectively.

When I mouseover img1.gif, it changes to img1_over.gif, and a dropdown appears.

when I hover over the dropdown menu, there is no onMouseOut to tell the anchor link to return to img1.gif, so it stays the same, until I mouseout of the menu, then it changes back to img1.gif. The code for this is:

hidemenu:function(menuid){
	var menu=anylinkmenu.menusmap[menuid]
	clearInterval(menu.animatetimer)
	menu.dropmenu.setcss({visibility:'hidden', left:0, top:0})
	menu.shadow.setcss({visibility:'hidden', left:0, top:0})
	document.getElementById('b2').src="images/nav_b2.gif"
	document.getElementById('b5').src="images/nav_b5.gif"
},

As you can see, regardless of which menu is dropped down, both the images (img1_over.gif and img2_over.gif) are returned to their normal state, this makes no different which menu is dropped down, because the one that isn't dropped down should be img1.gif anyway and not _over.

I hope that makes enough sense, its a dodgy fix, but its a fix and it works

Sw1fT