本文主要是介绍下划线跟着走的导航效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
效果图：
css部分：
<style type="text/css">
.navCon{
min-width: 1200px;
height: 43px;
margin: 0 auto;
position: relative;
}
.navCon ul li{
float: left;
list-style-type: none;
background: #f1eeee;
}
.navCon ul li a{
display: inline-block;
padding: 10px 20px;
text-decoration: none;
color: red;
}
.navCon ul li:hover{
background: #cacaca;
}
.navCon ul li:hover a{
color: #002A80;
}
.navCon ul li.active{
background: #cacaca;
border-bottom: 2px solid #000000;
}
.navCon ul li.active a{
color: #002A80;
}
.bottomLine{
width: 0px;
height: 2px;
background: black;
position: absolute;
bottom: 0px;
}
.clear{
clear: both;
}
</style>
html部分：
<nav class="navCon">
<ul>
<li><a href="#">导航1</a></li>
<li><a href="#">导航2导航2</a></li>
<li><a href="#">导航3导航3导航3</a></li>
<li><a href="#">导航4导航4导航4导航4</a></li>
<li><a href="#">导航5导航5导航5导航5导航5</a></li>
<div class="bottomLine"></div>
</ul>
</nav>
js部分：
<script src="js/jquery.3.3.1.js"></script>
<script type="text/javascript">
$(".navCon ul li").hover(function(){//鼠标移入
var left = $(this).position().left;
var width = $(this).width();
console.info("left:"+left+"width:"+width);
$(".bottomLine").css({opacity:1})
$(".bottomLine").stop().animate({
left:left,
width:width
},300);
},
function(){//鼠标移出
$(".bottomLine").css({opacity:0})
});
$(".navCon ul li").click(function(){
$(".navCon ul li").removeClass("active");
$(this).addClass("active");
});
</script>
这篇关于下划线跟着走的导航效果的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
