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> &gt;</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> &gt;</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> &gt;</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> &gt;</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> &gt;</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> &gt;</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> &gt;</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> &gt;</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> &gt;</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> &gt;</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> &gt;</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> &gt;</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> &gt;</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> &gt;</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> &gt;</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> &gt;</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> &gt;</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> &gt;</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> &gt;</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> &gt;</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> &gt;</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> &gt;</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> &gt;</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> &gt;</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> &gt;</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="https://blog.csdn.net/weixin_50569789?spm=1011.2124.3001.5343" 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>

jQuery天猫商品分类导航菜单相关推荐

基于jQuery垂直多级导航菜单代码
基于jQuery垂直多级导航菜单代码是一款黑色风格的jQuery竖直导航菜单特效下载.效果图如下: 在线预览源码下载实现的代码. html代码: <ul class="ce& ...
jq ajax写二级导航,jQuery实现二级导航菜单的示例
实用JQ实现导航二级菜单效果,导航菜单在网站中非常常见,有的网站可能会出现三级菜单及多级菜单模式,下面我们来简单的实现一个二级菜单的效果. 部分效果截图: 整体代码: 导航菜单案例 *{ paddin ...
PHP淘宝左侧商品分类,jQuery电商网站左侧商品分类导航菜单代码
js代码 $(function() { var $top = $('.sec-mainNav').offset().top + $('.sec-mainNav').height() //左侧导航动画 ...
JQuery实现旅游导航菜单应用方便
实现后的效果图是: HTML代码部分: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...
两种思想实现基于jquery的延时导航菜单，可做延时触发器！
1. 函数式 html如下: <div class="box"><ul class="clear-fix"><li class=& ...
基于jquery仿天猫分类导航banner切换
分享一款基于jquery天猫分类导航banner切换.这是一款仿最新天猫商品分类导航控制banner图片切换代码.效果图如下: 在线预览源码下载部分代码: <div class=&quo ...
html左边多级菜单导航栏,精美的多级侧边栏导航菜单jQuery插件
这是一款基于bootstrap的精美多级侧边栏导航菜单jQuery插件.该导航菜单在bootstrap样式的基础上,通过jQuery来为导航菜单绑定菜单点击事件,生成非常漂亮的多级侧边栏导航菜单. 使 ...
Qt编写自定义控件：高亮滑动导航菜单
代码: #ifndef HIGHLIGHTSLIDINGNAVIGATIONMENUWIDGET_H #define HIGHLIGHTSLIDINGNAVIGATIONMENUWIDGET_H#in ...
html仿写京东左侧,jQuery模仿京东/天猫商品左侧分类导航菜单效果
现在天猫或者京东商品分类模块的默认的效果是这样的: 当鼠标滑过任意一栏导航分类时,就会出现相关详细分类模块,例如: 当鼠标移出蓝色框以外的区域,就会恢复默认的效果显示!然而使用jQuery的鼠标滑过事 ...

jQuery天猫商品分类导航菜单

jQuery天猫商品分类导航菜单

一、HTML模块相关源码

二、CSS模块相关源码

三、jQuery模块相关源码

jQuery天猫商品分类导航菜单相关推荐

最新文章

热门文章