AnyLink JS Drop Down Menu (Columns)

[seeoursound]

1) Script Title: AnyLink JS Drop Down Menu

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

3) Describe problem: First problem was with a long single column menu, if it went beyond the page you could not scroll down if your mouse does not have a scroll wheel.

I fixed this by going to 3 columns. But the style of this sucks. It add's Hyperlink underlines and I can not format the menu into a nice looking grid. (Like the single column looks).

How can I get rid of the underlines and format a nice looking grid?

http://www.seeoursound.com

[ddadmin]

This is really just a question of modifying the CSS used to style the multi column menus as defined inside "anylinkmenu.css", specifically, this section:

/* ######### Alternate multi-column class for drop down menus ######### */
"
"

To get a very simple grid like look for example, you might try replacing the default code in that section with the below instead:

.anylinkmenucols{
position: absolute;
width: 350px;
left: 0;
top: 0;
visibility: hidden;
border: 1px solid black;
padding: 10px;
font: normal 12px Verdana;
z-index: 100; /*zIndex should be greater than that of shadow's below*/
background: #E9E9E9;
}

.anylinkmenucols li{
padding-bottom: 5px;
border-bottom:1px solid black;
}

.anylinkmenucols li a{
display: block;
text-decoration:none;
}

.anylinkmenucols li a:hover{
color: red;
}

.anylinkmenucols .column{
float: left;
padding: 3px 8px;
margin-right: 5px;
}

.anylinkmenucols .column ul{
margin: 0;
padding: 0;
list-style-type: none;
}

You can take this as far as your knowledge of CSS permits...

[seeoursound]

Thank You.

This got me closer and with some more tweeking it looks much better.

Is there a way to add borders between the columns? To box in each option?

Bob

[ddadmin]

Is there a way to add borders between the columns? To box in each option?

Well the first thing that comes to mind is just to add a border to the right side of each LI element using CSS. As you may have tried already though, that doesn't work well in that the border appears to the right of every LI, and not just the LIs to the left of the rightmost column. I'm sure there's probably some workaround in CSS, but that's up to you to explore.

It's worth mentioning that there is also AnyLink CSS Menu, with which the menus are all defined as HTML markup on the page. The advantage of this is that you can customize their style a lot easier than the JavaScript version you're using, as you can inject inline CSS inside the markup. To add a border between columns, you'd just add the CSS border attribute to the left column's LI elements and not the right's.