Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Sep 2007
    Posts
    809
    Thanks
    5
    Thanked 2 Times in 2 Posts

    CSS Rollover Buttons

    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

  • #2
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    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.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #3
    Regular Coder
    Join Date
    Sep 2007
    Posts
    809
    Thanks
    5
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by Rowsdower! View Post
    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?
    Last edited by greens85; 12-04-2009 at 04:07 PM.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,743
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello green85,
    That site you link to has built their menu using tables.
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    Regular Coder
    Join Date
    Sep 2007
    Posts
    809
    Thanks
    5
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by Excavator View Post
    Hello green85,
    That site you link to has built their menu using tables.
    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/Edu...0World%20Site/

    Any ideas what I'm doing wrong?

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,743
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    Regular Coder
    Join Date
    Sep 2007
    Posts
    809
    Thanks
    5
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by Excavator View Post
    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?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •