类似天猫那样的侧边导航栏的快速实现

最新推荐文章于 2018-12-07 19:45:40 发布

定定

最新推荐文章于 2018-12-07 19:45:40 发布

阅读量2.1k

点赞数

本文链接：https://blog.csdn.net/u013301375/article/details/43235955

版权

前几天在慕课上面看到一个教程，教人怎么做一个侧边导航栏，跟着教程于是自己用JQUERY也写出来了一个，贴上代码（HTML和JQUERY）给大家参考一下。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>地狗购物网网页导航效果</title>
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
	<div id="menu">
		<ul>
			<li><a href="#item1" class="current">1F 男装</a></li>
			<li><a href="#item2">2F 女装</a></li>
			<li><a href="#item3">3F 美妆</a></li>
			<li><a href="#item4">4F 数码</a></li>
			<li><a href="#item5">5F 母婴</a></li>
		</ul>
	</div>
	<div id="content">
		<h1>滴狗狗无望</h1>
		<div id="item1" class="item">
			<h2>1F 男装</h2>
			<ul>
				<li><a href="#"><img src="1F.jpg" alt=""></a></li>
				<li><a href="#"><img src="1F.jpg" alt=""></a></li>
				<li><a href="#"><img src="1F.jpg" alt=""></a></li>
				<li><a href="#"><img src="1F.jpg" alt=""></a></li>
				<li><a href="#"><img src="1F.jpg" alt=""></a></li>
				<li><a href="#"><img src="1F.jpg" alt=""></a></li>
				<li><a href="#"><img src="1F.jpg" alt=""></a></li>
				<li><a href="#"><img src="1F.jpg" alt=""></a></li>
				<li><a href="#"><img src="1F.jpg" alt=""></a></li>
			</ul>
		</div>
		<div id="item2" class="item">
			<h2>2F 女装</h2>
			<ul>
				<li><a href="#"><img src="2F.jpg" alt=""></a></li>
				<li><a href="#"><img src="2F.jpg" alt=""></a></li>
				<li><a href="#"><img src="2F.jpg" alt=""></a></li>
				<li><a href="#"><img src="2F.jpg" alt=""></a></li>
				<li><a href="#"><img src="2F.jpg" alt=""></a></li>
				<li><a href="#"><img src="2F.jpg" alt=""></a></li>
				<li><a href="#"><img src="2F.jpg" alt=""></a></li>
				<li><a href="#"><img src="2F.jpg" alt=""></a></li>
				<li><a href="#"><img src="2F.jpg" alt=""></a></li>
			</ul>
		</div>
		<div id="item3" class="item">
			<h2>3F 美妆</h2>
			<ul>
				<li><a href="#"><img src="3F.jpg" alt=""></a></li>
				<li><a href="#"><img src="3F.jpg" alt=""></a></li>
				<li><a href="#"><img src="3F.jpg" alt=""></a></li>
				<li><a href="#"><img src="3F.jpg" alt=""></a></li>
				<li><a href="#"><img src="3F.jpg" alt=""></a></li>
				<li><a href="#"><img src="3F.jpg" alt=""></a></li>
				<li><a href="#"><img src="3F.jpg" alt=""></a></li>
				<li><a href="#"><img src="3F.jpg" alt=""></a></li>
				<li><a href="#"><img src="3F.jpg" alt=""></a></li>
			</ul>
		</div>
		<div id="item4" class="item">
			<h2>4F 数码</h2>
			<ul>
				<li><a href="#"><img src="4F.png" alt=""></a></li>
				<li><a href="#"><img src="4F.png" alt=""></a></li>
				<li><a href="#"><img src="4F.png" alt=""></a></li>
				<li><a href="#"><img src="4F.png" alt=""></a></li>
				<li><a href="#"><img src="4F.png" alt=""></a></li>
				<li><a href="#"><img src="4F.png" alt=""></a></li>
				<li><a href="#"><img src="4F.png" alt=""></a></li>
				<li><a href="#"><img src="4F.png" alt=""></a></li>
				<li><a href="#"><img src="4F.png" alt=""></a></li>
			</ul>
		</div>
		<div id="item5" class="item">
			<h2>5F 母婴</h2>
			<ul>
				<li><a href="#"><img src="5F.jpg" alt=""></a></li>
				<li><a href="#"><img src="5F.jpg" alt=""></a></li>
				<li><a href="#"><img src="5F.jpg" alt=""></a></li>
				<li><a href="#"><img src="5F.jpg" alt=""></a></li>
				<li><a href="#"><img src="5F.jpg" alt=""></a></li>
				<li><a href="#"><img src="5F.jpg" alt=""></a></li>
				<li><a href="#"><img src="5F.jpg" alt=""></a></li>
				<li><a href="#"><img src="5F.jpg" alt=""></a></li>
				<li><a href="#"><img src="5F.jpg" alt=""></a></li>
			</ul>
		</div>
	</div>
</body>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script>
	$(function(){
		$(window).scroll(function(){
			var top=$(document).scrollTop();
			var menu=$("#menu");
			var items=$("#content").find(".item");

			var currentId="";//当前所在楼层item的ID
			items.each(function(){
				var m=$(this);
				var itemTop=m.offset().top;
				//console.log(itemTop);
				if(top>itemTop-200){
					currentId="#"+m.attr("id");
				}else{
					return false;
				}
			});
			//
			var currentLink=menu.find(".current");
			if(currentId && currentLink.attr("href") != currentId){
				currentLink.removeClass("current");
				menu.find("[href=" + currentId + "]").addClass("current");
			}
		});
	});
</script>
</html>

定定

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
类似天猫那样的侧边导航栏的快速实现

前几天在慕课上面看到一个教程，教人怎么做一个侧边导航栏，跟着教程于是自己用JQUERY也写出来了一个，贴上代码（HTML和JQUERY）给大家参考一下。地狗购物网网页导航效果 1F 男装 2F 女装 3F 美妆 4F 数码 5F 母婴滴狗狗无望 1F 男装
复制链接

扫一扫