1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Wordpress Navigation Bar With Rollover Images

Discussion in 'Web Design' started by UNOIT, Sep 21, 2012.

  1. UNOIT

    UNOIT Newbie

    Joined:
    Apr 8, 2011
    Messages:
    37
    Likes Received:
    5
    Hi Everyone,

    I am trying to figure out how to create a nav bar in wordpress with image rollovers. Like on this site (divahound dot com) where the paw image shows up when you put your cursor on the nav bar item.

    Can anyone share how this is done?

    Thanks in advance!!!
     
  2. Zapdos

    Zapdos Power Member

    Joined:
    Oct 22, 2011
    Messages:
    597
    Likes Received:
    708
    Location:
    Eastern North Carolina
    Depends on how the nav bar is coded.

    Code:
    <style>
    a.nav {
    backgroundimage: url('/someimage.png')
    }
    
    a.nav:hover {
    background-image: url('/hover.png')
    }
    </style>
    
    <div class="menu">
      <a href="link" class="nav">text</a>
    <a href="link" class="nav">text</a>
    <a href="link" class="nav">text</a>
    </div>
    
    Essentially how it works. Just use the CSS pseudo-selector :hover on the link.


    Or you can do transitions/fades with jQuery. Just look up fadein/fadeout/transition/show/hide. jQuery UI has advanced effects.
     
    • Thanks Thanks x 1
  3. UNOIT

    UNOIT Newbie

    Joined:
    Apr 8, 2011
    Messages:
    37
    Likes Received:
    5
    Thanks Zapdos!!!
     
  4. x.Ampit.x

    x.Ampit.x Junior Member

    Joined:
    Jun 16, 2011
    Messages:
    114
    Likes Received:
    27