找的仿天猫源码效果差不多，没有JQuery自己加一下
慕移动0269604
2018-12-04 19:01
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery仿天猫分类菜单代码 </title>
<style>
* {
margin: 0;
padding: 0;
border: none;
}
body,
html {
margin: 0;
padding: 0;
width: 100%;
/* background: #f4f4f4;*/
background: #e3e3e3;
font: 16px Microsoft YaHei, arial, sans-serif;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
a {
text-decoration: none;
}
.containor {
width: 1000px;
height: auto;
position: relative;
margin: 0 auto;
top: 50px;
}
.nav_left {
width: 200px;
height: 500px;
background: #FF0036;
}
.nav_left ul {
width: 100%;
height: auto;
}
.nav_left ul li {
height: 50px;
line-height: 50px;
text-align: left;
}
.nav_left ul li span {
padding-left: 10px;
height: 50px;
line-height: 50px;
display: block;
background: #FF0036;
color: #fff;
}
.nav_left ul li span:hover {
color: #FF0036;
background: #FFFFFF;
}
.nav_right {
width: 800px;
height: 500px;
position: absolute;
margin-left: 200px;
top: 0px;
}
.sub {
position: relative;
overflow: hidden;
width: 100%;
height: 480px;
background: #FFFFFF;
padding: 10px 0px;
}
.sub dl {
overflow: hidden;
padding: 0px 0px 10px 0px;
}
.sub dt {
width: 100px;
float: left;
display: block;
position: relative;
clear: left;
}
.sub dt a {
font-size: 14px;
color: #000;
font-weight: bold;
text-align: center;
padding-left: 20px;
text-decoration: none;
cursor: pointer;
}
.sub dt i {
width: 4px;
right: 12px;
top: 2px;
font-size: 14px;
position: absolute;
font-style: normal;
}
.sub dd {
width: 680px;
float: left;
display: block;
position: relative;
overflow: hidden;
padding-right: 20px;
border-bottom: 1px dashed #E3E3E3;
}
.sub dd a {
font-size: 12px;
float: left;
color: #666;
padding: 0 10px;
margin: 4px 0px 10px 0px;
text-decoration: none;
cursor: pointer;
border-left: 1px solid #E3E3E3;
}
.sub dd a:hover {
color: #FF0036;
}
.hide {
display: none;
}
.show {
display: block;
}
</style>
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/style.js" ></script>
<script>
$(function() {
$('.containor').on('mouseenter', function() {
$(".nav_right").removeClass('hide');
}).on('mouseleave', function() {
$(".nav_right").addClass('hide');
$(".sub").addClass('hide');
}).on('mouseenter', 'li', function(e) {
var li_data = $(this).attr('data-id');
$(".sub").addClass('hide');
$('.sub[data-id="' + li_data + '"]').removeClass('hide');
})
})
</script>
</head>
<body>
<div class="containor">
<div class="nav_left">
<ul>
<li data-id="1"> <span>美妆/个人护理</span></li>
<li data-id="2"> <span>手机 /数码 /电脑办公</span></li>
<li data-id="3"> <span>零食 /茶酒 /进口食品 </span></li>
<li data-id="4"> <span>母婴玩具 </span></li>
<li data-id="5"> <span>腕表 /眼镜 /珠宝饰品 </span></li>
<li data-id="6"> <span>大家电 /生活电器 </span></li>
<li data-id="7"> <span>厨具 /收纳 /宠物 </span></li>
<li data-id="8"> <span>汽车 /配件 /用品 </span></li>
<li data-id="9"> <span>生鲜水果 </span></li>
<li data-id="10"> <span>家纺 /家饰 /鲜花 </span></li>
</ul>
</div>
<div class="nav_right">
<div class="sub hide" data-id="1">
<dl>
<dt><a >护肤品 <i> ></i></a> </dt>
<dd>
<a>官方直售</a>
<a>面膜</a>
<a>护肤套装</a>
<a>乳液面霜</a>
<a>精华液</a>
<a>官方直售</a>
<a>面膜</a>
<a>护肤套装</a>
<a>乳液面霜</a>
<a>精华液</a>
<a>官方直售</a>
<a>面膜</a>
<a>护肤套装</a>
<a>乳液面霜</a>
<a>精华液</a>
</dd>
</dl>
<dl>
<dt><a >彩妆 <i> ></i></a> </dt>
<dd>
<a>时尚彩妆</a>
<a>香水</a>
<a>气垫护肤</a>
<a>BB霜</a>
<a>口红</a>
<a>隔离</a>
<a>粉底</a>
<a>粉饼</a>
</dd>
</dl>
<dl>
<dt><a >男士护肤 <i> ></i></a> </dt>
<dd>
<a>洁面爽</a>
<a>面膜</a>
<a>护肤套装</a>
<a>肤水乳液/面霜</a>
<a>精华液</a>
<a>眼部护理</a>
<a>面膜</a>
<a>唇部护理</a>
<a>防晒</a>
<a>精华液</a>
<a>T区护理控油</a>
</dd>
</dl>
<dl>
<dt><a >护肤品 <i> ></i></a> </dt>
<dd>
<a>官方直售</a>
<a>面膜</a>
<a>护肤套装</a>
<a>乳液面霜</a>
<a>精华液</a>
<a>官方直售</a>
<a>面膜</a>
<a>护肤套装</a>
<a>乳液面霜</a>
<a>精华液</a>
<a>官方直售</a>
<a>面膜</a>
<a>护肤套装</a>
<a>乳液面霜</a>
<a>精华液</a>
</dd>
</dl>
<dl>
<dt><a >彩妆 <i> ></i></a> </dt>
<dd>
<a>时尚彩妆</a>
<a>香水</a>
<a>气垫护肤</a>
<a>BB霜</a>
<a>口红</a>
<a>隔离</a>
<a>粉底</a>
<a>粉饼</a>
</dd>
</dl>
<dl>
<dt><a >男士护肤 <i> ></i></a> </dt>
<dd>
<a>洁面爽</a>
<a>面膜</a>
<a>护肤套装</a>
<a>肤水乳液/面霜</a>
<a>精华液</a>
<a>眼部护理</a>
<a>面膜</a>
<a>唇部护理</a>
<a>防晒</a>
<a>精华液</a>
<a>T区护理控油</a>
</dd>
</dl>
<dl>
<dt><a >男士护肤 <i> ></i></a> </dt>
<dd>
<a>洁面爽</a>
<a>面膜</a>
<a>护肤套装</a>
<a>肤水乳液/面霜</a>
<a>精华液</a>
<a>眼部护理</a>
<a>面膜</a>
<a>唇部护理</a>
<a>防晒</a>
<a>精华液</a>
<a>T区护理控油</a>
</dd>
</dl>
</div>
<div class="sub hide" data-id="2">
<dl>
<dt><a >电脑办公 <i> ></i></a> </dt>
<dd>
<a>官方直售</a>
<a>面膜</a>
<a>护肤套装</a>
<a>乳液面霜</a>
<a>精华液</a>
<a>官方直售</a>
<a>面膜</a>
<a>护肤套装</a>
<a>乳液面霜</a>
<a>精华液</a>
<a>官方直售</a>
<a>面膜</a>
<a>护肤套装</a>
<a>乳液面霜</a>
<a>精华液</a>
</dd>
</dl>
</div>
<div class="sub hide" data-id="3">
<dl>
<dt><a >进口食品 <i> ></i></a> </dt>
<dd>
<a>官方直售</a>
<a>饼干</a>
<a>海苔</a>
<a>火腿肠</a>
<a>方便面</a>
<a>果冻</a>
<a>水果干</a>
<a>坚果</a>
<a>面包蛋糕</a>
<a>华夫饼</a>
<a>进口巧克力</a>
<a>进口咖啡</a>
<a>进口葡萄酒</a>
<a>啤酒饮料</a>
</dd>
</dl>
</div>
<div class="sub hide" data-id="4">
<dl>
<dt><a >母婴玩具 <i> ></i></a> </dt>
<dd>
<a>童装</a>
<a>秋换新</a>
<a>商场同款</a>
<a>特价优惠</a>
<a>秋衣秋裤</a>
<a>外套</a>
<a>羽绒服</a>
<a>夹克</a>
<a>连衣裙</a>
<a>裤子</a>
</dd>
</dl>
</div>
<div class="sub hide" data-id="5">
<dl>
<dt><a >珠宝饰品 <i> ></i></a> </dt>
<dd>
<a>官方直售</a>
<a>面膜</a>
<a>护肤套装</a>
<a>乳液面霜</a>
<a>精华液</a>
<a>官方直售</a>
<a>面膜</a>
<a>护肤套装</a>
<a>乳液面霜</a>
<a>精华液</a>
<a>官方直售</a>
<a>面膜</a>
<a>护肤套装</a>
<a>乳液面霜</a>
<a>精华液</a>
</dd>
</dl>
</div>
<div class="sub hide" data-id="6">
<dl>
<dt><a >生活电器 <i> ></i></a> </dt>
<dd>
<a>官方直售</a>
<a>生活电器</a>
<a>生活电器</a>
<a>吹风机</a>
<a>精华液</a>
<a>官方直售</a>
<a>面膜</a>
<a>护肤套装</a>
<a>乳液面霜</a>
<a>精华液</a>
<a>官方直售</a>
<a>面膜</a>
<a>护肤套装</a>
<a>乳液面霜</a>
<a>精华液</a>
</dd>
</dl>
</div>
<div class="sub hide" data-id="7">
<dl>
<dt><a >厨具 <i> ></i></a> </dt>
<dd>
<a>厨具</a>
<a>厨具</a>
<a>油烟机</a>
<a>洗碗机</a>
<a>电磁炉</a>
<a>微波炉</a>
</dd>
</dl>
</div>
<div class="sub hide" data-id="8">
<dl>
<dt><a >汽车 <i> ></i></a> </dt>
<dd>
<a>汽车</a>
<a>汽车</a>
<a>汽车</a>
<a>汽车</a>
<a>汽车</a>
<a>汽车</a>
<a>汽车</a>
<a>汽车</a>
<a>汽车</a>
<a>汽车</a>
</dd>
</dl>
</div>
<div class="sub hide" data-id="9">
<dl>
<dt><a >生鲜水果 <i> ></i></a> </dt>
<dd>
<a>火龙果</a>
<a>苹果</a>
<a>榴莲</a>
<a>进口水果</a>
<a>优惠活动</a>
<a>雪梨</a>
<a>山竹</a>
<a>葡萄</a>
<a>泰国芒果</a>
<a>柚子</a>
<a>马蹄</a>
<a>橘子</a>
<a>香蕉</a>
<a>猕猴桃</a>
<a>椰子</a>
</dd>
</dl>
</div>
<div class="sub hide" data-id="10">
<dl>
<dt><a >当季热卖 <i> ></i></a> </dt>
<dd>
<a>定制窗帘</a>
<a>抱枕</a>
<a>被子</a>
<a>两用坐垫</a>
<a>国际家纺床品</a>
<a>国际居家布艺</a>
<a>国际家居饰品</a>
</dd>
</dl>
</div>
</div>
</div>
</body>
</html>
0回答
还没有人回答问题，可以看看其他问题
JS实现京东无延迟菜单效果
57658 学习 · 146 问题
相似问题