jq导航栏滑块效果

body内布局

<div class="wrapper">
	<div class="nav">
		<ul>
			<li class="active"><a href="#">nav1</a></li>
			<li><a href="#">nav2</a></li>
			<li><a href="#">nav3</a></li>
			<li><a href="#">nav4</a></li>
			<li><a href="#">nav5</a></li>
		</ul>
		<div class="bg"></div>
	</div>
</div>

css样式

<style>
	*{
		padding: 0;
		margin: 0;
	}
	.nav{
		width: 80%;
		height: 50px;
		margin: 0 auto;
		border-bottom:1px solid rgba(86,148,210,0.8);
		position: relative;
	}
	.nav ul{
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.nav ul li{
		flex: 1;
		list-style: none;
		text-align: center;
		z-index: 99;
	}
	.nav ul li a{
		display: block;
		height: 100%
		color: #666365;
		text-decoration: none;
		transition: color 0.3s linear;
	}
	.nav ul .active a ,.nav ul li a:hover{
		color: #fff;
	}
	.bg{
		position: absolute;
		bottom: 0;
		left: 0;
		width: 20%;
		height: 50px;
		background: rgba(86,148,210,0.8);
		transition: all 0.3s ease;
	}
</style>

jq脚本

<script>
	//鼠标移出时滑块回弹
	$(".nav").hover(function(){},function(){
		$(".bg").css("left",parseFloat($(".active").eq(0)[0].offsetLeft)+"px")
		$(".bg").css("width",parseFloat($(".active").width())+"px");
		$(".nav ul li a").css("color","#666365");
		$(".active a").css("color","#fff");
	})
	//鼠标hover li
	$(".nav ul li").hover(function(){
		//滑块移动
		$(".bg").css("left",parseFloat($(this)[0].offsetLeft)+"px");
		$(".bg").css("width",parseFloat($(this).width())+"px");
		//改变字体颜色
		$(".nav ul li a").css("color","#666365");
		$(this).children("a").css("color","#fff")
	})
	//点击是滑块固定
	$(".nav ul li").click(function(){
		$(this).addClass("active").siblings().removeClass("active")
	})
</script>