CSS Menu Help

**juergen** · 04 September 2007, 06:01 AM

Barry,

lots of big sites still have problems with IE7. If you have a content management system, 50 templates and perhaps 4 times the number controls (logical elements like menu, list and such), it takes a long time to adapt to a new browser.

Without JavaScript, you are pretty limited. As long as you can navigate everywhere without, you're fine. Just ensure, that you loose nothing but some effects when JavaScript is turned off.

I did not try myself but I would guess you could achieve the same effect with CSS, where you either bring a <div> to full height, or change visibility. For example the height solution could be a <div> containing "Top Songs" AND the songs. For example the hover event could expand the layer to full height. Thats just brainstorming btw. never tried something like that.

Juergen

**RedWombat** · 04 September 2007, 11:39 AM

I don't really like those collapsing sections on the left side of the Apple site, if that's what you're talking about.

I agree with Egg in that I saw no "drop-down menus." Just that terrible collapsing thing on the left.

I have put together a CSS based navigation for vertical and horizontal navigation system from resources around the web. I'm happy to share if you're interested. You can see an example of a horizontal menu in a test site I've been developing here: http://www.bigplan.net/client/mha/index.cfm?id=home A vertical menu system here: http://www.sebp.org/index.cfm?id=1000

As Juergen pointed out, you can't really have CSS navigation without JavaScript. You'll need it to make IE compatible. The menus won't work in IE without it, even though they are CSS based.

**barrym67** · 04 September 2007, 04:22 PM

Hi there Red

Yes, I must agree with you those collapsing sections on Apple's site arn't the best and that it was I meant by drop down, sorry.

I LOVE your expanding buttons at the top on the http://www.sebp.org/index.cfm?id=1000 site, and THAT IS EXACTLY what my client wants on an opening page, except that I have to put an image of a shark in there, like the one in "Jaws" the movie.

I also like the vertical css menu and I would appreciate any help you can give me with regards to that "expanding button" menu at the top of the page.

I can get CSS code for normal vertical dropdown menu off the net, but at this stage the client still is set on those collapsing ones.

Tks everyone for assisting.

**remi** · 04 September 2007, 04:57 PM

The ADxMenu is a great CSS based menu:

Simplest possible HTML
Simplest possible maintenance
Ready-made CSS for basic work
Visual design limited only by your graphic skills and CSS knowledge
It's free

See also the examples for the different menu types (horizontal/vertical/top to bottom/bottom to top).

Regards,
Remi

**barrym67** · 04 September 2007, 06:26 PM

Tks Remi for that link. Great resource - it will definitely come in handy.

**RedWombat** · 04 September 2007, 08:05 PM

Wow, thanks Remi. I had not seen ADxMenu before.

The menu I use is adapted from the Suckerfish Dropdowns, looks like from about the same time period. It doesn't use as much Javascript though.

Here's a link to a few resources I found and used to make mine.

http://www.alistapart.com/articles/dropdowns
http://solardreamstudios.com/learn/css/cssmenus

I did add and change a few things like the transparent background etc., but otherwise it's pretty close.

I noticed the ADxMenu has two more menu types than I have, that's nice.

We had a similar discussion about this awhile back. You might find it helpful as well: http://www.talkgraphics.com/showthre...&highlight=css

Barry, the menu at the top of the example you saw was a simple Flash menu - no drop-downs. The CSS menu is on the left of that site.