Multiple Columns in drop down box?

[mikeybags]

1) Script Title:
AnyLink Drop Down Menu

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

3) Describe problem:
Hi there,

I am using the script designed above to create drop down boxes on my site. The problem is a couple of them have MANY (30+) options in the drop down, so it adjusts to start at the top of the page when you hover over it. Here's the link, so you can see.

http://www.ucslhh.com/ucsl.html

The first 2 ("league info" and "season info") work fine, but you'll see what I mean when you hover over "clubhouses".

There are so many options that you have to scroll down to see them all.

I was wondering if there's a way to make that drop down box become 2 columns, that way the links will start BELOW the actual image they're coming off of (as they do on the first 2), it won't go all the way to the bottom of the screen, and it's easier to find the option needed without having to scroll down. Is it possible?

Thanks in advance,

Mike

[jscheuer1]

This worked out well here. First, I made up a class in the stylesheet for the clubhouse menu (note - these styles will get added to the #dropmenudiv a ones, but only for links with the class="clubs"):

<style type="text/css">

#dropmenudiv{
position:absolute;
border:1px solid black;
border-bottom-width: 0;
font:normal small-caps 10px Agency;
line-height:18px;
z-index:1;
}

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

#dropmenudiv a.clubs {
width:50%;
float:left;
}

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

.style1 {color: #FFFFFF}
</style>

Next, I inserted the class name for each link in that menu's array:

var menu3=new Array()
menu3[0]='<a class="clubs" href="http://ucslhh.com/HHRecord/Results/Page_T10.htm" target="1">Anaheim Angels</a>'
menu3[1]='<a class="clubs" href="http://ucslhh.com/HHRecord/Results/Page_T25.htm" target="1">Arizona Diamondbacks</a>'
menu3[2]='<a class="clubs" href="http://ucslhh.com/HHRecord/Results/Page_T14.htm" target="1">Atlanta Braves</a>'
menu3[3]='<a class="clubs" href="http://ucslhh.com/HHRecord/Results/Page_T0.htm" target="1">Baltimore Orioles</a>'
menu3[4]='<a class="clubs" href="http://ucslhh.com/HHRecord/Results/Page_T1.htm" target="1">Boston Red Sox</a>'
menu3[5]='<a class="clubs" href="http://ucslhh.com/HHRecord/Results/Page_T19.htm" target="1">Chicago Cubs</a>'
menu3[6]='<a class="clubs" href="http://ucslhh.com/HHRecord/Results/Page_T5.htm" target="1">Chicago White Sox</a>'
menu3[7]='<a class="clubs" href="http://ucslh . . . etc.

Finally, I edited the call for menu3 to allow it to be wide enough for two columns:

<a href="default.htm" onClick="return clickreturnvalue()" onMouseOver="dropdownmenu(this, event, menu3, '250px')" onMouseOut="delayhidemenu()"><img src="images/ucsl_10.jpg" alt="" width=85 height=22 border="0"></a>

Notes: The clubs class adds to the #dropmenudiv a styles as I said and actually changes the width to 50%. The float left appears to be required to create the columnar look. However, a float often needs to be later cleared. I didn't do that in this case as, it didn't seem to be necessary.

[mikeybags]

Wow, that's awesome. Thank you very much.

Now I'm more than likely going to run into that problem with the "salaries" one too, because it's going to have a similar number of links. Should I just put them as the class "clubs" as well (in the link for that menu's) array, or should I add another class in the style sheet for them separately, as you did with that? I'm assuming I can just give them the class "clubs", since I'm not doing anything really different there, but I just wanted to make sure. As you could probably tell if you viewed the code, I've never done this before, and am just taking the learn as I go approach, after my friend got it all started.

Thanks again, I really appreciate it.

[jscheuer1]

You can probably use the same class for salaries, as long as you make sure that the menu call (the 'finally' part from my last post) for the salaries drop down is set wide enough to allow two columns.

[mikeybags]

Yup, that worked.

On a semi-unrelated note...is there a way to make it so the links don't change color after they are visited? Right now it's set to have them all blue (I'd prefer black, but that's no big deal), but when you click them they become purple, which I definitely want to do away with. I don't see anything in the code for visited links.

[jscheuer1]

You can add a rule like that:

#dropmenudiv a:visited, #dropmenudiv a.clubs:visited { /*visited color*/
color: #000000;
}

[boogyman]

You can add a rule like that:

#dropmenudiv a:visited, #dropmenudiv a.clubs:visited { /*visited color*/
color: #000000;
}

that only accounts for the visited, he said he would prefer it to all be black so I would add that into your declaration

#dropmenudiv a:link, #dropmenudiv a.clubs:link { /*original color*/
color: #000000;
}
#dropmenudiv a:visited, #dropmenudiv a.clubs:visited { /*visited color*/
color: #000000;
}
#dropmenudiv a:active, #dropmenudiv a.clubs:active { /*while link is being clicked color*/
color: #000000;
}
#dropmenudiv a:hover, #dropmenudiv a.clubs:hover { /*mouseover color*/
color: #000000;
}

or you can just do a generic one to cover all your bases

#dropmenudiv a, #dropmenudiv a.clubs{ /*color for all link states*/
color: #000000;
}

Note: if you want all of your links on the page to be this way, get rid of the prefix's and just set

a { /*color for all link states*/
color: #000000;
}

[jscheuer1]

that only accounts for the visited, he said he would prefer it to all be black so I would add that into your declaration

. . .

or you can just do a generic one to cover all your bases

#dropmenudiv a, #dropmenudiv a.clubs{ /*color for all link states*/
color: #000000;
}

Note: if you want all of your links on the page to be this way, get rid of the prefix's and just set

a { /*color for all link states*/
color: #000000;
}

These last two ideas won't work in IE, perhaps others.

[mikeybags]

Awesome, that worked! Looks much better now.

Now one of the people who visited is having a problem. I don't have any in FF or IE, but he does in IE 7.

all the links(except for the news link) for me send me to www.ucslhh.com/default/

then i get a no web page found error...

internet explorer 7 is my browser...even that on says default on it

when i goto league info...all i get is a web page that is a bigger version of the info on the front page...

just trying to help you out with the info

Does anyone know why he'd be having this problem? Everything works fine for me, so I'm a little lost here...I probably slopped up some code that effects him but not me, I'd imagine...

[jscheuer1]

Your friend has javascript disabled and is talking about the link behavior with no drop downs. Without javascript enabled the 'header' links are active. You should either configure them to lead to alternate, javascript disabled content or to a page (perhaps targeted into the iframe) that informs folks that they need to enable javascript to view the page properly.