Navigation rollovers

Discussion in 'Web Design and Development' started by phadam, May 24, 2009.

  1. phadam macrumors regular

    Joined:
    Jan 21, 2009
    #1
    Pretty quick question here. Completely new to web design and just doing this for myself. I made the template for the site in photoshop. Got the slicing and rollovers on the navigation bar. However, I still think that the nav bar is a little plain.

    Working in Dreamweaver and currently I have blue buttons on the nav bar and when you mouse over it switches to a lime green color. Could someone explain to me a how to: on keeping the original blue, and on mouse over switching to lime green for the active button and the rest to a low or dark lime green for the remaining buttons (the inactive buttons) that are not being moused over..

    hope that makes sense

    Thanks
     
  2. web_god61 macrumors regular

    web_god61

    Joined:
    May 14, 2004
    #2
    For solid colors you can use plain CSS but I believe the technique your looking for is called CSS Sprites.
     
  3. phadam thread starter macrumors regular

    Joined:
    Jan 21, 2009
    #3
    here is a link to what i am looking for.
    would this be done with css sprites??
     
  4. samwich macrumors regular

    Joined:
    Aug 5, 2007
    #4
    that website was done in flash

    to my knowledge you can make the navigation item that the mouse is hovering over change color, but you cannot make it change color and also have every other image change as well just using CSS

    could be wrong though...
     
  5. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #5
    Ah, a reverse focus kind of. Though I've never seen someone do it and never thought to try, it is possible. Here's a simplistic example.
    HTML:
    <ul>
      <li><a href="#">One</a></li>
      <li><a href="#">Two</a></li>
      <li><a href="#">Three</a></li>
    </ul>
    
    Code:
    ul {
     margin: 0; padding: 0;
    }
    li {
     display: inline;
     margin: 0; padding: .2em .5em;
     background: #eee;
     border: 1px solid #00f;
    }
    ul:hover li {
     background: #99f;
     border: 1px solid #f00;
    }
    ul li:hover {
     background: #eee;
     border: 1px solid #f00;
    }
    It may not completely work right with IE6/7. Not up for testing, but it does work in Firefox and Safari.

    Edit: OK, tested IE6 real quick and as expected, it doesn't work. It's because IE6 only recognizes the :hover on the a tag. I don't have IE7 to check.
     
  6. web_god61 macrumors regular

    web_god61

    Joined:
    May 14, 2004
    #6
    Have a background image similar to this:

    ====Dark Green=====| Light Green |====Dark Green=====

    make sure its as long as every menu item on each side then use the CSS property background position to move the background image left or right, the effect will be that one item will be light green while the rest will be dark green.

    Should work.
     

Share This Page