Styling <ul> as <select>with CSS

[thindenim]

Hi there,

I'm doing a tweak on a menu at the moment, as it's getting pretty long...

What I want to achieve is in effect something that looks like this: -

<select>
<option value="link1">Link 1</option>
<option value="link1">Link 2</option>
<option value="link1">Link 3</option>
</select>

But I don't want to lose the text links, so I want to use in effect: -

<div id="whatever">
<ul>
<li><a href="link1">Link 1</a></li>
<li><a href="link1">Link 2</a></li>
<li><a href="link1">Link 3</a></li>
</ul>
</div>

I would have thought there would be some sort of css/js combination which would allow me to do this, but am struggling to find anything. Anyone have any ideas?


Many Thanks,
David

[Dubbya]

They're two totally different things.

The select list will only display one row at a time while the unordered list will display everything all the time.

Are you trying to implement a jump menu? It's a select menu that automatically navigates to the url specified with a JavaScript "OnChange" event.

They're easily implemented in DreamWeaver but you can find free JavaScripts all over the place.

Here's a free script you can use.
The JavaScript Source: Navigation: Jump Menu

(Try not to use this as a main navigation source though, it's not fully accessible to all browsers.)

[thindenim]

Hi Dubbya,

What I'm actually trying to do is achieve a jump menu, without putting the links in a select. I'm pretty sure it's possible with a list and some funky css/js, but just can't find a source.

In the code I want the links to be text links in an unordered list and the js to turn this into something that appears to the browser like a standard select box.


David