What's the simplest method for mouseover on this navbar?

Discussion in 'Web Design and Development' started by iphonepiephone, Jun 23, 2011.

  1. iphonepiephone, Jun 23, 2011
    Last edited by a moderator: Jun 23, 2011

    iphonepiephone macrumors regular

    Joined:
    Oct 9, 2009
    #1
    Hi people. Trying to split this navbar into slices, one per link, so that onmouseover causes the shade to lighten, giving visual feedback to the visitor. Am I best to use an unordered list, in block mode, such as:

    Code:
    <ul id="navbar">
    <li id="someLink"><a href="#"><img src="sliceID.png" /></a></li>
    </ul>
    
    Thx

    [​IMG]
     
  2. JCL, Jun 23, 2011
    Last edited: Jun 23, 2011

    JCL macrumors member

    Joined:
    Jun 14, 2011
    #2
    Thats how I would do it.

    CSS sprites using a ul.
     
  3. IgnatiusTheKing macrumors 68040

    IgnatiusTheKing

    Joined:
    Nov 17, 2007
    Location:
    das Fort
    #3
    Yep, this. If, however, you wanted to use text instead of images for you links, check out web fonts like Typekit or, even easier, Google, which has a few "handwriting" fonts that look similar to yours.
     
  4. maxrosecollins macrumors newbie

    Joined:
    May 29, 2010
    #4
    I would use a ul with my links in then use CSS to indent the text by -9999px then set the correct slice of the image text to each link. and use :hover for the hover states on each link.

    Or use @fontface, forget images, and do it all in code. <- prob best.

    Max
     
  5. Hexiii macrumors 65816

    Hexiii

    Joined:
    Jun 30, 2011
    Location:
    Prague, Czech Republic
    #5
    Maybe this, but it makes the code a little chaotic. I use CSS :hover mostly.

    <img src="sliceID.png" onmouseover="this.src='slicemouseover'" onmouseout="this.src='sliceID.png'"/>
     
  6. digitalField macrumors regular

    Joined:
    May 21, 2004
    Location:
    portland
    #6
    yea stick to CSS and avoid images if you can, it might seem a bit confusing at first, but in the long run it is much more flexible.

    here are some great examples of navigation styles in pure CSS http://css.maxdesign.com.au/listamatic/

    here are some more advanced lists/navigation using CSS3 techniques.

    http://speckyboy.com/2010/03/15/15-css3-navigation-and-menu-tutorials-and-techniques/

    and if after all those you still think you need to use images then use sprites and CSS to activate the hover

    M!
     

Share This Page