View Full Version : Anylink Dropdown Menu

07-03-2005, 02:43 PM

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?

07-03-2005, 07:48 PM
How is a horizontal mouseover different from a regular one?

07-03-2005, 08:41 PM
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.

07-03-2005, 09:18 PM
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.

07-04-2005, 02:13 AM
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>
<a href="http://www.cssdrive.com">History</a>

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
if (ie5||ns6){
if (hidemenu_onclick) dropmenuobj.onclick=function(){dropmenuobj.style.visibility='hidden'}
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")
return clickreturnvalue()

07-04-2005, 05:56 AM
. . .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:


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.

07-04-2005, 07:38 AM
Hi I will post everything on a webspace soon. Sorry about the incomplete code.

07-06-2005, 04:42 AM
Here is a link to my example and links to download all the files:

Example (http://www.geocities.com/scriptingweb/)

Would appreciate any feedbacks!

07-06-2005, 08:33 AM
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.

07-06-2005, 09:56 AM
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:


07-07-2005, 06:02 AM
Hi jscheuer1,

My god, this is nice...thanks so much!!! I appreciate all your efforts and help. Nice to see someone with great scripting skills out there helping others.

Once again, thanks a lot.


07-15-2005, 05:44 PM
way cool - this just totally helped me - thanks!

09-07-2005, 06:26 PM
I have successfully installed the modified script using submenus. However, the submenu seems to be statically located meaning even if the 5th item on the main menu has the submenu, the submenu pops up next to the second item as it does in the demo at http://home.comcast.net/~jscheuer1/side/testddaw2002.htm

How is the sub menu positioned in this script?

My example of this is at http://www.southwest.org/test.htm. If you hover over the last item on Home menu (test anchor) you will see the submenu pop up.


09-07-2005, 07:48 PM
I've been fiddling for over and hour ARGHHH, I'm not having much luck. I can't seem to get the menu to show up on my page at all. I'm using FrontPage 2000 and I put it in the head etc. I'm trying to make a vertical (menus pop out to side) menu and can't seem to do it????

09-08-2005, 04:21 AM

I see what you mean. After playing around with it I came up with a revision that I have uploaded, replacing the existing demo. It is just the rightmenu function that has changed. Here is where the positioning is now calculated (just the x, y and hAdj variables):

var hAdj=window.opera? 1.8 : 1.5
if (window.event){ // IE
var x = event.srcElement.offsetWidth
var y = getposOffset(event.srcElement, "top")-(event.srcElement.offsetHeight*hAdj)
else if (e.stopPropagation){ // Mozilla
var x = e.target.offsetWidth
var y = getposOffset(e.target, "top")-(e.target.offsetHeight*hAdj)
}You can fudge around with 1.5 if you like. It was a bit off in Opera, but not much, hence the 1.8 for that browser. Here is where the actual position is set:

subdropmenuobj.style.top=y+"px"Once again, this is all within the updated rightmenu function. Don't forget to refresh the demo if cached. It now has three Test Anchors, two on the first drop down, one on the second.

09-08-2005, 01:28 PM
Thanks for your quick work on this. I have loaded the new script onto my test page and found that the submenu positioning gets messed up if the link is not at the top of the page. See http://www.southwest.org/test.htm

Any way to fix this?


09-09-2005, 02:56 AM
I see what you mean again, use this functon rightmenu():

function rightmenu(obj, e, dropmenuID){
if (window.event)event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
if (typeof subdropmenuobj!="undefined") //hide previous menu
if (ie5||ns6){
if (hidemenu_onclick) subdropmenuobj.onclick=function(){subdropmenuobj.style.visibility='hidden'}
subdropmenuobj.onmouseout=ie5? function(){ subdynamichide(event)} : function(event){ subdynamichide(event)}
subshowhide(subdropmenuobj.style, e, "visible", "hidden")
subdropmenuobj.style.top=getposOffset(obj, "top")-(dropmenuobj.y)-(obj.offsetHeight) +"px"
return clickreturnvalue()
}It could use a little tweaking but, it takes care of the major problem.

02-23-2006, 11:07 PM
What is the major difference between this code and the AnyLink DropDown Menu (
http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm) code?

For example, on the site I'm working on here (http://www.uca.edu/divisions/student/intramurals/testsite/) I use the Anylink DD for the menus that drop down from the buttons.

These are the arrays I use:

//Contents for HPER menu
var mnu_hper=new Array()
mnu_hper[0]='<a href="HPER/hours.html">Hours</a>'
mnu_hper[1]='<a href="HPER/policies.html">Policies</a>'
mnu_hper[2]='<a href="HPER/rules_regs.html">Rules &amp; Regs</a>'
mnu_hper[3]='<a href="HPER/forms.html">Forms</a>'
mnu_hper[4]='<a href="HPER/students.html">Meet The Student Staff</a>'
mnu_hper[5]='<a href="HPER/membership.html">Membership</a>'
mnu_hper[6]='<a href="HPER/floorplan.html">Floorplan</a>'
mnu_hper[7]='<a href="HPER/eqcheckout.html">Equipment Checkout</a>'

//Contents for fitness/wellness menu
var mnu_fitwell=new Array()
mnu_fitwell[0]='<a href="FitnessCenter/hours.html">Hours</a>'
mnu_fitwell[1]='<a href="FitnessCenter/policies.html">Policies</a>'
mnu_fitwell[2]='<a href="FitnessCenter/rules_regs.html">Rules &amp; Regs</a>'
mnu_fitwell[3]='<a href="FitnessCenter/forms.html">Forms</a>'
mnu_fitwell[4]='<a href="FitnessCenter/meet.html">Meet The Staff</a>'
mnu_fitwell[5]='<a href="FitnessCenter/fitcntr.html">Fitness Center</a>'
mnu_fitwell[6]='<a href="FitnessCenter/weightrm.html">Weight Room</a>'

//Contents for Group Exercises
var mnu_exercises=new Array()
mnu_exercises[0]='<a href="GroupExercises/news.html">News and Announcements</a>'
mnu_exercises[1]='<a href="GroupExercises/hours.html">Times</a>'
mnu_exercises[2]='<a href="GroupExercises/class_desc.html">Class Descriptions</a>'
mnu_exercises[3]='<a href="GroupExercises/meet.html">Meet The Staff</a>'

//Contents for Aquatics
var mnu_aqua=new Array()
mnu_aqua[0]='<a href="Aquatics/hours.html">Hours</a>'
mnu_aqua[1]='<a href="Aquatics/conditions.html">Conditions</a></a>'
mnu_aqua[2]='<a href="Aquatics/rules_regs.html">Rules &amp; Regs</a>'
mnu_aqua[3]='<a href="Aquatics/forms.html">Forms</a>'
mnu_aqua[4]='<a href="Aquatics/meet.html">Meet The Staff</a>'
mnu_aqua[5]='<a href="Aquatics/pool.html">Pool</a>'

//Contents for Intramural
var mnu_intra=new Array()
mnu_intra[0]='<a href="Intramurals/news.html">News &amp; Announcements</a>'
mnu_intra[1]='<a href="Intramurals/calendar.html">Intramural Calendar</a>'
mnu_intra[2]='<a href="Intramurals/standings.html">Point Standings</a>'
mnu_intra[3]='<a href="Intramurals/standings_c.html">Current Sports Standings</a>'
mnu_intra[4]='<a href="Intramurals/sports_spring.html">Sports Information</a>'
mnu_intra[5]='<a href="Intramurals/deadlines.html">Deadlines</a>'
mnu_intra[6]='<a href="Intramurals/forms.html">Entry Forms</a>'
mnu_intra[7]='<a href="Intramurals/handbook.html">Handbook</a>'
mnu_intra[8]='<a href="Intramurals/photos.html">Photos</a>'
mnu_intra[9]='<a href="Intramurals/meet.html">Meet The Staff</a>'

//Contents for Facilities
var mnu_fac=new Array()
mnu_fac[0]='<a href="Facilities/hper.html">HPER</a>'
mnu_fac[1]='<a href="Facilities/pool.html">Pool</a>'
mnu_fac[2]='<a href="Facilities/tennis.html">Tennis Courts</a>'
mnu_fac[3]='<a href="Facilities/softball.html">Softball</a>'
mnu_fac[4]='<a href="Facilities/raquetball.html">Raquetball Courts</a>'

I'd love to be able to turn a couple of those into sublinks.... Is it possible to let the CSS Menu use the arrays? I have very little javascript experience, so not sure what looking for... have noticed that populate menu from the AnyLink DD isn't in the code from the demo page found earlier on this thread... What else is different?

Would appreciate any help at all with this! :)

12-19-2007, 08:23 PM
Sorry for bumping an old thread but i encountered a problem when using the modified version of the script jscheuer1 made here (http://home.comcast.net/~jscheuer1/side/testddaw2002.htm)

When the First link in the drop down is a "Test anchor", the whole drop down sometimes disappear when you put your mouse over the test anchor.

This problem never occur when the test anchor is the second link.

I tried to understand but now i'm really lost about this problem.

If anyone can help me with this i'd be happy.

12-19-2007, 10:15 PM
Sorry for bumping an old thread but i encountered a problem when using the modified version of the script jscheuer1 made here (http://home.comcast.net/~jscheuer1/side/testddaw2002.htm)

When the First link in the drop down is a "Test anchor", the whole drop down sometimes disappear when you put your mouse over the test anchor.

This problem never occur when the test anchor is the second link.

I tried to understand but now i'm really lost about this problem.

If anyone can help me with this i'd be happy.

You should be sorry, just kidding. But that link is to code I worked out for someone else, using their code. I was never happy with it, though they were. If you want a multilevel menu, choose one from the many already available on DD, or elsewhere on the web.

12-19-2007, 10:49 PM
OK thanks for the anwser. I thought something could be made but i guess it will be easier to try another script.

12-20-2007, 02:05 AM
On a second thought, do you think this little bug can be fixed or its hopeless and i really need to find another script?

I cant find another script that i like. If it's really hopeless can anyone direct me to a multilevel drop down menu script that use a onmouseover event so i can my image for my menu.