AnyLink Vertical AND Dropdown Menus

1) Script Title: Vertical and Dropdown

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...nkvertical.htm

3) Describe problem: I have a site where I need BOTH the Veritcal and the Dropdown menus.

What do I have to do to make them co-exist as they have a lot of the same function calls, etc.

Thank you in advance.

PS - http://www.ioweb.com/goodwill
I put as much of the JS in separate files and the HTML is template.html

Sure, here's a quick way to combine both functions to the original AnyLink Vertical Menu (so it can drop down as well).

Inside the script, replace the following chunk of code:

Code:

---

function dropdownmenu(obj, e, menucontents, menuwidth){
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
clearhidemenu()
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
populatemenu(menucontents)
if (ie4||ns6){
showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)
dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+obj.offsetWidth+horizontaloffset+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+"px"
}

---

with:

Code:

---

function dropdownmenu(obj, e, menucontents, menuwidth, istop){
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
clearhidemenu()
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
populatemenu(menucontents)
if (ie4||ns6){
showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)
dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-(istop? 0 : clearbrowseredge(obj, "rightedge")-obj.offsetWidth+horizontaloffset)+"px"
dropmenuobj.style.top=dropmenuobj.y+(istop? obj.offsetHeight : -clearbrowseredge(obj, "bottomedge"))+"px"
}
}

---

Then in your HTML, if you want an anchor link to cause its drop down menu to drop down instead of to the right, pass in a 3rd parameter:

Code:

---

<a href="default.htm" onMouseover="dropdownmenu(this, event, menu1, '165px', 'istop')" onMouseout="delayhidemenu()">Webmaster Links</a>

---

The only caveat is that the drop down function doesn't account for right/bottom window edges as the drop right function does.

Edit: Edited code for errors

When I replace that code you mentioned, it doesn't work either the vertical or the top ones, but if I put the code back to the original state, it ALMOST works, although I think it is picking up the vertical parameters for color, etc.

Check out www.ioweb.com/goodwill/template.html - the code I have is in nav.js

Thanks!

I put this in your code

function dropdownmenu(obj, e, menucontents, menuwidth, istop){
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
clearhidemenu()
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
populatemenu(menucontents)

Where it used to be

function dropdownmenu(obj, e, menucontents, menuwidth){
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
clearhidemenu()
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
populatemenu(menucontents)

Now I just have to get this changed over to a new css set based on vertical vs. top menus

Ah yes, I had forgotten that the function name itself was also changed to accept a new parameter. I've updated what I posted above to include that.

So now my issue is that I can differentiate a left nav from a top nave, but i need to the top nav to pay attention to a differnt sent of stylesheets than the left nav. The leftnav point to dropmenudiv, I see three references in your code where you refer to dropmenudiv...

dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv


and then at the beginning

if (ie4||ns6)
document.write('<div id="dropmenudiv" style="visibility:hidden;width: 160px" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')


I created a style sheet for the top menu items called topmenudiv - is there a way we can check to see if istop is present and then instatiate dropmenuobj with topmenudiv instead of dropmenudiv for the top menus? If we can, what can we do about the document.write line?

Or maybe it just isn't possible to use two separate style sheets when you use both top and side menus.

Thanks for all your help.

Well, one easy way to do this is to assign the drop down DIV a difference CSS class name, depending on whether it's a top drop down menu, or side. The CSS class would add to the existing "base" CSS of the drop down DIV. So for your CSS, you may try adding the rules:

Code:

---

.topmenudiv{
background-color: lightblue !important;
}

.sidemenudiv{
background-color: silver !important;
}

---

Then to get the script to apply either the first or second class above to the drop down div depending its orientation, inside function dropdownmenu(), add to the existing line below the addition in red:

Code:

---

dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
dropmenuobj.className=istop? "topmenudiv" : "sidemenudiv"

---

Does this address the document.write line at the top of the code? Or do we just throw that out?

The document.write() portion is unrelated to changing CSS class names, and is required regardless, as it generates the HTML for the drop down menu.

Okay, now that we know we have a top menu vs. a side menu, now we need to know whether it is top menu number 1 (which has it's own style) vs. menu number 2 (IT'S own style sheet) and menu number 3 which - you guessed it - has it's own unique style sheet. So how can we use the istop thing to tell whether it is top menu 1, 2 or 3 and associate the appropriate style sheet?