Jquery实现头部导航

最新推荐文章于 2023-07-10 17:14:01 发布

原创最新推荐文章于 2023-07-10 17:14:01 发布 · 731 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #jquery #html5

***·需求：***鼠标移入一级类目，下拉框展示对应的二级类目和三级类目，鼠标移出下拉框或者一级类目列表隐藏下拉框(兼容ie、火狐、safria、QQ浏览器、谷歌浏览器)
在这里插入图片描述
·html

				<div class="tabBox">
                    <!-- 一级类目列表容器 -->
                    <ul class="tabUl"></ul>
                    <!-- 导航栏下拉框 -->
                    <div class="selectBox">
                        <!-- <div class="triangle"></div> -->
                        <!-- 二级和三级类目列表 -->
                        <ul class="outUl"></ul>
                        <!-- 底部推荐容器 -->
                        <div class="recommandBox1">
                            <div class="itemTitle">
                                <p>您可能还需要</p>
                                <div class="itemBlock"></div>
                            </div>
                            <div class="itemChildern">
                                <ul class="itemChildernUl1">
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

·js

function initTopBar(catList) {
	// console.log(catList)
	// 渲染一级类目列表
	let tmpStr = ''
	for (var i = 0; i < catList.length; i++) {
		tmpStr +=
			"<li class='tabLi'><span class='tabLink'>" +
			catList[i].catName +
			"</span><span class='topImg iconfont icon-xiala'></span><div class='line'></div><div class='triangle'><span class='iconfont icon-xiangshang1'></span></div></li>"
	}
	$('.tabUl').html(tmpStr)
	// 生成下拉框对应三角形
	$('.tabLi').each(function () {
		let actIndex = $(this).index()
		let tmpDistance = $(this).outerWidth() / 2 - 13
		$(this).find('.triangle').css('left', tmpDistance)
	})
	// 一级类目列表移入事件
	$('.tabLi').mouseenter(function () {
		let actIndex = $(this).index()
		$('.triangle')
			.eq(actIndex)
			.addClass('current')
			.parent()
			.siblings()
			.find('.triangle')
			.removeClass('current')
		$('.selectBox').css('display', 'block')
		let catChildren = catList[actIndex].children
		let tmpLi = ''
		for (var k = 0; k < catChildren.length; k++) {
			let itemList = ''
			for (
				var item = 0;
				item < catChildren[k].productList.length;
				item++
			) {
				var tmpHotStr = ''
				// 渲染是否为hot项
				if (catChildren[k].productList[item].isHot == 1) {
					tmpHotStr = "<div class='hotIcon'></div>"
				}
				// 渲染三级类目列表
				itemList +=
					"<li class='childName'><a href='/goods-" +
					catChildren[k].productList[item].productId +
					".html' target='_blank' class=" +
					(catChildren[k].productList[item].isHot == 1
						? 'hotName'
						: '') +
					'>' +
					catChildren[k].productList[item].prodName +
					tmpHotStr +
					'</a></li>'
			}
			// 整合渲染下拉框
			tmpLi +=
				"<li class='outLi'><div class='itemTitle'><p>" +
				catChildren[k].catName +
				"</p></div><div class='itemChildern'><ul class='itemChildernUl'>" +
				itemList +
				'</ul></div></li>'
		}
		$('.outUl').html(tmpLi)
	})
}
// 下拉框移出事件
$('.selectBox').mouseleave(function () {
	$(this).css('display', 'none')
	$('.triangle').removeClass('current')
})
// 一级类目列表移出事件
$('.tabBox').mouseleave(function () {
	$('.selectBox').css('display', 'none')
	$('.triangle').removeClass('current')
})

·css

* {
	margin: 0;
	padding: 0;
}

li {
	list-style: none;
}

.icon {
	width: 1.5em;
	height: 2em;
	vertical-align: -0.15em;
	fill: currentColor;
	overflow: hidden;
	/* font-size: 12px; */
}

.headerNav {
	width: 100%;
	height: 36px;
	background: rgba(0, 0, 0, 0.08);
}

.navContent {
	width: 1200px;
	margin: 0 auto;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.position {
	height: 100%;
	display: flex;
	align-items: center;
	/* line-height: 36px; */
}

.position span {
	font-size: 12px;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #fff;
	display: inline-block;
	line-height: 36px;
	height: 36px;
}

.positionIcon {
	height: 100%;
	display: flex;
	align-items: center;
	color: #FFF;
	margin-right: 2px;
	padding: 0 10px;
	position: relative;
}

.positionIcon span {
	color: #FFF;
	cursor: pointer;

}

.navBar {
	height: 36px;
}

.navBar ul {
	height: 36px;
	display: flex;
	align-items: center;
}

.navBarItem {
	padding-left: 10px;
	padding-right: 10px;
	display: flex;
}

.navBarItem a {
	font-size: 12px;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #fff;
	text-decoration: none;
}

.persionalCenter {
	display: inline-block;
	font-size: 12px;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: white;
	cursor: pointer;
}

.persionalCenter:hover {
	color: #05A4FF;
}

.navBarItem .navBarItemLink {
	font-size: 12px;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: white;
	text-decoration: none;
}

.navBarItem a:hover {
	color: #05a4ff;
}

.navBarItem span {
	display: inline-block;
	width: 1px;
	height: 12px;
	background: #FFFFFF;
	position: relative;
	left: 10px;
	top: 3px;
	opacity: 60%;
}

.navBarItem:nth-of-type(5) span {
	display: none;
}

.navBarItem b {
	font-size: 12px;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #fff;
	cursor: pointer;
	margin-left: 3px;
}

.navBarItem b:hover {
	color: #05a4ff;
}

.navBarItem .loginBtn {
	color: white;
}

.topBar {
	width: 100%;
	height: 80px;
	background: transparent;
}

.barContent {
	width: 1200px;
	height: 80px;
	line-height: 80px;
	margin: 0 auto;
	position: relative;
}

.logo {
	height: 100%;
	float: left;
}

.logo a {
	display: inline-block;
	height: 80px;
}

.logo a img {
	width: 98px;
	height: 80px;
}

.tabBox {
	height: 80px;
	display: flex;
	float: right;
}

.firstLink {
	height: 80px;
	line-height: 80px;
	font-size: 14px;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: white;
	padding-left: 10px;
	padding-right: 10px;
	float: right;
}

.firstLink a {
	text-decoration: none;
	font-size: 14px;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: white;
	display: inline-block;
	width: 100%;
	height: 100%;
}

.firstLink a:hover {
	color: #05A4FF;
}

.tabUl {
	list-style: none;
	height: 80px;
	display: flex;
	margin: 0;
	padding: 0;
}

.tabUl li {
	height: 80px;
	text-align: center;
	line-height: 80px;
	padding-left: 10px;
	padding-right: 20px;
	position: relative;
}

.tabUl .tabLi:hover .tabLink {
	color: #05a4ff !important;
}

.tabUl li span {
	font-size: 14px;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #fff;
	cursor: pointer;
}

#homeTabLink {
	font-size: 14px;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: white;
	cursor: pointer;
}

#homeTabLink:hover {
	color: #05a4ff;
}

.tabLink {
	width: 100%;
	height: 100%;
	display: inline-block;
}

/* .tabLink:hover {
	color: #05a4ff !important;
} */

.selectBox {
	position: absolute;
	height: 360px;
	width: 896px;
	background: #ffffff;
	box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.13);
	border-radius: 3px;
	top: 65px;
	right: 0;
	padding: 10px 40px 0px;
	display: none;
	z-index: 9;
	overflow: auto;
	/* fireFox  自定义滚动条样式 */
	/* scrollbar-color: #E9E9E9 #FFFFFF;  */
	/* //滚动条轨道颜色   滚动条滑块的颜色 */
	scrollbar-width: thin;
	/* //thin模式下滚动条两端的三角按钮会消失 */
}

/*滚动条样式*/

.selectBox::-webkit-scrollbar {
	width: 10px;
	/*height: 4px;*/
}

.selectBox::-webkit-scrollbar-track {
	border-radius: 10px;
	-webkit-box-shadow: inset 0px 2px 12px 0px rgba(0, 0, 0, 0.13);
	background: #E9E9E9;
}

.selectBox::-webkit-scrollbar-thumb {
	-webkit-box-shadow: inset 0px 2px 12px 0px rgba(0, 0, 0, 0.13);
	background: #FFFFFF;
	border-radius: 3px;
	width: 6px;
}

.triangle {
	width: 15px;
	height: 15px;
	color: white;
	position: absolute;
	top: 22px;
	left: 26px;
	display: none;
}

.triangle span {
	display: inline-block;
	height: 15px;
}

.current {
	display: block;
}

.outUl {
	width: 100%;
}

.outLi {
	display: flex;
	overflow: hidden;
	width: 100%;
	line-height: 10px;
	position: relative;
}

.itemTitle {
	position: absolute;
	top: 0;
	bottom: 0;
	display: flex;
}

.itemTitle p {
	width: 102px;
	display: flex;
	justify-content: start;
	align-items: center;
	font-size: 14px;
	font-family: PingFangSC-Semibold, PingFang SC;
	font-weight: 600;
	color: #333333;
}

.itemChildern {
	display: inline-block;
	width: 714px;
	margin-left: 102px;
}

.itemChildern .itemLine {
	width: 534px;
	height: 0px;
	border: 1px dashed #e4e4e4;
}

.itemChildernUl {
	width: 100%;
	/* line-height: 30px; */
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	-o-flex-wrap: wrap;
	flex-wrap: wrap;
	min-height: 61px;
	align-items: center;
	-webkit-align-items: center;
	box-align: center;
	-moz-box-align: center;
	-webkit-box-align: center;
	border-style: solid;
	border-width: 0 0 1px 0;
	border-color: #E4E4E4;
	padding-top: 15px;
	padding-bottom: 15px;
}

.itemChildernUl1 {
	width: 100%;
	line-height: 30px;
	padding: 10px 0;
	display: flex;
	flex-wrap: wrap;
}

.childName {
	padding-right: 30px;
	display: flex;
	float: left;
	height: 30px;
	line-height: 30px;
}

.childName a {
	text-decoration: none;
	font-size: 14px;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 500;
	color: #666666;
	display: inline-block;
	height: 30px;
	line-height: 30px;
}

.childName a:hover {
	color: #05a4ff;
}

.recommandBox1 {
	width: 100%;
	height: 124px;
	margin-top: 17px;
	background: #ECF7FE;
	border-radius: 0;
	position: relative;
	top: 2px;
	box-sizing: border-box;
	display: flex;
	padding: 20px;
	margin-bottom: 20px;
}

.recommandBox1 .itemTitle p {
	width: 100%;
	font-size: 16px;
	font-family: PingFangSC-Semibold, PingFang SC;
	font-weight: 600;
	color: #05A4FF;
	line-height: 22px;
	text-shadow: 0px 2px 12px rgba(0, 0, 0, 0.13);
	position: relative;
	top: 10px;
}

.recommandBox1 .itemTitle {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: start;
	width: 110px;
}

.recommandBox1 .itemTitle .itemBlock {
	margin: 0 auto;
	width: 22px;
	height: 4px;
	background: #05A4FF;
	box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.13);
	position: relative;
	top: -32px;
	left: -12px;
}

.recommandBox1 .itemChildern {
	width: 666px;
	height: 100%;
}

.recommandBox1 .itemChildern .itemChildernUl1 {
	height: 100%;
	line-height: normal;
	width: 100%;
	display: flex;
	justify-content: space-evenly;
	padding: 0;
}

.recommandBox1 .itemChildern .itemChildernUl1 .childName {
	width: 158px;
	height: 84px;
	background-color: #fff;
	padding: 15px;
	margin-left: 7px;
}

.recommandBox1 .itemChildern .itemChildernUl1 .childName:nth-of-type(1) {
	margin-left: 0px;
}

.recommandBox1 .itemChildern .itemChildernUl1 .childName:hover a .childTitle .titleName {
	color: #05A4FF;
}

.recommandBox1 .itemChildern .itemChildernUl1 .childName .childTitle {
	width: 120px;
	height: 27px;
	display: flex;
	justify-content: space-between;
	border-bottom: 1px dashed #E9E9E9;
}

.recommandBox1 .itemChildern .itemChildernUl1 .childName .childTitle span {
	font-family: PingFangSC-Semibold, PingFang SC;
	font-weight: 600;
	color: #333333;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	line-height: 20px;
}

.recommandBox1 .itemChildern .itemChildernUl1 .childName .childTitle .iconfont {
	position: relative;
	top: 2px;
}

.recommandBox1 .itemChildern .itemChildernUl1 .childName .childDesc {
	margin-top: 7px;
	font-size: 12px;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #999999;
	line-height: 17px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	width: 120px;
}

.line {
	width: 1px;
	height: 14px;
	background: #FFFFFF;
	display: inline-block;
	position: absolute;
	top: 33px;
	right: 0px;
	opacity: 60%;
}

.tabUl .tabLi:last-child .line {
	display: none;
}

.tabUl .tabLi .topImg {
	width: 6px;
	height: 4px;
	position: absolute;
	font-size: 10px;
	color: #fff;
	transform: scale(0.33);
	top: 25px;
	right: 11px;
}

.hotIcon {
	width: 20px;
	height: 10px;
	border-radius: 4px 4px 4px 0px;
	color: #fff;
	display: inline-block;
	/* position: absolute; */
	position: relative;
	top: -10px;
	right: 3px;
	background-image: url("../../images/topBar/编组\ 30.png");
	background-size: 20px 10px;
}

.itemChildernUl .childName .hotName {
	color: #FF6A00;
}

.itemChildernUl .childName .hotName:hover {
	color: #05A4FF;
}



.outerCityBox{
	width: 342px;
	display: none;
	position: absolute;
	top: 36px;
	left: 0px;
	z-index: 999;
}
.topCityBox {
	width: 342px;
	height: auto;
	background-color: #fff;
	
	box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.13)
}

.hotSearch {
	font-size: 12px;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #999999;
	padding-left: 10px;
	padding-top: 10px;
}

.hotCity {
	width: 100%;
}

.hotCity p {
	display: inline-block;
	width: 53px;
	text-align: center;
}

.hotCity b {
	padding: 0px 11px;
	font-weight: 100;
	display: inline-block;
	font-size: 12px;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #333333;
	line-height: 18px;
	margin-top: 13px;
	cursor: pointer;
}

.hotCity b:hover {
	color: #05A4FF;
}

.topCityBox .active {
	background-color: #05A4FF;
	color: #FFFFFF;
}

.topCityBox .active:hover {
	color: #FFF;
}

/* .hotCity b:hover */

.boxMiddle {
	width: 100%;
	height: 30px;
	border-bottom: 1px solid #E9E9E9;
	position: relative;
	margin-top: 18px;
}

.boxMiddle div {
	text-align: center;
	height: 30px;
	font-size: 12px;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: 400;
	color: #999999;
	width: 68px;
	position: absolute;
	left: 15px;
	border: 1px solid #E9E9E9;
	cursor: pointer;
	line-height: 30px;
}
.boxMiddle .selectCity{
	width: auto;
	padding: 0 15px;
}
.boxMiddle .inputActive {
	border-bottom: 1px solid #fff!important;
}

.boxMiddle .selectCity {
	left: 89px;
}

.boxMiddle input::-webkit-input-placeholder {
	font-size: 12px;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #999999;
}

.boxMiddle input::-moz-placeholder {
	/* Mozilla Firefox 19+ */
	font-size: 12px;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #999999;
}

.boxMiddle input:-moz-placeholder {
	/* Mozilla Firefox 4 to 18 */
	font-size: 12px;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #999999;
}

.boxMiddle input:-ms-input-placeholder {
	/* Internet Explorer 10-11 */
	font-size: 12px;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #999999;
}

.boxBottom {
	width: 100%;
	padding-bottom: 15px;
}

.boxBottom .provinceBox {
	display: block;
}

.boxBottom .cityBox {
	display: none;
}

.boxBottom b {
	padding: 0px 11px;
	font-weight: 100;
	display: inline-block;
	font-size: 12px;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #333333;
	line-height: 18px;
	margin-top: 13px;
	cursor: pointer;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: 100%;
}

.boxBottom b:hover {
	color: #05A4FF;
}

.boxBottom p {
	display: inline-block;
	width: auto;
	text-align: center;
}
.provinceBox p{
	width: 19%!important;
}
.boxBottom .active {
	background-color: #05A4FF;
	color: #FFFFFF;
}

.boxBottom .active:hover {
	color: #FFF;
}

·关键点
①结构方面
下拉框selectBox必须放在一级类目列表容器中，然后通过定位达到目标位置。
②样式方面
因为要兼容ie，所以不能使用弹性布局，二级类目通过定位确定容器大小，三级类目列表项通过浮动实现。
③逻辑方面
因为ie不兼容es6，所以渲染时不能使用模板字符串(``),要使用字符串进行拼接渲染。