Jquery、css制作炫酷导航栏

直接看效果图

代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#nav{list-style-type: none;margin: 50px auto 0;width: 950px;height: 38px;color: #333;
				font-size: 14px;padding: 0;overflow: hidden;}
			#nav li{width: 104px;height: 36px;float: left;text-align: center;line-height: 38px;border-top: 1px solid #ccc;
				border-left: 1px solid #ccc;border-bottom: 1px solid #ccc;cursor: pointer;}
			#nav li:last-child{border-right: 1px solid #ccc;}
			#nav span{width: 100%;height: 38px;display: block;position: relative;z-index: -1;}
		</style>
		<script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
		<script type="application/javascript">
			$(document).ready(function(e){
				//点击li事件
				$('#nav li').click(function(e){
					$('.liclick').removeClass('liclick');
					$(this).addClass('liclick');
				});
				//设置一个颜色数组
				var color=['#FFDAB9','#7CFC00','#7FFFD4','#40E0D0','#C0C0C0','#FA8072','#FF69B4','#FFC0CB','#BA55D3'];
				$('#nav li').append('<span>');
				//给每个span添加颜色
				$('#nav span').each(function(index,element){
					$(this).css('background-color',color[index]);
				});
				//切换颜色*****注意：这里的38默认带了px，不需要自己写成38px
				$('#nav li').hover(function(){
					$(this).children('span').animate({'top':-38},200);
				},function(){
					$(this).children('span').animate({'top':0},200);
				});
			});
		</script>
	</head>
	<body>
			<ul id="nav">
				<li class="liclick">导航一</li>
				<li>导航二</li>
				<li>导航三</li>
				<li>导航四</li>
				<li>导航五</li>
				<li>导航六</li>
				<li>导航七</li>
				<li>导航八</li>
				<li>导航九</li>
			</ul>
		</nav>
	</body>
</html>