jQuery

Fading background menu colours

Works with:
FF3
Chrome
IE6
IE7
Opera
Safari

Description

Hover over a menu item and watch its background colour fade from one colour to another. Works with both hovering and clicking on a navigation button.

Demo

Without Fade
With Fade

JavaScript

  1. $("a").ready(function() {
  2.     $("a").click(function() {
  3.         $(this).blur();
  4.     });
  5. });
  6.  
  7. $(".menu_fade_back_colour").ready(function() {
  8.     $(".menu_fade_back_colour a").each(function(i) {
  9.         var backCol = $(this).css("background-color");
  10.        
  11.         $(this).addClass("hover");
  12.         var backHoverCol = $(".menu_fade_back_colour a.hover").css("background-color");
  13.         $(this).removeClass("hover");
  14.        
  15.         $(this).addClass("active");
  16.         var backActiveCol = $(".menu_fade_back_colour a.active").css("background-color");
  17.         $(this).removeClass("active");
  18.  
  19.         $(this).mouseover(function() {
  20.             $(this).stop();
  21.             $(this).animate({ backgroundColor: backHoverCol }, "400");
  22.         }).mouseout(function() {
  23.             //$(this).stop(); //play with this for a different fade effect
  24.             $(this).animate({ backgroundColor: backCol }, "400");
  25.         });
  26.        
  27.         $(this).mouseup(function() {
  28.             //$(this).stop(); //play with this to interupt fading of a click
  29.             $(this).animate({ backgroundColor: backHoverCol }, "10");
  30.         }).mousedown(function() {
  31.             $(this).stop();
  32.             $(this).animate({ backgroundColor: backActiveCol }, "10");
  33.         });
  34.     });
  35. });

CSS

  1. .navigation {
  2.     border: 1px solid black;
  3.     width: 120px;
  4.     margin: 20px;
  5.     padding: 0px;
  6.     list-style: none;
  7.     margin-left: auto;
  8.     margin-right: auto;
  9. }
  10.  
  11. .navigation li a {
  12.     padding: 4px;
  13.     display: block;
  14.     text-decoration: none;
  15.     color: white;
  16.     background-color: green;
  17.     border: 1px solid blue;
  18.     margin: 1px;
  19.     font-family: Tahoma;
  20.     font-size: 90%;
  21.     height: 14px;
  22.     line-height: 14px;
  23.     vertical-align: middle;
  24. }
  25.  
  26. .navigation li a:hover,
  27. .navigation li a.hover {
  28.     background-color: red;
  29. }
  30.  
  31. .navigation li a:active,
  32. .navigation li a.active {
  33.     background-color: blue;
  34. }

XHTML

  1. <div class="half_page">
  2.     <h5>Without Fade</h5>
  3.     <ul class="navigation">
  4.         <li><a href="#">Page 1</a></li>
  5.         <li><a href="#">Page 2</a></li>
  6.         <li><a href="#">Page 3</a></li>
  7.         <li><a href="#">Page 4</a></li>
  8.         <li><a href="#">Page 5</a></li>
  9.         <li><a href="#">Page 6</a></li>
  10.         <li><a href="#">Page 7</a></li>
  11.         <li><a href="#">Page 8</a></li>
  12.     </ul>
  13. </div>
  14.  
  15. <div class="half_page">
  16.     <h5>With Fade</h5>
  17.     <ul class="navigation menu_fade_back_colour">
  18.         <li><a href="#">Page 1</a></li>
  19.         <li><a href="#">Page 2</a></li>
  20.         <li><a href="#">Page 3</a></li>
  21.         <li><a href="#">Page 4</a></li>
  22.         <li><a href="#">Page 5</a></li>
  23.         <li><a href="#">Page 6</a></li>
  24.         <li><a href="#">Page 7</a></li>
  25.         <li><a href="#">Page 8</a></li>
  26.     </ul>
  27. </div>