PDA

View Full Version : AnyLink Vertical AND Dropdown Menus



iowebpub
07-16-2008, 04:00 PM
1) Script Title: Vertical and Dropdown

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/anylinkvertical.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

ddadmin
07-16-2008, 07:12 PM
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:


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:


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:


<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.

Edited code for errors

iowebpub
07-16-2008, 10:56 PM
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!

iowebpub
07-17-2008, 12:39 AM
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

ddadmin
07-17-2008, 04:35 AM
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.

iowebpub
07-17-2008, 12:22 PM
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.

ddadmin
07-17-2008, 05:58 PM
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:


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


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

iowebpub
07-17-2008, 07:04 PM
Does this address the document.write line at the top of the code? Or do we just throw that out?

ddadmin
07-17-2008, 07:14 PM
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.

iowebpub
07-17-2008, 08:03 PM
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?

ddadmin
07-17-2008, 09:22 PM
Well, having a drop down menu have a completely unique style of its own can be done by first removing the CSS that styles the ID of the drop down menu:


#dropmenudiv{
position:absolute;
background-color: #E3FFB0;
border:1px solid black;
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
}

#dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 1px 0;
text-decoration: none;
font-weight: bold;
}

#dropmenudiv a:hover{ /*hover background color*/
background-color: #C7FF5E;
}

Then, create separate classes with all the necessary CSS targeting either the top or side drop down menu. You can't define more than one drop down menu if that's what you're asking, as all menus on the page share that menu (with id="#dropdowndiv").

iowebpub
07-17-2008, 09:59 PM
and not matter what I try, i always get the sidemenudiv style sheet, I never got the topmenudiv style sheet no matter what i passed as istop.

ddadmin
07-18-2008, 12:07 AM
I assume you've defined two CSS classes, something like:


.topmenudiv{
position:absolute;
background-color: lightblue;
border:1px solid black;
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
}

.topmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 1px 0;
text-decoration: none;
font-weight: bold;
}

.topmenudiv a:hover{ /*hover background color*/
background-color: #C7FF5E;
}

.sidemenudiv{
position:absolute;
background-color: silver;
border:1px solid black;
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
}

.sidemenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 1px 0;
text-decoration: none;
font-weight: bold;
}

.sidemenudiv a:hover{ /*hover background color*/
background-color: #C7FF5E;
}

thirdcherry
01-14-2009, 01:04 PM
For Using Both Drop Down and Vertical forms, i found the best solution for me was to keep both the .js separate, and simply rename one of them, so that all occurrences of the functions/divs were named different from the Drop Down version. In my case, I used "sidemenu" for the function. And "sidemenudiv" for the div names. I also made sure all my side menu array elements were named "side1", "side2" etc...

For Multiple Class Function:

change:

dropmenuobj.className=istop? topmenudiv : sidemenudiv


to:

switch (istop)
{
case 1:
dropmenuobj.className='yourclassone'
break
case 2:
dropmenuobj.className='yourclasstwo'
break
case 3:
dropmenuobj.className='yourclassthree'
break
default:
dropmenuobj.className='yourclassdefault'
}


your in page link:

<a href="#" onMouseover="sidemenu(this, event, side2, '150px', 1)" onMouseout="delayhidemenu()"

hope this helps others who may not have found any other ways.