Ok, so I am working on a website and I need to come up with a CSS popout menu.

The current navigation is about 15 vertical rows, with each row having a link in it. These navigation rows are on the left side of the website.

I would like it setup so when you rollover a link with the mouse, a menu appears just to the right of the horizontal nav section.

The catch is, I would like it to be animated (if possible) but I would like the menu to be slightly transparent so you can see the website behind it. I would also like to have a background image on the transparent popout menu.

I have little experience with CSS menus, but I dont think this should be too difficult.

Any help would be appreciated!

Here is an example of what I'm talking about. It looks unprofessional but it's just a quick photoshop. The final version of the menu will (hopefully) look much more refined. Here is a photoshop of what Im going for:




Thanks!

I like to use the superfish menus. It uses jquery so you can have lots of slide-out effects that are flash-like.

To make the menu transparent you can use a repeating png transparent background.

To make the menu transparent you can use a repeating png transparent background.

Just an FYI - that won't work in IE6 if you're at all concerned with supporting the many people still stuck with it.

That is one of the few conditional things I keep for IE6. When ever I do a transparent drop down menu, I also have the ie6 css just use a solid similar color. I think that having the transparency not work in ie6 is rather trivial. Just making sure it all works and looks decent in ie6 is good enough for me.

And yes, I am concerned for users stuck with ie6. In the last 3 sites I have done, the client's view were all in ie6!
Who says ie6 is dead yet?

Thank you for the referral to the Superfish Menu site - never heard of them before.

I definitely want to use these menus and customize them as much as possible. However I am very new to this and I am lost in the "quick start guide". I don't even think I know how to create a simple CSS menu to get started. Would anybody here be interested in helping me out or pointing me in the right direction? Im just a designer trying to learn how to CSS, lol

Thank you

Unfortunately, css drop menus are going to be a pretty challenging task if you are just getting into css. You will definitely need a good starter course on menus.

This link is a great resource for square one:
http://css.maxdesign.com.au/listamatic/

This is an older article but you might pick up some of the functionality of a flyout:
http://www.cssplay.co.uk/menus/flyoutt.html

I'll try and find a few more...

Originally Posted by racer x

Unfortunately, css drop menus are going to be a pretty challenging task if you are just getting into css. You will definitely need a good starter course on menus.

This link is a great resource for square one:
http://css.maxdesign.com.au/listamatic/

This is an older article but you might pick up some of the functionality of a flyout:
http://www.cssplay.co.uk/menus/flyoutt.html

I'll try and find a few more...

Ok, so after I can get a simple CSS menu built...I can get started on the superfish part of it? Is superfish just an animation applied to a simple CSS menu?

thanks for your patience

PM sent