Wordpress Navigation Bar With Rollover Images

U

UNOIT

Newbie

Apr 8, 2011

37

5

• Sep 21, 2012

• #1

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!!!

 

Zapdos

Power Member

Oct 22, 2011

597

710

• Sep 21, 2012

• #2

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.

 

U

UNOIT

Newbie

Apr 8, 2011

37

5

• Sep 21, 2012
• Thread Starter Thread Starter

• #3

Thanks Zapdos!!!

 

x.Ampit.x

Junior Member

Jun 16, 2011

114

27

• Sep 21, 2012

• #4

http://youtube.com/createthenet

And find the tutorial for css rollover navigation bar you'll get the idea.


That channel is not mine.