二级栏目导航，放置在banner轮播图z轴上面的导航列表

最新推荐文章于 2022-09-19 20:01:12 发布

qq_42289686

最新推荐文章于 2022-09-19 20:01:12 发布

阅读量610

点赞数

分类专栏： HTML CSS JQuery 文章标签：导航列表

本文链接：https://blog.csdn.net/qq_42289686/article/details/91352552

版权

HTML 同时被 3 个专栏收录

36 篇文章 1 订阅

订阅专栏

JQuery

11 篇文章 0 订阅

订阅专栏

CSS

10 篇文章 0 订阅

订阅专栏

效果图：

在这里插入图片描述

CSS样式

/*招聘导航列表*/
.zp-nav-list{
	position: absolute;
	left:0;
	top: 0;
	z-index: 100;
	color: white;
	width: 160px;
	height: 100%;
}
.zp-nav-left{
	list-style:none;
	padding: 0;
	float:left;
	height: 100%;
	background-color:rgba(0,0,0,0.6);
	width: 160px;
}
.zp-nav-left i.icon-xiayibu{
	float: right;
}
.zp-nav-right{
	list-style:none;
	padding: 0;
	float:left;
	height: 100%;
	width: calc(100% - 160px);
	margin: 0;
	background-color:white;
	color: #333;
	position: relative;
	display:none;
	transition: 0.4s;
	overflow:hidden;
}
.zp-nav-right li a{
	color: #666;
}
.zp-nav-right li a:hover{
	color: #0056b3
}
.zp-nav-right li{
	transition: 0.4s;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%
}
.zp-nav-left li{
	position: relative;
}
.zp-nav-left li span{
	line-height: 40px;
	display: block;
	padding: 0 0.6rem;
}
.zp-nav-left li:hover span{
	background-color:rgba(255,255,255,0.6);
	cursor: pointer;
}
.zp-nav-left li span i{
	padding-left: 1rem;
}
.zp-nav-list-content{
	line-height: 40px;
}
.list-hide{
	opacity: 0;
	position: relative;
	transform:translate(-6px);
}
.list-show{
	left: 0;
	opacity: 1;
	transform:translate(0px);
}
.zp-nav-col{
	width: calc(100% - 50px);
	margin-left: 50px;
	margin-right: 0;
}
.zp-nav-list-content header{
	padding-left:55px;
	font-weight: bold;
}
/*分割线*/
.zp-nav-right hr{
	margin: 0.3rem 0;
}

html结构

					<div class="zp-nav-list">
						<ul class="zp-nav-left">
							<li><span>互联网IT <i class="iconfont icon-xiayibu"></i></span></li>
							<li><span>金融 <i class="iconfont icon-xiayibu"></i></span></li>
							<li><span>房地产/建筑 <i class="iconfont icon-xiayibu"></i></span></li>
							<li><span>贸易/零售/物流 <i class="iconfont icon-xiayibu"></i></span></li>
							<li><span>教育/传媒/广告 <i class="iconfont icon-xiayibu"></i></span></li>
							<li><span>服务业 <i class="iconfont icon-xiayibu"></i></span></li>
							<li><span>市场/销售 <i class="iconfont icon-xiayibu"></i></span></li>
							<li><span>人事/财务/行政 <i class="iconfont icon-xiayibu"></i></span></li>
							<li><span>全部职类 <i class="iconfont icon-xiayibu"></i></span></li>

						</ul>
						<ul class="zp-nav-right">
							<li class="zp-nav-list-content list-hide">
								<header>互联网IT</header>
								<hr>
								<div class="row zp-nav-col">
									<div class="col"><a href="">Java开发</a></div>
									<div class="col"><a href="">UI设计师</a></div>
									<div class="col"><a href="">Web前端</a></div>
									<div class="col"><a href="">Web前端</a></div>
									<div class="col"><a href="">Web前端</a></div>
								</div>
								<div class="row zp-nav-col">
									<div class="col"><a href="">Java开发</a></div>
									<div class="col"><a href="">UI设计师</a></div>
									<div class="col"><a href="">Web前端</a></div>
									<div class="col"><a href="">Web前端</a></div>
									<div class="col"><a href="">Web前端</a></div>
								</div>
							</li>
							<li class="zp-nav-list-content list-hide">
								<header>金融</header>
								<hr>
								<div class="row zp-nav-col">
									<div class="col"><a href="">投资经理</a></div>
									<div class="col"><a href="">风控</a></div>
									<div class="col"><a href="">催收</a></div>
									<div class="col"><a href="">银行柜员</a></div>
									<div class="col"><a href="">银行销售</a></div>
								</div>
								<div class="row zp-nav-col">
									<div class="col"><a href="">信审</a></div>
									<div class="col"><a href="">信用卡</a></div>
									<div class="col"><a href="">贷款</a></div>
									<div class="col"><a href="">金融产品</a></div>
									<div class="col"><a href="">汽车金融</a></div>
								</div>
							</li>
							<li class="zp-nav-list-content list-hide">
								<header>互联网IT</header>
								<hr>
								<div class="row zp-nav-col">
									<div class="col"><a href="">Java开发</a></div>
									<div class="col"><a href="">UI设计师</a></div>
									<div class="col"><a href="">Web前端</a></div>
									<div class="col"><a href="">Web前端</a></div>
									<div class="col"><a href="">Web前端</a></div>
								</div>
								<div class="row zp-nav-col">
									<div class="col"><a href="">Java开发</a></div>
									<div class="col"><a href="">UI设计师</a></div>
									<div class="col"><a href="">Web前端</a></div>
									<div class="col"><a href="">Web前端</a></div>
									<div class="col"><a href="">Web前端</a></div>
								</div>
							</li>
							<li class="zp-nav-list-content list-hide">
								<header>金融</header>
								<hr>
								<div class="row zp-nav-col">
									<div class="col"><a href="">投资经理</a></div>
									<div class="col"><a href="">风控</a></div>
									<div class="col"><a href="">催收</a></div>
									<div class="col"><a href="">银行柜员</a></div>
									<div class="col"><a href="">银行销售</a></div>
								</div>
								<div class="row zp-nav-col">
									<div class="col"><a href="">信审</a></div>
									<div class="col"><a href="">信用卡</a></div>
									<div class="col"><a href="">贷款</a></div>
									<div class="col"><a href="">金融产品</a></div>
									<div class="col"><a href="">汽车金融</a></div>
								</div>
							</li>
							<li class="zp-nav-list-content list-hide">
								<header>互联网IT</header>
								<hr>
								<div class="row zp-nav-col">
									<div class="col"><a href="">Java开发</a></div>
									<div class="col"><a href="">UI设计师</a></div>
									<div class="col"><a href="">Web前端</a></div>
									<div class="col"><a href="">Web前端</a></div>
									<div class="col"><a href="">Web前端</a></div>
								</div>
								<div class="row zp-nav-col">
									<div class="col"><a href="">Java开发</a></div>
									<div class="col"><a href="">UI设计师</a></div>
									<div class="col"><a href="">Web前端</a></div>
									<div class="col"><a href="">Web前端</a></div>
									<div class="col"><a href="">Web前端</a></div>
								</div>
							</li>
							<li class="zp-nav-list-content list-hide">
								<header>金融</header>
								<hr>
								<div class="row zp-nav-col">
									<div class="col"><a href="">投资经理</a></div>
									<div class="col"><a href="">风控</a></div>
									<div class="col"><a href="">催收</a></div>
									<div class="col"><a href="">银行柜员</a></div>
									<div class="col"><a href="">银行销售</a></div>
								</div>
								<div class="row zp-nav-col">
									<div class="col"><a href="">信审</a></div>
									<div class="col"><a href="">信用卡</a></div>
									<div class="col"><a href="">贷款</a></div>
									<div class="col"><a href="">金融产品</a></div>
									<div class="col"><a href="">汽车金融</a></div>
								</div>
							</li>
							<li class="zp-nav-list-content list-hide">
								<header>互联网IT</header>
								<hr>
								<div class="row zp-nav-col">
									<div class="col"><a href="">Java开发</a></div>
									<div class="col"><a href="">UI设计师</a></div>
									<div class="col"><a href="">Web前端</a></div>
									<div class="col"><a href="">Web前端</a></div>
									<div class="col"><a href="">Web前端</a></div>
								</div>
								<div class="row zp-nav-col">
									<div class="col"><a href="">Java开发</a></div>
									<div class="col"><a href="">UI设计师</a></div>
									<div class="col"><a href="">Web前端</a></div>
									<div class="col"><a href="">Web前端</a></div>
									<div class="col"><a href="">Web前端</a></div>
								</div>
							</li>
							<li class="zp-nav-list-content list-hide">
								<header>金融</header>
								<hr>
								<div class="row zp-nav-col">
									<div class="col"><a href="">投资经理</a></div>
									<div class="col"><a href="">风控</a></div>
									<div class="col"><a href="">催收</a></div>
									<div class="col"><a href="">银行柜员</a></div>
									<div class="col"><a href="">银行销售</a></div>
								</div>
								<div class="row zp-nav-col">
									<div class="col"><a href="">信审</a></div>
									<div class="col"><a href="">信用卡</a></div>
									<div class="col"><a href="">贷款</a></div>
									<div class="col"><a href="">金融产品</a></div>
									<div class="col"><a href="">汽车金融</a></div>
								</div>
							</li>
						</ul>
					</div>

JS控制

// 招聘导航栏目，banner 覆盖z轴
$(".zp-nav-left li").mouseenter(function(e){
	console.log($(this).index())
	$(".zp-nav-list").css("width","100%")
	$(".zp-nav-right").stop().css("display",'block')
	for (var i = 0; i < $(".zp-nav-right li").length; i++) {
			if(i != $(this).index()){
				$(".zp-nav-right li").eq(i).addClass("list-hide").removeClass("list-show")
			}
			if(i == $(this).index()){
				$(".zp-nav-right li").eq(i).addClass("list-show").removeClass("list-hide")
			}
		}
})
$(".zp-nav-list").mouseleave(function(){
    $(".zp-nav-list").css("width","160px")
	$(".zp-nav-right").stop().css("display",'none')
})
// 招聘导航栏目，banner 覆盖z轴

qq_42289686

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
二级栏目导航，放置在banner轮播图z轴上面的导航列表

效果图：CSS样式/*招聘导航列表*/.zp-nav-list{ position: absolute; left:0; top: 0; z-index: 100; color: white; width: 100%; height: 100%;}.zp-nav-left{ list-style:none; padding: 0; float:left; heig...
复制链接

扫一扫

专栏目录