导航模仿IBM

最新推荐文章于 2020-07-09 00:52:22 发布

编程之上

最新推荐文章于 2020-07-09 00:52:22 发布

阅读量908

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/ruizhengyun/article/details/45028093

版权

jquery 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>IBM 导航</title>
	<link rel="stylesheet" href="style.css">
	<style type="text/css">
		*{margin:0; padding: 0;}
		body{ text-align: center; color: #333; font-size: 12px;}
		ul,li{ list-style: none;}
		.wrapper{ width: 1000px; text-align: left; margin: 0 auto;}
		.cf:before,.cf:after{ content:''; display:table;}
		.cf:after{clear:both;}
		.cf{zoom:1;}
		#nav{ height: 40px; line-height: 40px; background-color: #333; width: 100%;}
		#nav .list li{ width:120px; float: left; height: 40px; line-height: 40px; color: silver; font-size: 16px; border-right:1px solid #444; text-align: center; cursor: pointer;}
		#nav #navBg{ background-color: #888; height: 200px; display: none;}
		#nav #navBg .wrapper{ width: 1000px; overflow: hidden; height: 200px; position: relative; margin:0 auto;}
		#nav #navBg .wrapper .navBox{ width:5000px; height: 200px; margin:0 auto; position: relative;}
		#nav .navBox .item{ float: left; width: 1000px; height: 200px;}
		#nav #navBg .top{border:10px solid #888; border-bottom:10px solid #fff; position: absolute; bottom:0; left:50%; margin-left:-5px;}
	</style>
	<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
	<script>
	$(function(){
		$('#nav .list>li').click(function(){
			$('#navBg').slideDown('slow');
			var s = $(this).index('li');
			var left = s * 1000;
			$("#navBg .navBox").animate({right:left});
		});
		$('#nav').mouseleave(function(){
			setTimeout(function(){$('#navBg').slideUp('slow');},500);
		});
		$('#nav #navBg .top').click(function(){
			$('#navBg').slideUp('fast');
		});
	});
	</script>
</head>
<body>
	<div id="nav">
		<div class="wrapper">
			<ul class="list cf">
				<li>首页</li>
				<li>读书</li>
				<li>旅游</li>
				<li>篮球</li>
				<li>吉他</li>
			</ul>
		</div>
		<div id="navBg">
			<div class="wrapper">
				<div class="navBox cf">
					<div class="item">111111111</div>
					<div class="item">222222222</div>
					<div class="item">333333333</div>
					<div class="item">444444444</div>
					<div class="item">5555555555555</div>
				</div>
				<div class="top"></div>
			</div>
		</div>
	</div>
</body>
</html>