jQuery天猫商品分类导航菜单
一、HTML模块相关源码
HTML文件：index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery天猫分类导航菜单</title>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="JQ.js"></script>
</head>
<body>
<div class="detailed">
<div class="left">
<ul>
<li data-id="1"> <span>手机/运行商/数码 <i>></i></span></li>
<li data-id="2"> <span>电脑/办公<i>></i></span></li>
<li data-id="3"> <span>食品/酒类<i>></i></span></li>
<li data-id="4"> <span>医药保健/计生情趣<i>></i></span></li>
<li data-id="5"> <span>家具/家具/家装/厨具<i>></i> </span></li>
<li data-id="6"> <span>大家电 /生活电器<i>></i></span></li>
<li data-id="7"> <span>厨具 /收纳 /宠物<i>></i></span></li>
<li data-id="8"> <span>汽车 /配件 /用品<i>></i></span></li>
<li data-id="9"> <span>生鲜/特产<i>></i></span></li>
<li data-id="10"> <span>图书/文娱 <i>></i></span></li>
</ul>
</div>
<div class="right">
<div class="tab hide" data-id="1">
<dl>
<dt><a>手机通讯<i> ></i></a></dt>
<dd>
<a>手机</a>
<a>游戏手机</a>
<a>5G手机</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>中国电信</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>手机支架</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>
</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>
</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>
</dd>
</dl>
<dl>
<dt><a>影音娱乐<i> ></i></a> </dt>
<dd>
<a>耳机</a>
<a>耳麦音箱</a>
<a>智能音箱</a>
<a>音响</a>
<a>收音机</a>
<a>眼部护理</a>
<a>麦克风MP3/MP4</a>
<a>专业音频</a>
<a>音频线</a>
</dd>
</dl>
</div>
<div class="tab hide" data-id="2">
<dl>
<dt><a>手机通讯<i> ></i></a></dt>
<dd>
<a>手机</a>
<a>游戏手机</a>
<a>5G手机</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>中国电信</a>
<a>中国移动</a>
<a>中国联通</a>
<a>京东通信</a>
<a>挑靓号</a>
</dd>
</dl>
</div>
<div class="tab hide" data-id="3">
<dl>
<dt><a>手机通讯<i> ></i></a></dt>
<dd>
<a>手机</a>
<a>游戏手机</a>
<a>5G手机</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>中国电信</a>
<a>中国移动</a>
<a>中国联通</a>
<a>京东通信</a>
<a>挑靓号</a>
</dd>
</dl>
</div>
<div class="tab hide" data-id="4">
<dl>
<dt><a>手机通讯<i> ></i></a></dt>
<dd>
<a>手机</a>
<a>游戏手机</a>
<a>5G手机</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>中国电信</a>
<a>中国移动</a>
<a>中国联通</a>
<a>京东通信</a>
<a>挑靓号</a>
</dd>
</dl>
</div>
<div class="tab hide" data-id="5">
<dl>
<dt><a>手机通讯<i> ></i></a></dt>
<dd>
<a>手机</a>
<a>游戏手机</a>
<a>5G手机</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>中国电信</a>
<a>中国移动</a>
<a>中国联通</a>
<a>京东通信</a>
<a>挑靓号</a>
</dd>
</dl>
</div>
<div class="tab hide" data-id="6">
<dl>
<dt><a>手机通讯<i> ></i></a></dt>
<dd>
<a>手机</a>
<a>游戏手机</a>
<a>5G手机</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>中国电信</a>
<a>中国移动</a>
<a>中国联通</a>
<a>京东通信</a>
<a>挑靓号</a>
</dd>
</dl>
</div>
<div class="tab hide" data-id="7">
<dl>
<dt><a>手机通讯<i> ></i></a></dt>
<dd>
<a>手机</a>
<a>游戏手机</a>
<a>5G手机</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>中国电信</a>
<a>中国移动</a>
<a>中国联通</a>
<a>京东通信</a>
<a>挑靓号</a>
</dd>
</dl>
</div>
<div class="tab hide" data-id="8">
<dl>
<dt><a>手机通讯<i> ></i></a></dt>
<dd>
<a>手机</a>
<a>游戏手机</a>
<a>5G手机</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>中国电信</a>
<a>中国移动</a>
<a>中国联通</a>
<a>京东通信</a>
<a>挑靓号</a>
</dd>
</dl>
</div>
<div class="tab hide" data-id="9">
<dl>
<dt><a>手机通讯<i> ></i></a></dt>
<dd>
<a>手机</a>
<a>游戏手机</a>
<a>5G手机</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>中国电信</a>
<a>中国移动</a>
<a>中国联通</a>
<a>京东通信</a>
<a>挑靓号</a>
</dd>
</dl>
</div>
<div class="tab hide" data-id="10">
<dl>
<dt><a>手机通讯<i> ></i></a></dt>
<dd>
<a>手机</a>
<a>游戏手机</a>
<a>5G手机</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>中国电信</a>
<a>中国移动</a>
<a>中国联通</a>
<a>京东通信</a>
<a>挑靓号</a>
</dd>
</dl>
</div>
</div>
</div>
<div style="text-align:center;" class="kk">
<p>更多内容请关注<a href=" target="_blank"
style="color: rgb(255, 0, 0);">小花007</a></p>
</div>
</body>
</html>
二、CSS模块相关源码
CSS文件：style.css
* {
margin: 0;
padding: 0;
}
body
{
margin: 0;
padding: 0;
width: 100%;
background-color: #002b36;
font-size: 16px;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
ul li {
margin: 0;
padding: 0;
list-style-type: none;
}
a {
text-decoration: none;
}
.detailed{
position: relative;
top: 50px;
margin: 0 auto;
width: 1000px;
height: auto;
}
.left {
width: 200px;
height: 450px;
background: #ff0239;
}
.left ul {
width: 100%;
}
.left ul li {
height: 50px;
line-height: 50px;
text-align: left;
}
.left ul li i{
float: right;
padding-right: 10px;
}
.left ul li span {
padding-left: 10px;
height: 45px;
line-height: 45px;
display: block;
background: #ff0239;
color: #fff;
}
.left ul li span:hover {
color: #FF0036;
background: #000000;
transform: scale(1.1);
}
.right {
position: absolute;
top: 0;
width: 800px;
height: 450px;
margin-left: 200px;
}
.tab {
position: relative;
overflow: hidden;
padding: 10px 0px;
width: 100%;
height: 474px;
background: #FFFFFF;
}
.tab dl {
overflow: hidden;
padding: 0px 0px 10px 0px;
}
.tab dt {
width: 100px;
float: left;
display: block;
position: relative;
clear: left;
}
.tab dt a {
cursor: pointer;
font-size: 14px;
color: #000;
font-weight: bold;
text-align: center;
padding-left: 10px;
}
.tab dt i {
position: absolute;
top: 2px;
width: 4px;
right: 12px;
font-size: 14px;
}
.tab dd {
position: relative;
float: left;
display: block;
width: 680px;
overflow: hidden;
padding-right:10px;
border-bottom: 1px dashed #E3E3E3;
}
.tab dd a {
float: left;
font-size: 12px;
color: #808080;
padding: 0 10px;
margin: 4px 0px 12px 0px;
border-left: 1px solid #E3E3E3;
text-decoration: none;
cursor: pointer;
}
.tab dd a:hover {
color: #FF0036;
transform: scale(1.1);
}
.hide {
display: none;
}
.kk{
margin-top:100px ;
color: #fff;
}
三、jQuery模块相关源码
jQuery文件：JQ.js
$(function () {
$('.detailed').on('mouseenter', function () {
$(".right").removeClass('hide'); //鼠标经过的时候移除hide，显示tab栏
});
$('.detailed').on('mouseleave', function () {
$(".right").addClass('hide'); //鼠标离开的时候添加hide，隐藏tab栏
$(".tab").addClass('hide');
});
$('.detailed').on('mouseenter', 'li', function (e) {
//鼠标经过li的时候
var tab_data = $(this).attr('data-id');
//attr获取匹配的元素集合中的第一个元素的属性的值 或 设置每一个匹配元素的一个或多个属性。
$(".tab").addClass('hide'); //只让选中的显示，其他的均隐藏
//获取鼠标经过获取data-id值
$('.tab[data-id="' + tab_data + '"]').removeClass('hide');
})
})
如果没有jquery.min.js文件，可使用
<script src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
