...

View Full Version : CSS Rollover Buttons



greens85
12-04-2009, 01:18 PM
Hi all,

I want to create a simple CSS based rollover state for my navigation, exactly like this one:

http://www.uteachrecruitment.com/

I've looked at the source code for the site and can see this uses image swap, but I thought it would be possible to achieve the same result with pure CSS...

Can anyone advise?

Many thanks

Rowsdower!
12-04-2009, 01:36 PM
I haven't looked at the link, but based on the context of your question you need to research and dabble with "sprite" menus. The basic concept is that one single image holds both (or potentially all 4 or 5) possible states of your menu item (the basic appearance, hover state, active state, and focus state if you are using all possibilities - plus possibly a 5th state to show that this menu item is the current page). Then on any relevant state changes you simply change the background-position style to show the different image appearance without any pop-in from loading.

Check out some examples available here to get started:
http://www.cssplay.co.uk/menus/
(specific example here: http://www.cssplay.co.uk/menus/menu5teen.html but there are plenty of others if you poke around a bit)

This should give you a good idea of the concept at play. If you get stuck in trying to create your own feel free to post a link to your test page for some help.

greens85
12-04-2009, 03:04 PM
I haven't looked at the link, but based on the context of your question you need to research and dabble with "sprite" menus. The basic concept is that one single image holds both (or potentially all 4 or 5) possible states of your menu item (the basic appearance, hover state, active state, and focus state if you are using all possibilities - plus possibly a 5th state to show that this menu item is the current page). Then on any relevant state changes you simply change the background-position style to show the different image appearance without any pop-in from loading.

Check out some examples available here to get started:
http://www.cssplay.co.uk/menus/
(specific example here: http://www.cssplay.co.uk/menus/menu5teen.html but there are plenty of others if you poke around a bit)

This should give you a good idea of the concept at play. If you get stuck in trying to create your own feel free to post a link to your test page for some help.

Thanks for the reply...

I don't actually think I need to go that complicated.. I just want some links with some padding being one colour, then once a rollover occurs want them to change colour with the same amount of padding.

However rather than have them stacked vertically, I would like them to display horizontally... so inline element i think?

Excavator
12-04-2009, 03:19 PM
Hello green85,
That site you link to has built their menu using tables (http://www.hotdesign.com/seybold/everything.html).
There is a much easier/better method than that. I have several examples of menus that use CSS rollovers here - http://nopeople.com/design/CSS%20tips/index.html
View the source to see how they're done.

greens85
12-04-2009, 04:57 PM
Hello green85,
That site you link to has built their menu using tables (http://www.hotdesign.com/seybold/everything.html).
There is a much easier/better method than that. I have several examples of menus that use CSS rollovers here - http://nopeople.com/design/CSS%20tips/index.html
View the source to see how they're done.

Hey Excavator,

This: http://nopeople.com/CSS/anotherNavBar/index.html

is exactly what I was talking about but I cant seem to get the margin/padding away from the sides and top:

http://www.education-world.co.uk/Education%20World%20Site/

Any ideas what I'm doing wrong?

Excavator
12-04-2009, 05:47 PM
The menu at http://nopeople.com/CSS/anotherNavBar/index.html is a set width with floated left buttons. You don't set the width on yours... Not sure a set width menu bar is what you want with your fluid layout anyway.

greens85
12-08-2009, 01:04 PM
The menu at http://nopeople.com/CSS/anotherNavBar/index.html is a set width with floated left buttons. You don't set the width on yours... Not sure a set width menu bar is what you want with your fluid layout anyway.

Is there anyway I can 'alter' the code to make it work with a fluid layout?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum