jquery框架：左侧导航条

最新推荐文章于 2024-03-25 11:35:35 发布

hahahafree

最新推荐文章于 2024-03-25 11:35:35 发布

阅读量786

点赞数

分类专栏： jQuery Web 文章标签： jQuery

本文链接：https://blog.csdn.net/weixin_43731793/article/details/97176962

版权

Web 同时被 2 个专栏收录

80 篇文章 0 订阅

订阅专栏

jQuery

17 篇文章 0 订阅

订阅专栏

左侧导航条

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>页面</title>
</head>
<style>
	*{
		font-family: 微软雅黑;
		margin:0px;
		padding: 0px;
		
	}

	.main{
		
		width: 1210px;
		margin: 0 auto;
		background: #eee;
		margin-top: 50px;
	}
	.menu{
		list-style: none;
		height: 44px;
		line-height: 44px;
	}
	.menu li:hover{
		color: red;
	}
	.menu li{
		float: left;
		margin-left: 40px;
		cursor: pointer;
	}
	.menu li:first-child{
		background: #fff;
		width: 210px;
		text-align: center;
		color: #000;
		margin-left: 0px;

	}
	.leftmenu{
		height:466px;
		background: #ccc;
	}
	.left{
		width: 210px;
		height: 100%;
		background: #fff;
		float: left;
	}
	.center{
		float: left;
		width: 740px;
		height: 100%;
		background: #ccc;
		position: relative;
		top:0px;
		left:0px;

	}
	.center img{
		position: absolute;
		top: 50%;
		left: 50%;
		margin-left: -370px;
		margin-top: -227px;
		display: block;
	}
	.right{
		float: left;
		width: 260px;
		height: 100%;
		position: relative;


	}
	.right img{
		position: absolute;
		top: 50%;
		left: 50%;
		margin-left: -126px;
		margin-top: -228px;
		display: block;	
	}
	
	.leftul{
		list-style: none;

	}
	.leftli{
		line-height: 31px;
		padding-left: 15px;
		position: relative;
	}
	.lefta:hover{
		cursor: pointer;
		background: #ccc;

	}
	.lefta{
		text-decoration: none;
		color: #000;
		font-size: 14px;
	}
	.rightdiv{
		width:1000px;
		background: #ccc;
		height: 466px;
		display: none;
		position: absolute;
		z-index: 1;
		left: 0px;
		top: 0px;
	}
</style>
<script src="/js/jquery.min1.js">
	
</script>

</head>
<body>
	<div class="main">
		<ul class="menu">  
			<li>京东</li>
			<li>秒杀</li>
			<li>优惠券</li>
			<li>PLUS会员</li>
			<li>品牌闪购</li>
			<li>拍卖</li>
			<li>京东时尚</li>
			<li>京东超市</li>
			<li>京东生鲜</li>
			<li>海囤全球</li>
		</ul>
		<div class="leftmenu">
			<div class="left">
				<ul class="leftul">
					<li class="leftli">
						
						<a href="" class="lefta">家用电器</a>
						<div class="rightdiv">
							<span>1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</span>
						</div>
					</li>
					<li class="leftli">
						<a href="" class="lefta"> 手机 /	运营商 /	数码 </a>
						<div class="rightdiv">
								<span>222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222</span>
						</div>
					</li>
					<li class="leftli">
						<a href="" class="lefta"> 电脑 /	办公  </a>
						<div class="rightdiv">
							<span>3333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333</span>

						</div>
					</li>
				</ul>
			</div>
			<div class="center">
				<img src="/img/a0724.jpg" alt="">
			</div>
			<div class="right">
				<img src="/img/right.png" alt="">
			</div>
			
		</div>
	</div>
	
</body>	
<script>
$('.leftli').mouseenter(function(){
	$(this).css({'background':'#ccc'});
	$(this).find('a.lefta').css({'color':'red'});
	$(this).find('div.rightdiv').css({'left':'210px'}).show();
	
});
$('.leftli').mouseleave(function(){
	$(this).css({'background':'#fff'});
	$(this).find('a.lefta').css({'color':'#000'});
	$(this).find('div.rightdiv').hide().css({'left':'0px'});
});
</script>
</html>

左侧导航条2

<script>
$('.leftli').mouseenter(function(){
	idx=$(this).index('.leftli');
	mh=idx*31;
	$(this).css({'background':'#ccc'});
	$(this).find('a.lefta').css({'color':'red'});
	$(this).find('div.rightdiv').css({'left':'210px','margin-top':-mh+'px'}).show();
	
});
$('.leftli').mouseleave(function(){
	$(this).css({'background':'#fff'});
	$(this).find('a.lefta').css({'color':'#000'});
	$(this).find('div.rightdiv').hide().css({'left':'0px'});
});
</script>

左侧导航条3

<script>
$('.leftli').mouseenter(function(){
	y=$(this).position().top;
	// alert(y);
	$(this).css({'background':'#ccc'});
	$(this).find('a.lefta').css({'color':'red'});
	$(this).find('div.rightdiv').css({'left':'210px','margin-top':-y+'px'}).show();
	
});
$('.leftli').mouseleave(function(){
	$(this).css({'background':'#fff'});
	$(this).find('a.lefta').css({'color':'#000'});
	$(this).find('div.rightdiv').hide().css({'left':'0px'});
});
</script>

hahahafree

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
jquery框架：左侧导航条

左侧导航条<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>页面</title></head><style> *{ font-family: 微软雅黑; margin:0px; paddi...
复制链接

扫一扫