CSS实现简单导航热点显示效果

CSS实现简单导航热点显示效果

网页源码

<script src="jquery.min.js"></script>

<div class="list">
	<div class="item">
		<span>首页</span>
		<em class="split"></em>
	</div>
	<div class="item">
		<span>产品介绍</span>
		<em class="split"></em>
	</div>
	<div class="item">
		<span>联系我们</span>
		<em class="split"></em>
	</div>
</div>

css代码

.list{
	border:1px solid #efefef; overflow:hidden;
}
.item{
	width:100px; text-align:center; position:relative; padding:10px 0;
	float:left;
}
.item span{
	line-height:2em; display:block; cursor:default; user-select:none;
}
.item.active span{
	color:blue; 
}
.split{
	width:0%; height:10px; background:blue; border-radius:5px; display:inline-block; position:absolute; bottom:0;
	left:50%;  transform:translateX(-50%);
}
.split.show{
	width : 60%;
	animation:xianshi ease-in-out 0.3s;
}
.split.hide{
	animation:yincang ease-in-out 0.3s;
}
@keyframes xianshi{
	0% { width:0px; }
	100% { width:60%; }
}
@keyframes yincang{
	0% { width:60%; }
	100% { width:0%; }
}

jquery代码

$(function(){
	$('.item').click(function(){
		$(this).addClass('active');
		$('.split',this).removeClass('hide').addClass('show');
		$(this).siblings('.item').removeClass('active').find('em').each(function(){
			if($(this).hasClass('show')){
				$(this).removeClass('show').addClass('hide')
			}
		});
	});
});