Anylink Dropdown Menu

[aw2002]

Hi,

Has anyone modified this script to include horizontal mouseover on one of the dropdown links??

I did a little modification and the horizontal mouseover works great but the original drop down menu does not seem to disappear...any ideas?

[jscheuer1]

How is a horizontal mouseover different from a regular one?

[aw2002]

Horizontal mouseover brings out submenu sideways instead of a dropdown.

using anylinks, we can have a drop down of:

Anchor Link
Link 1
Link 2
Link 3

and i have added horizontal mouseover so that it became:

Anchor Link
Link 1
Link 2 -> Link2a
Link 3

But when i onmouseout the horizontal mouseover, the original dropdown does not disappear, it stays on the screen.

[jscheuer1]

Well then it is still a regular mouseover, it just has a different line(s) of code associated with it. I doubt that you will find too many, if any, who have done this because, to the best of my knowledge, it really isn't possible using the existing code of the menu. If you've added a unit of code to achieve this, then it may just need some tweaking to get it to behave the way you want or, it may just be what I think of as a dead end. A dead end is pretty self explanatory but, just in case it isn't clear, dead end code will take you part of the way towards an effect but leaves the values of variables and/or functions in such a state that there is no way forward from there. To have a shot at getting this to do what you want, I'd need to see your code. Preferably a link to an example of what you have so far but, pasting in the code or attaching it to a message, as long as it is complete, is fine.

[aw2002]

Partial HTML code
=============
<a href="http://www.dynamicdrive.com" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, 'anylinkmenu1')"><b>Home</b></a>

<div id="anylinkmenu1" class="anylinkcss">

<a href="http://www.dynamicdrive.com/">About Us</a>
<a href="#" onClick="return clickreturnvalue()" onMouseover="rightmenu(this, event, 'anylinkmenu6')" onMouseout="delayhidemenu()">Test Anchor</a>
<div id="anylinkmenu6" class="anylinkcss">
<a href="http://www.dynamicdrive.com/">test</a>
<a href="http://www.dynamicdrive.com/">test1</a>
<a href="http://www.dynamicdrive.com/">test2</a>
</div>
<a href="http://www.cssdrive.com">History</a>
</div>

JS code i modified
==============
function rightmenu(obj, e, dropmenuID){
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
if (typeof dropmenuobj!="undefined") //hide previous menu
//dropmenuobj.style.visibility="hidden"
clearhidemenu()
if (ie5||ns6){
obj.onmouseout=delayhidemenu
dropmenuobj=document.getElementById(dropmenuID)
if (hidemenu_onclick) dropmenuobj.onclick=function(){dropmenuobj.style.visibility='hidden'}
dropmenuobj.onmouseover=clearhidemenu
dropmenuobj.onmouseout=ie5? function(){ dynamichide(event)} : function(event){ dynamichide(event)}
showhide(dropmenuobj.style, e, "visible", "hidden")
dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left="120px"
dropmenuobj.style.top="0px"
}
return clickreturnvalue()
}

[jscheuer1]

. . .pasting in the code or attaching it to a message, as long as it is complete, is fine.

Emphasis added. I need more than that to go on, what is:

anylinkmenu6

I can (and did) guess that (though it would have been nice to not have to write one, as I am the one helping you) but, I cannot guess where in the script you put your function. That may or may not be important. So, I went ahead and gave it a shot but, missing your css, a definition for 'ie5' (tried to work around that), all I got was a jumble of errors, few of which are probably in your full work in progress.

[aw2002]

Hi I will post everything on a webspace soon. Sorry about the incomplete code.

[aw2002]

Here is a link to my example and links to download all the files:

Example

Would appreciate any feedbacks!

[jscheuer1]

OK, I've got a local demo set up and what I am finding is that the variable 'drobmenuobj' is getting overwritten by the new rightmenu function. Then when you go to hide it, it now refers to the horizontal pop out, not to the the vertical drop down it originally referred to. If you are following what I am saying, what you need to do is - preserve the value of dropmenuobj until the vertical drop down is finished using it. To do this, a new variable needs to be created and used by the horizontal pop out to control its behavior. Also a new function similar to dynamichide() needs to be written to handle the pop outs' disappearance, leaving the original dynamichide function to process the drop downs. I'll work on it some more ,as I have time but, I thought you might like the heads up to see what you could come up with. Also, once this is all broken out, we may be able to combine some of the new code back into the old to save on processing time, code size and/or memory needs.

[jscheuer1]

The more I got into it the more I realized that everything had to be traced back to where it interfered with the original dropmenuobj and the functions applied to it. Fix one problem, another appears until all functions are allowed to run completely on their own separate tracks. One track for the drop outs and another for the drop downs. Here is a link to one possible solution, there may be other bugs to work out but, this gets the basic functionality into your example. I've put the script and style on the page, so you can just view source to see it all:

http://home.comcast.net/~jscheuer1/s...stddaw2002.htm