jQuery模仿京东/天猫商品左侧分类导航菜单效果


Posted in Javascript onJune 29, 2016

现在天猫或者京东商品分类模块的默认的效果是这样的:

jQuery模仿京东/天猫商品左侧分类导航菜单效果

当鼠标滑过任意一栏导航分类时,就会出现相关详细分类模块,例如:

jQuery模仿京东/天猫商品左侧分类导航菜单效果

当鼠标移出蓝色框以外的区域,就会恢复默认的效果显示!然而使用jQuery的鼠标滑过事件,用得比较多的就是mouseover()和mouseout(),或者是他们两个的整合hover();所以之前我也是用的这种方法,但是一直调整都调整不到想要的效果!后来灵光一现,想着使用一下mouseenter()和mouseleave();结果分分钟想要的效果就出来了!

我的布局大致是这样的:

<div class="nav_left">
<div class="nav_top"></div>
<div class="nav_tilte">全部商品分类</div>
<div class="dd">
<div class="nav_list">
<div class="nav_list_s ">
<span class="nav_span"><a href="#">手机、</a><a href="#">数码、</a><a href="#">京东通信</a></span>
<i class="nav_arrow">></i>
</div>
<div class="nav_list_s">
<span class="nav_span"><a href="#">手机、</a><a href="#">数码、</a><a href="#">京东通信</a></span>
<i class="nav_arrow">></i>
</div>
<div class="nav_list_s">
<span class="nav_span"><a href="#">手机、</a><a href="#">数码、</a><a href="#">京东通信</a></span>
<i class="nav_arrow">></i>
</div>
</div>
<div class="nav_detailBox">
<div class="nav_detail">
<a href="#">111详细的子菜单,这里就不写了</a>
</div>
<div class="nav_detail">
<a href="#">22222详细的子菜单,这里就不写了</a>
</div>
<div class="nav_detail">
<a href="#">3333详细的子菜单,这里就不写了</a>
</div> 
</div>
</div>
</div>

在nav_left的盒子里有3块大内容,分别是如图的1,2,3,它们同属于nav_left里面,因为都属于分类商品的内容,1和2相当于是装饰展示的作用,把布局排好就行

jQuery模仿京东/天猫商品左侧分类导航菜单效果

那么重点是在第3个模块,第三个模块的大盒子这里命名为dd

在dd的盒子(也就是第3模块)里面,分别有左边红色背景的这个导航分类的大盒子(nav_list)3.1,和右边鼠标滑过之后才显示的白色背景的盒子(nav_detailBox)3.2,经常写这种布局的肯定知道是用定位布局才能实现,所以这里也是用定位来实现的布局。

jQuery模仿京东/天猫商品左侧分类导航菜单效果

布局要和我们的样式相关联系,比如我们默认样式就是鼠标不滑过是默认的效果,鼠标滑过显示的特殊效果,那就单独写一个样式,通过jquery事件添加进去即可!

例如我这里就有一个特殊的类nav_list_s01,添加上它这个类之后,鼠标滑过背景就是白色的。

当布局和样式完全准备妥当之后,我们就可以使用jquery来实现之前想要的效果了:

$(".nav_list_s").mouseenter(function(){
$(this).addClass("nav_list_s01").siblings().removeClass("nav_list_s01");
$(".nav_detailBox").show();
$(".nav_detailBox").children(".nav_detail").eq($(this).index()).show().siblings().hide();
})
$(".nav_left").mouseleave(function(){
$(this).find(".nav_list_s").removeClass("nav_list_s01");
$(".nav_detailBox").stop().hide();
})

之前给出的大致布局也可以看出,nav_list_s是这些盒子

jQuery模仿京东/天猫商品左侧分类导航菜单效果

nav_detailBox就是鼠标滑过左边的nav_list_s才显示的大盒子,nav_detail就是这个大盒子里的内容。

以上所述是小编给大家介绍的jQuery模仿京东/天猫商品左侧分类导航菜单效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持

Javascript 相关文章推荐
AngularJS中取消对HTML片段转义的方法例子
Jan 04 Javascript
JQuery+CSS实现图片上放置按钮的方法
May 29 Javascript
如何制作幻灯片(代码分享)
Jan 06 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(下)
Apr 21 Javascript
详解Vue.js分发之作用域槽
Jun 13 Javascript
微信小程序 sha1 实现密码加密实例详解
Jul 06 Javascript
基于easyui checkbox 的一些操作处理方法
Jul 10 Javascript
微信小程序实现星级评价效果
Dec 28 Javascript
通过seajs实现JavaScript的模块开发及按模块加载
Jun 06 Javascript
Vue Element UI + OSS实现上传文件功能
Jul 31 Javascript
Angular8路由守卫原理和使用方法
Aug 29 Javascript
JavaScript实现无限轮播效果
Nov 19 Javascript
RequireJS多页面应用实例分析
Jun 29 #Javascript
全面了解JS中的匿名函数
Jun 29 #Javascript
大型JavaScript应用程序架构设计模式
Jun 29 #Javascript
基于JS模仿windows文件按名称排序效果
Jun 29 #Javascript
JavaScript中闭包的写法和作用详解
Jun 29 #Javascript
浅谈window.onbeforeunload() 事件调用ajax
Jun 29 #Javascript
json对象转为字符串,当做参数传递时加密解密的实现方法
Jun 29 #Javascript
You might like
《一拳超人》埼玉一拳下去,他们存在了800年毫无意义!
2020/03/02 日漫
同台服务器使用缓存APC效率高于Memcached的演示代码
2010/02/16 PHP
PHP5与MySQL数据库操作常用代码 收集
2010/03/21 PHP
解析php中两种缩放图片的函数,为图片添加水印
2013/06/14 PHP
PHP图片处理之使用imagecopyresampled函数实现图片缩放例子
2014/11/19 PHP
php实现的IMEI限制的短信验证码发送类
2015/05/05 PHP
php自定义函数实现统计中文字符串长度的方法小结
2017/04/15 PHP
phpQuery采集网页实现代码实例
2020/04/02 PHP
出现“不能执行已释放的Script代码”错误的原因及解决办法
2007/08/29 Javascript
jquery绑定原理 简单解析与实现代码分享
2011/09/06 Javascript
常规表格多表头查询示例
2014/02/21 Javascript
jquery1.10给新增元素绑定事件的方法
2014/03/06 Javascript
js语法学习之判断一个对象是否为数组
2014/05/13 Javascript
js调试工具Console命令详解
2014/10/21 Javascript
JavaScript实现检查页面上的广告是否被AdBlock屏蔽了的方法
2014/11/03 Javascript
JavaScript中innerHTML,innerText,outerHTML的用法及区别
2015/09/01 Javascript
手机端实现Bootstrap简单图片轮播效果
2016/10/13 Javascript
使用Bootstrap美化按钮实例代码(demo)
2017/02/03 Javascript
Angularjs验证用户输入的字符串是否为日期时间
2017/06/01 Javascript
微信小程序开发之toast提示插件使用示例
2017/06/08 Javascript
9102年webpack4搭建vue项目的方法步骤
2019/02/20 Javascript
在Vue里如何把网页的数据导出到Excel的方法
2020/09/30 Javascript
Javascript表单序列化原理及实现代码详解
2020/10/30 Javascript
浅谈numpy中linspace的用法 (等差数列创建函数)
2017/06/07 Python
python3 enum模块的应用实例详解
2019/08/12 Python
使用openCV去除文字中乱入的线条实例
2020/06/02 Python
Pandas的Apply函数具体使用
2020/07/21 Python
css3+伪元素实现鼠标移入时下划线向两边展开的效果
2017/04/25 HTML / CSS
Sneaker Studio法国:购买运动鞋
2018/06/08 全球购物
英国露营设备和户外服装购物网站:Simply Hike
2019/05/05 全球购物
客服服务心得体会
2013/12/30 职场文书
2015年乡镇工作总结范文
2015/04/22 职场文书
初中信息技术教学反思
2016/02/16 职场文书
pytorch 实现多个Dataloader同时训练
2021/05/29 Python
面试中canvas绘制图片模糊图片问题处理
2022/03/13 Javascript
利用Python脚本写端口扫描器socket,python-nmap
2022/07/23 Python