下午闲来无事 写了一段 用的jQuery框架 样式和脚本均为外部引用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="
http://www.w3.org/1999/xhtml"><head>
<title>Taobao UED Menu </title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link type="text/css" rel="Stylesheet" href="
http://www.space007.com/lab/fdevcss/core/reset/reset-min.css" />
<style type="text/css">
#container { margin: 0px auto; width: 952px; text-align: left; }
#menu { position: relative; }
#menu ul { padding: 0px 5px; border-bottom: 1px solid #FF6600; height: 30px; }
#menu ul li { float: left; padding: 8px 12px; padding-bottom: 4px; margin-bottom: 4px; }
#menu ul li a { color: #FF6600; text-decoration: none; }
#menu ul li.active a { color: #666; }
#slider { position: absolute; left: 0; bottom: -3px; height: 7px; width: 0; overflow: hidden; }
</style>
<script type="text/javascript" src="
http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js"></script> <script type="text/javascript" src="
http://plugins.jquery.com/files/jquery.color.js.txt"></script> <script type="text/javascript">
$.extend($.easing, {
easeInOutBack: function(x, t, b, c, d, s) {
if (s == undefined) s = 1.70158;
if ((t /= d / 2) < 1) return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b;
return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b;
}
});
$(function() {
var ul = $('#menu>ul'), lis = $('>li', ul), slider = $('#slider'), backgroundColor = ['#F2743D', '#F2CE3D', '#A3F23D', '#3D9FF2', '#F23DC5'], ls = [], ws = [];
lis.each(function() {
ls.push($(this).position().left);
ws.push($(this).outerWidth());
});
lis.each(function(i) {
$(this).hover(function() {
slider.stop().animate({
width: ws[i],
left: ls[i],
backgroundColor: backgroundColor[i]
}, 600, 'easeInOutBack');
}, function() {
if (i)
slider.stop().animate({
width: ws[0],
left: ls[0],
backgroundColor: backgroundColor[0]
}, 600, 'easeInOutBack');
});
});
slider.css({ width: ws[0], left: ls[0], 'background-color': backgroundColor[0] });
});
</script>
</head>
<body>
<div id="container">
<div id="menu">
<ul>
<li class="active"><a href="javascript:void(0);">Home</a></li>
<li><a href="javascript:void(0);">Archives</a></li>
<li><a href="javascript:void(0);">Blog</a></li>
<li><a href="javascript:void(0);">Photo Gallery</a></li>
<li><a href="javascript:void(0);">About</a></li>
</ul>
<div id="slider">
</div>
</div>
</div>
</body>
</html>