jquery implementation background Sliding menu _jquery

Words do not say, directly attached source code, only for your reference

<div class= "Menu" >
 <ul id= "menu" >
 <li><a href= "#" >JavaScript</a></li>
 <li value= "1" ><a href= "#" >graphic design</a></li> <li><a href=
 "#" > html</a></li>
 <li><a href= "#" >user interface</a></li>
 <li>< A href= "#" >CSS</a></li>
 </ul>
 <div id= "Slide" ></div>
</div>

 * {margin:0; padding:0} body {font:14px Helvetica, sans-serif; font-weight:bold; background:# FFF}. menu {position:relative; Background:url (images/bg.gif) no-repeat; height:35px; width:459px}. Menu ul {list-style: None Z-index:10; Position:absolute; z-index:100; Padding:9px 5px}. Menu Li {float:left}. menu A,. menu a:active,. menu a:visited,. menu A:hover {text-decoration:none; colo R: #FFF; padding:10px} #slide {position:absolute; top:6px; height:24px; background: #89957a; z-index:10;} 

(function ($) {$.fn.extend ({bgslide:function (value) {//optional parameter Value=$.extend ({"FW": 2, "ftime": 100,
  "Stime":},value);  
  Position where the background is initialized var Liw = $ ("ul li:eq (0)", value.menu). width ();//Get the width var $slide = $ (this) for the first Li. Children ("div");
  $slide. css ({"width": Liw, "left": "5"});
   Animation function Hani (w,l) {$slide. Stop (TRUE)//critical word when hovering, let the animation in progress, and the animation in the queue, cancel the bug when the mouse keeps sliding; . Animate ({"width": w, "left": l+value.fw},value.ftime). Animate ({' Left ': l-value.fw},value.stime). Animate ({"Left": l
  +value.sw},value.stime). Animate ({"Left": l-value.sw},value.stime); Perform animation function Oani () {$slide. Stop (true) animate ({"width": Liw, Left: "5"},value.ftime). Animate ({"Lef 
  T ": l-value.fw},value.stime). Animate ({" Left ": l+value.sw},value.stime). Animate ({" Left ": l-value.sw},value.stime);;  } $ ("ul Li", this). Hover (function () {var w = $ (this). width (); Gets the width var l = $ (this) for the current Li. Position (). Left; Gets the horizontal axis of the current Li (!$ (this). Index () ==0) {//mouse hover in the first Li, does not occur animated Hani (W,L);
  }},function () {Oani ();
 }); })}) (JQuery);

HTML Structure idea:

Div: Place a background layer, relative positioning;

UL: Place menu content, absolute positioning;

Div: Place the sliding background layer, absolute positioning;

jquery thought Analysis:

When the mouse hovers over each Li, let the sliding background layer move animation horizontally to locate the current Li place, and have a left-right shaking effect; When the mouse leaves, let the background layer slide to the original position;

When the mouse hovers:

1. Obtains the current Li relative to the outermost div the horizontal coordinate, namely the horizontal axis value;

2. The horizontal axis of the sliding background layer is exactly equal to the current Li's horizontal axis;

3. Perform a left and right shaking of the animation, that is, change the current horizontal coordinate value;

When the mouse leaves:

1. Let the background layer slide to the initial position, that is to change the value of the horizontal axis, for the initial value;

Download: Demo

The above is the entire content of this article, I hope to help you, thank you for the support of cloud habitat community!