Example code of the jQuery gradient light navigation menu _ jquery

Today, we will introduce a navigation menu for jQuery gradient lighting effect. This is a simple navigation menu that is implemented through jQuery's control of opacity.

The following describes the implementation process.

HTML Tag structure:

The Code is as follows:

• 
  Menu 1 menu 1
  


• 
  Menu 2 menu 2
  


• 
  Menu 3 menu 3
  


• 
  Menu 4 menu 4
  

CSS style:
Li style:

The Code is as follows:

. Animation_menu li {
/* Block Mode Display and horizontal Tiled Display */
Display: block;
Float: left;

/* The width and height of the background image */
Width: 111px;
Height: 50px;

/* Set vertical and horizontal text center */
Line-height: 50px;
Text-align: center;

Font-weight: bold;
Font-size: 18px;
List-style-type: none;
}

The style of a Initially seen:

The Code is as follows:

. Animation_menu li {
/* Here is our background image */
Background-image: url ("images/bg-sprite-topmenu.png ");
Background-repeat: no-repeat;

/* Set the position attribute so that the span can be located based on */
Position: relative;

Display: block;

/* We do not use pure black */
Color: #292724;
Text-decoration: none;
}

The span style displayed after the hover:

The Code is as follows:

. Animation_menu li a span {
/* Here is our background image */
Background-image: url ("images/bg-sprite-topmenu.png ");
Background-repeat: no-repeat;

/* Set block mode display, and specify the same width and height as the width and height of a, to make it overlap with the text in */
Display: block;
Height: 50px;
Width: 111px;
Text-align: center;
Position: absolute;
Top: 0;
Left: 0;

Color: # FFE2BB;
}

Use sprite technology to locate the various states of a and span:

The Code is as follows:

/* Normal style */
. Animation_menu li {
/* General gray background */
Background-position: 0-153px;
}
/* Hover blue highlighted background */
. Animation_menu li a span {
Background-position: 0-102px;
}

/* Style of link activation */
. Animation_menu li. current {
/* General gray highlighted background */
Background-position: 0 0;
}
/* Hover yellow highlighted background */
. Animation_menu li. current a span {
Background-position: 0-51px;
}

Css is over now. Let's take a look at javascript.

Finally, JavaScript
The gradient effect of the menu is mainly achieved by controlling the opacity. See the following code.

The Code is as follows:

// Hide the span style and text by setting opacity to 0
$ (". Animation_menu li a span" 2.16.css ("opacity", "0 ");

// Bind a hover event
$ (". Animation_menu li a span"). hover (
// Mouse on Event
Function (){
// Dynamically change the opacity from 0 to 1, so that the style and text of the span will be displayed slowly, covering the style of
$ (This). stop (). animate ({
Opacity: 1
}, "Slow ");
},
// Mouse out event
Function (){
// When the mouse is removed, it is dynamically changed to 0, so that the span is invisible and the style of a is displayed.
$ (This). stop (). animate ({
Opacity: 0
}, "Slow ");
}
);

// Bind the click event, click the current connection, add the current class to li, and remove the current class from other li
$ (". Animation_menu li a"). click (function (){
$ (". Animation_menu li a"). each (function (index, item ){
$ (Item). parent (). removeClass ("current ");
});
$ (This). parent (). addClass ("current ");
});

Now it's all over. I hope this jQuery navigation menu will give you some inspiration.