jQuery

Fading menus

Works with:
FF3
Chrome
IE6
IE7
Opera
Safari

Description

Similar to fading background menu colours except this changes all aspects of the menu button style. Works with both hover and clicking on a navigation button.

Demo

Without Fade
With Fade

JavaScript

  1. $("a").ready(function() {
  2.     $("a").each(function(i) {
  3.         $(this).click(function() {
  4.             $(this).blur();
  5.         });
  6.     });
  7. });
  8.  
  9. $(".menu_fade_back_image").ready(function() {
  10.     $(".menu_fade_back_image a").each(function(i) {        
  11.         //duplicate the control(without event handlers) and fade it
  12.         var hoverClone = $(this).clone();
  13.         hoverClone.css({ "position": "absolute", "width":$(this).width(), "height":$(this).height(), "top":$(this).position().top });
  14.         hoverClone.addClass("hover");
  15.         hoverClone.insertAfter($(this));
  16.         hoverClone.hide();
  17.        
  18.         var activeClone = $(this).clone();
  19.         activeClone.css({ "position": "absolute", "width":$(this).width(), "height":$(this).height(), "top":$(this).position().top });
  20.         activeClone.addClass("active");
  21.         activeClone.insertAfter(hoverClone);
  22.         activeClone.hide();
  23.        
  24.         $(this).mouseover(function() {
  25.             $(this).hide();  //this prevents flickering (:hover in css)
  26.             hoverClone.fadeIn("slow");
  27.             $(this).show();
  28.         });
  29.        
  30.         hoverClone.mousedown(function() {
  31.             $(this).hide();  //this prevents flickering (:hover in css)
  32.             activeClone.fadeIn("slow");
  33.             $(this).show();
  34.         }).mouseout(function() {
  35.             $(this).fadeOut("slow");
  36.         });
  37.        
  38.         activeClone.mouseup(function() {
  39.             $(this).fadeOut("slow");
  40.             hoverClone.fadeIn("slow");
  41.         });
  42.     });
  43. });

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:after {
  12.     clear: both;
  13.     display: block;
  14.     content: ".";
  15.     visibility: hidden;
  16.     height: 0px;
  17. }
  18.  
  19. .navigation li a {
  20.     padding-left: 5px;
  21.     padding-right: 5px;
  22.     display: block;
  23.     text-decoration: none;
  24.     color: white;
  25.     background-image: url("button.jpg");
  26.     background-position: top left;
  27.     height: 24px;
  28.     line-height: 24px;
  29.     vertical-align: middle;
  30.     white-space: nowrap;
  31.     overflow: hidden;
  32.     border: 1px solid blue;
  33.     margin: 1px;
  34.     font-family: Tahoma;
  35.     font-size: 90%;
  36.     cursor: pointer;
  37. }
  38.  
  39. .navigation li a:hover,
  40. .navigation li a.hover {
  41.     background-position: left center;
  42. }
  43.  
  44. .navigation li a:active,
  45. .navigation li a.active {
  46.     background-position: left bottom;
  47. }
  48.  
  49. /*IE6 fix*/
  50. .navigation li {
  51.     float: none !important;
  52.     float: left;
  53. }
  54.  

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_image">
  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>