jquerycssnavigationrollovers

Navigation Rollovers with CSS and apply jQuery

I would like to know how would i create rollovers for my navigation bar, and also apply some JQuery to set the opacity 0 to 100 once the navigation has been hovered if that is possible.

My navigation when hovered. The glow in the letters.

alt text

HTML: (ignore the empty divs)

<nav>
    <ul>
      <div class="ref1"><!-- empty div for reflections --></div>
      <li><a href="#">Home</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Client Login</a></li>
      <li><a href="#">Support</a></li>
      <li><a href="#">Contact</a></li>
      <div class="ref2"><!-- empty div for reflections --></div>
    </ul>
  </nav>

CSS:

nav { background: #282828 url(../images/nav-bg.png) repeat-x; border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; margin: 24px auto;  width: 638px; }
nav ul { padding: 18px 0;  }
nav ul li { background: url(../images/nav-sep.jpg) left center no-repeat; display: inline; padding: 32px; margin: 0 auto;  }
nav ul li:first-of-type { background: none; }
nav ul li:last-of-type { background: url(../images/ref2.png) no-repeat right bottom; margin: 10px 0 0 0; }
nav ul li a { color: #626262; font: 16px Arial, Helvetica, serif; }
nav ul li a:hover { color: #dfdfdf; }
Solution

  • what you need to do is set up your rollover images. One for normal "unhovered" state and one for "hovered" and apply relevant classes to your navigation links.

    ...
<li><a href="#" class="home">Home</a></li>
<li><a href="#" class="about">About Us</a></li>
...

    Then you can use CSS to display the image as a background image when the element is hovered:

    <li><a href="#" class="home">Home</a></li>

nav ul li.home:hover {
background: url(../images/home-hover.jpg);
display: block;  /* apply this to give the element the dimensions of your image*/
width: 69px; /*width of your nav image*/
height: 25px; /*height of your nav image*/
}

    This is just a quick example to get you started, but you need to set it up for each element.

    Also, you might want to check out CSS Sprites