The use of plug-in lavalamp to achieve the dynamic display of navigation bar, previously used animate to achieve, the effect is not very good
<script src= "Js/jquery-2.0.0.min.js" type= "Text/javascript" ></script>
<script src= "Js/jquery.easing.min.js" type= "Text/javascript" ></script>
<script src= "Js/jquery.lavalamp.js" type= "Text/javascript" ></script>
<script type= "Text/javascript" >
$ (function () {
$ (". Nav"). Lavalamp ({
FX: "Backout",
SPEED:1100,
Mouseover:function (event, MenuItem) {alert ();}
});
});
</script>
<style>
. Nav {
width:650px;
height:100px;
Float:left;
position:relative;
}
. Nav Li {
Width:auto;
min-width:40px;
line-height:100px;
padding:0 15px;
margin:0 10px 0 0;
Color: #000;
font-size:14px;
Text-align:center;
Float:left;
}
. Nav Li.back {
Background: #86bf40;
-moz-border-radius:5px;
-webkit-border-radius:5px;
Line-height:2;
width:40px;
height:100px; /*----*/
Z-index:1; /*----*/
Position:absolute; /*----*/
margin-top:0px;
margin-left:5px;
}
. Nav Li a {
Color: #000;
Z-index:2; /*----*/
Font-variant:small-caps;
Text-decoration:none;
position:relative; /*----*/
Margin:auto 10px;
}
</style>
<body>
<!--header-->
<div class= "Headerbox" >
<div class= "header" > <a href= "http://www.uuspeed.com/" class= "logo ></a>
<ul class= "NAV" >
<li class= "Current" ><a href= "#" > Home </a></li>
<li class= "1" ><a href= "#" > Personal Edition </a></li>
<li class= "2" ><a href= "#" > Small edition </a></li>
<li class= "3" ><a href= "#" > Enterprise Edition </a></li>
<li class= "4" ><a href= "#" > Service and Price </a></li>
<li class= "5" ><a href= "#" > About Us </a></li>
</a>
</ul>
<div class= "Login" > <a href= "" class= "Icon_login" > Login </a> <a href= "" class= "Icon_login" > Register < /a> </div>
</div>
</div>
</body>
(function ($) {
$.fn.lavalamp = function (o) {
o = $.extend ({fx: "linear", speed:500, Click:function () {}}, O | | {});
Return This.each (function () {
var me = $ (this),
NoOp = function (EL) {
},
$back = $ (' <li class= "back" ><div class= "left" ></div></li> "). Appendto (Me),
$li = $ ("Li", this),
Curr = $ ("li.current", this) [0] | | $ ($li [0]). addclass ("current") [0];
$li. Not ('. Back '). Hover (function () {move (this);});
$ (". Nav li:eq (0) a"). CSS ("Color", "#FFF");
function Setcurr (EL) {alert (el.offsetwidth);
$back. css ({"Left": el.offsetleft+ "px", "width": el.offsetwidth+ "px"});
Curr = El;
};
function Move (EL) {
$back. each (function () {
$.dequeue (This, "FX"); }
). Animate ({
WIDTH:EL.OFFSETWIDTH-40,
Left:el.offsetLeft
}, O.speed, O.fx,function () {
var a0=$ (". Nav li:eq (0) a");
var a1=$ (". Nav li:eq (1) a");
var a2=$ (". Nav li:eq (2) a");
var a3=$ (". Nav li:eq (3) a");
var a4=$ (". Nav li:eq (4) a");
var a5=$ (". Nav li:eq (5) a");
if (el.offsetleft==0) {
$ (". Nav li:eq (0) a"). CSS ("Color", "#FFF");
A1.CSS ("Color", "#000");
A2.CSS ("Color", "#000");
A3.CSS ("Color", "#000");
A4.CSS ("Color", "#000");
A5.CSS ("Color", "#000");
}
if (el.offsetleft==92) {
$ (". Nav li:eq (1) a"). CSS ("Color", "#FFF");
A0.CSS ("Color", "#000");
A2.CSS ("Color", "#000");
A3.CSS ("Color", "#000");
A4.CSS ("Color", "#000");
A5.CSS ("Color", "#000");
}
if (el.offsetleft==194) {
$ (". Nav li:eq (2) a"). CSS ("Color", "#FFF");
A1.CSS ("Color", "#000");
A0.CSS ("Color", "#000");
A3.CSS ("Color", "#000");
A4.CSS ("Color", "#000");
A5.CSS ("Color", "#000");
}
if (el.offsetleft==296) {
$ (". Nav li:eq (3) a"). CSS ("Color", "#FFF");
A1.CSS ("Color", "#000");
A2.CSS ("Color", "#000");
A0.CSS ("Color", "#000");
A4.CSS ("Color", "#000");
A5.CSS ("Color", "#000");
}
if (el.offsetleft==398) {
$ (". Nav li:eq (4) a"). CSS ("Color", "#FFF");
A1.CSS ("Color", "#000");
A2.CSS ("Color", "#000");
A3.CSS ("Color", "#000");
A0.CSS ("Color", "#000");
A5.CSS ("Color", "#000");
}
if (el.offsetleft==528) {
$ (". Nav li:eq (5) a"). CSS ("Color", "#FFF");
A1.CSS ("Color", "#000");
A2.CSS ("Color", "#000");
A3.CSS ("Color", "#000");
A4.CSS ("Color", "#000");
A0.CSS ("Color", "#000");
}
});
};
});
};
}) (JQuery);
