<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<meta name="author" content="abangsir" />
<title>jQuery弹性滑动导航菜单</title>
<style type="text/css">
body{ font-family:"Microsoft YaHei";}
.lavalamp{ 700px; float:right; position: relative;}
.lavalamp ul{ height: 35px; 100%; margin:17px 20px 0 0; position: absolute; z-index: 9999; overflow: hidden;}
.lavalamp ul li{ cursor: pointer; height: 35px; line-height:35px; font-size:20px; background: none; font-weight:bold; float:left; text-align: center;}
.lavalamp ul li a{ text-decoration: none; padding: 0 13px; text-align: center; display: block; background: none;}
.floatr {
position: absolute;
top: 15px;
107px;
height: 40px;
border-radius : 8px;
-moz-border-radius : 8px;
-webkit-border-radius : 8px;
background : rgba(0,0,0,.20);
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
}
</style>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var active_width = $(".active").innerWidth();
var active_left = $(".active").position().left;
$(".floatr").css(
{
active_width,
left:active_left
}
);
$(".lavalamp ul>li").hover(
function(){
var width = $(this).innerWidth();
var left = $(this).position().left;
$(".floatr").stop().animate(
{
width,
left: left
},
300
);
},
function(){
$(".floatr").stop().animate(
{
active_width,
left: active_left
}
);
}
);
});
</script>
</head>
<body>
<div class="lavalamp">
<ul>
<li class="active"><a href="#">新品上市</a></li>
<li><a href="#">畅销精品</a></li>
<li><a href="#">推荐礼品</a></li>
<li><a href="#">知名品牌</a></li>
<li><a href="#">工艺礼品</a></li>
<li><a href="#">回到首页</a></li>
</ul>
<div class="floatr"></div>
</div>
</body>
</html>