標籤：style http color os io cti ar html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
*{
padding:0;
margin:0;
}
ul,li{
list-style:none;
}
.nav{
height:30px;
background:rgba(224,0,0,.5) !important;
}
.nav li{
float:left;
padding:0px 20px;
line-height:30px;
height:30px;
cursor:pointer;
}
.nav li a{
color:#fff;
text-decoration:none;
display: block;
}
.nav li:hover{
background:red;
}
.box{
position:relative;
}
.active{
position:absolute;
height:5px;
background:orange;
}
</style>
<body>
<div class="box">
<ul class="nav">
<li class="hover"><a href="#">菜單1</a></li>
<li><a href="#">菜單2</a></li>
<li><a href="#">菜單3</a></li>
<li><a href="#">菜單4</a></li>
<li><a href="#">菜單5</a></li>
<li><a href="#">菜單6</a></li>
<li><a href="#">菜單7</a></li>
<li><a href="#">菜單8</a></li>
<li><a href="#">菜單9</a></li>
</ul><!--nav-->
<div class="active"></div>
</div><!--box-->
</body>
</html>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(function(){
//擷取第一個li的寬度
var firstLiWidth = $(‘.nav li‘).eq(0).outerWidth();
//定義動畫菜單的寬度
$(‘.active‘).css(‘width‘, firstLiWidth+‘px‘);
//滑鼠進入時，active跟隨，根據它的索引值來定位
$(‘.nav li‘).mouseover(function(){
// alert($(this).index());
$(‘.active‘).stop().animate({
left: $(this).index() * firstLiWidth +‘px‘
}, 400);
}).mouseout(function(){
//滑鼠離開的時候，遍曆所有li然後根據哪個有 hover這個class的時候那麼滑鼠就停留在那裡
$(‘.nav li‘).each(function(){
if ($(this).hasClass(‘hover‘)) {
$(‘.active‘).stop().animate({
//根據它的索引值和第一個菜單寬度來定它的位置
left: $(this).index() * firstLiWidth +‘px‘
}, 400);
};
});
});
//滑鼠點擊的時候加上class讓它進行active的定位
$(‘.nav li‘).click(function(){
$(this).addClass(‘hover‘).siblings().removeClass();
});
})
</script>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
