Rollover buttons/menu's

[Cache-man]

I can code a little HTML, and can manage to create buttons that change colour when the mouse hovers over them or clicks, but I'd like to learn how to create the drop down menu's from buttons like the menu's that appear from the navigation bar on this site.
Could anyone offer a brief explanation of how to achive this effect and maybe post a little sample code so i can see how it's done.

Thanks in advance!

 

[Ian]

Like the menu at the top of the page? Its all done in CSS, so its light loading.

There is a more advanced version of the script here : http://www.youngpup.net/2004/transmenus/project

It has some sample code and is really easy to implement If you get stuck with it I'll try and help as I've used it a few times before

 

[Cache-man]

Thanks Ian. I'll try to work through that on one of my sample sites and give it a go.

Does anyone have more suggestions also. I think it's always good to learn from multiple different examples.

 

[Cache-man]

I had a look there Ian, and the effect is very nice, however it does rely heavily on javascript as well as CSS, and I would prefer not to use js where possible, although it does create a stunning fade in/out effect that i may use at some point.

I did a bit more searching myself for a pure CSS/HTML menu and came up with a few sites, but the following is very easy to follow and quite descriptive. I managed to work through it with relative ease.
http://www.seoconsultants.com/css/menus/horizontal/

If anybody else is interested in creating similar menu's then that is a good place to start.

Here is the first sample menu I created to replace my existing www.cache-community.co.uk menu's. I have uploaded it to here http://www.cache-community.co.uk/testmenu/

That was created using the sample code i found, I just need now to change the colouring, fonts and maybe a background image. I think I'll also try creating a horizontal version for use in a header/navigation bar. I'll let you know how i get on as i progress.

I'd still like to see a few more examples if anyone else knows of any.

 

[silver]

it's jscript but I like it

http://freshmeat.net/projects/dommenu/?topic_id=92

it was hard to find something that looked ok and could be centered,. used @ http://www.ideasinform.com/

Sil

 

[Cache-man]

Thanks Sil. That is similar to what i'm after.
I basically want something I can create simply, such as the example I managed to create. and then easily be able to modify it and make it look nicer without too much fancy coding.

 

[nodenet]

Try this one from Dynamic Drive

Hi
I used a great script from http://www.dynamicdrive.com/dynamicindex1/jimmenu/ after trying lots of others. The main problem with these menus is Browser Compatibility.
(Speaking of which the google ads on this site jump all over the place in Firefox)

This script is really good and works in nearly all browsers.

 

[Avalanche]

So I guess Flash is out of the question...

Av

 

[KGB-911]

(Speaking of which the google ads on this site jump all over the place in Firefox)

Never done that for me and i only use firefox.

 

[Cache-man]

So I guess Flash is out of the question...

Av

I'm not over keen on flash, although thats mainly because i have very little experience of using it.
I'm just looking for something thats easy to edit and looks effective.

 

[Cache-man]

Hi
I used a great script from http://www.dynamicdrive.com/dynamicindex1/jimmenu/ after trying lots of others. The main problem with these menus is Browser Compatibility.
(Speaking of which the google ads on this site jump all over the place in Firefox)

This script is really good and works in nearly all browsers.

I quite like this one, seems relatively esy to use too

 

[Avalanche]

I'm not over keen on flash, although thats mainly because i have very little experience of using it.
I'm just looking for something thats easy to edit and looks effective.

I hear ya, I'm not a big Flash man either... due to the non-searchable fact. I try to only use it for Tweening pictures.

Av