CNN's Fancy Menu Design - How?

[GWG]

I wonder if anyone knows a way to implement the main menu at www.cnn.com? [The left hand side menu /Home Page/U.S./World/etc].
I have tried various ideas using a style sheet but can't quite get the sculptured effect - Help!

Any help appreciated.

Regards

[AdamBrill]

Try using <div> tags with styles. Then, just use an onmouseover to change the background color. That's about the best way to do that.

[GWG]

Thanks Adam,
I have managed to use various styles along with javascript functions to change the colors when selected. My difficulty is getting the sculptured look and feel. Any ideas?
Regards,

[pyro]

Here is some code I wrote up that looks exactly like CNN's. Just remember to change your links in the onClick and <a href=""> Also you must specify which page you are currently on in the links if you want that link to be red. To do this you change the class to <div class="link1" instead of <div class="link", and delete the onmouseover and onmouseout. If you don't want to do this, just set all the classes to link.

If you know anything about CSS, this will be very easy to customize. Hope this helps you.

[pyro]

Oh, by the way. Take a look at how I did it, maybe (hopefully) you can learn something from it. :D

[GWG]

Thanks Pyro,
Your solution worked a treat :-)

I have invested some time in my site and have used a table to hold the menu with javascript to change the style for the active menu item. So I used your style design instead of mine and it worked first time!

I only posted the request for help a few hours ago - what a super turn around.

Happy New Year and best regards

[pyro]

Glad you liked it. I actually had the code done in about 15-20 minutes but wanted to make it easier to use, so I spent a bit more time on it.

Post a link to your site, if you don't mind. I'd like to take a look at it. :)

[GWG]

I am actually webmaster for two sites and have now implemented the same menus on both - but with different color schemes. They are:

www.retreads.org.uk and
www.sudburychess.org.uk

Again, much obliged.

Regards

[pyro]

Just Curious...

How did you set the page you are currently on to be the one in red? I see you didn't do it my method of using a different class.

[GWG]

I used a javascript I picked up from the net [and hacked it] to change the style class for the table cell containing the selected menu item. I had to add some variables to store the old selection so that I could return it to the normal style when a new menu item is selected. But nothing complicated.

Regards

[pyro]

Would you mind posting the code that does this for you? I might like to use it... :)

[GWG]

Attached code demonstrates my final solution. To get the selected menu item to change colour I used a javascript function to change the style. However, in order ro be able to revert back to the standard style when a new menu item is selected, I had to store a reference to the old menu item. I could then change the old menu item style back. I also had to keep track of whether the menu was actually clicked to avoid interaction with the 'hover' change style.

I am sure you will quickly figure out any other details from the code.

Regards.