这种导航条写法，我网上搜了一下类似的：测试过大多是有BUG。我这个是我自已写的，分享给大家！注意：原理这个很重要，这个特效只要原理搞明白了，实现起来就是很容易的！
直接写代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#dh{
width: 100%;
height: 48px;
background: #01204F;
}
#dh ul{
width: 980px;
height: 48px;
border-left: 1px solid darkviolet;
border-right: 1px solid darkviolet;
margin: 0 auto;
position: relative;
}
#dh ul li{
list-style: none;
float: left;
}
#dh ul li a{
height: 48px;
padding: 0 10px ;
color: #FFFFFF;
text-align: center;
font-size: 16px;
line-height: 48px;
display: inline-block;
text-decoration: none;
position: relative;
z-index: 2;
}
#dh ul li a.sy{
height: 48px;
width: 48px;
}
#dh ul .ssk{
position: absolute;
top: 0;
left: 0;
height: 48px;
width: 48px;
background: #CC0000;
}
</style>
<script src="../tu/jquery-1.11.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('li').mouseenter(function(){
$('.ssk').stop().animate({left:$(this).offset().left-$('li').eq(0).offset().left},600)
$('.ssk').css({width:$(this).width()});
})
$('li').mouseleave(function(){
$('.ssk').stop().animate({left:'0'},600);
$('.ssk').css({width:'48px'});
})
})
</script>
</head>
<body>
<div id="dh">
<ul>
<li><a href="" class="sy" style="background: #CC0000;">首页</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>
<li><a href="">体育</a></li>
<li><a href="">军事</a></li>
<li><a href="">NBA</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>
<div class="ssk"></div>
</ul>
</div>
</body>
</html>
上面代码效果静态图片：
原文链接：https://www.qiquanji.com/post/7668.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知