下划线导航跟随
<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>
<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>
<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>
