Any Link Drop Down Menu - Question

[BabbleOn]

Any Link Drop Down Menu

I'm using the aforementioned script on a web page. I've customised it to suit the page, and it's a great, thanks!

My problem is... I've added more links, which now means the 'drop down menu' is longer than the browser page that it opens in. This has caused the menu to 'drop up', rather than down, and seeing as the menu is right at the top of the page, it is unreadable, and consequently unclickable, too.

Is there a way to customise the script so that this doesn't occur, and the menu still 'drops down'? Failing that, is there any way of customising the script so that on mouseover it reveals two columns of links, side by side?

Thanks for any help in advance. God knows, I need it. =)

BabbleOn

[nootkan]

Just a thought...
What about creating another link category similar to the one you have and split up the links between the two?

[BabbleOn]

Thanks, nootkan..

I had thought about doing that, but seeing as the drop down menus are for an alphabetical theme.. ie: A, B, C, D, etc.. the problem drop down menu is the S category, being longer than the rest. I didn't want to have two "S menus" unless there is no other option.

Nevertheless, your response is appreciated. =)

[bfisher]

I once wrote a table inside of the array. Provided your CSS isn't too complex, you may be able to use the same method to create two columns. Use the first and last elements of the arrays for the opening and closing table tags, respectively. Then within the elements between, you can put a <tr><td>blah</td><td>blah2</td></tr>. I know it's not pretty, but It's bailed me out in the past.

Very simply, this is what it looks like:

menu0[0]='<table>'
menu0[1]='<tr><td>link 1</td><td>link 2</td></tr>'
menu0[2]='</table>'

Regards,
bfisher

[BabbleOn]

Thanks, bfisher.

I had wondered if using a table within the array is possible. Sadly, because of the need for regular updating, it would be impracticle to use that type of table, so I tried using a columns only table, which seems to work.. The problem is, using a table within the array seems to make the font different from the other drop down menus, and also, the entries on the second column do not line up with the first column, etc etc...

I'm sure there is a way around this, and I'm still 'playing' w/ it. Any further help from anyone would be greatly appreciated.

Thanks again, bfisher.

[ddadmin]

Below is one solution around this problem, which lets you specify a "max height" setting for a specific drop down menu you know will be very long. The drop down menu in this case will have scrollbars, and content that flows beyond the max height (ie: 500px) will be reached by scrolling within the drop down menu.

To implement this change, firstly, replace the function dropdownmenu() within the script with the modified version below:

function dropdownmenu(obj, e, menucontents, menuwidth, optmaxheight){
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
clearhidemenu()
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
//////// BEGIN MAX HEIGHT CODE ADDITION /////////////
if (typeof optmaxheight!="undefined"){
dropmenuobj.style.height=optmaxheight
dropmenuobj.style.overflow="scroll"
}
else{
dropmenuobj.style.height=""
dropmenuobj.style.overflow="auto"
}
/////// END MAX HEIGHT CODE ADDITION ///////////////
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")+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
}

return clickreturnvalue()
}

Then, in the HTML for the menu link you know has a very long drop down menu, do the following:

<a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '150px', '500px')" onMouseout="delayhidemenu()">Web Design</a>

The "500px" at the end is the added parameter you enter to specify this drop down menu's max height. The result is the drop down menu will be 500px tall and with scrollbars. Note that for all other menu links that don't have long drop down menus, this parameter shouldn't even be specified.

[bfisher]

BabbleOn-

Do you have code available for us to look at??

bfisher