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 相关文章推荐
将字符串转换成gb2312或者utf-8编码的参数(js版)
Apr 10 Javascript
JavaScript表单通过正则表达式验证电话号码
Mar 14 Javascript
nw.js实现类似微信的聊天软件
Mar 16 Javascript
JavaScript识别网页关键字并进行描红的方法
Nov 09 Javascript
jQuery拖拽排序插件制作拖拽排序效果(附源码下载)
Feb 23 Javascript
js编写的treeview使用方法
Nov 11 Javascript
vue下跨域设置的相关介绍
Aug 26 Javascript
JavaScript 通过Ajax 动态加载CheckBox复选框
Aug 31 Javascript
解决echarts的多个折现数据出现坐标和值对不上的问题
Dec 28 Javascript
详解webpack 最简打包结果分析
Feb 20 Javascript
利用js canvas实现五子棋游戏
Oct 11 Javascript
JavaScript实现两个数组的交集
Mar 25 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
php中计算程序运行时间的类代码
2012/11/03 PHP
使用php get_headers 判断URL是否有效的解决办法
2013/04/27 PHP
php中的静态变量的基本用法
2014/03/20 PHP
如何使用php等比例缩放图片
2016/10/12 PHP
phpcms实现验证码替换及phpcms实现全站搜索功能教程详解
2017/12/13 PHP
探讨:JavaScript ECAMScript5 新特性之get/set访问器
2016/05/05 Javascript
js实现键盘自动打字效果
2016/12/23 Javascript
关于vue中 $emit的用法详解
2018/04/12 Javascript
使用proxy实现一个更优雅的vue【推荐】
2018/06/19 Javascript
详解vue-cli3使用
2018/08/14 Javascript
深入理解Vue 的钩子函数
2018/09/05 Javascript
vue中keep-alive组件的入门使用教程
2019/06/06 Javascript
vue-router路由模式详解(小结)
2019/08/26 Javascript
[01:12:08]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.24
2019/09/10 DOTA
使用Python获取Linux系统的各种信息
2014/07/10 Python
Python脚本实现自动发带图的微博
2016/04/27 Python
python中获得当前目录和上级目录的实现方法
2017/10/12 Python
python密码错误三次锁定(实例讲解)
2017/11/14 Python
深入浅析Python中的yield关键字
2018/01/24 Python
Python语言的变量认识及操作方法
2018/02/11 Python
Django打印出在数据库中执行的语句问题
2019/07/25 Python
python实现批量处理将图片粘贴到另一张图片上并保存
2019/12/12 Python
Pytorch模型转onnx模型实例
2020/01/15 Python
利用PyQt中的QThread类实现多线程
2020/02/18 Python
一款纯css3实现的竖形二级导航的实例教程
2014/12/11 HTML / CSS
荷兰最大的鞋子、服装和运动折扣店:Bristol
2021/01/07 全球购物
什么是smarty? Smarty的优点是什么?
2013/08/11 面试题
新浪网技术部笔试题
2016/08/26 面试题
大学生冰淇淋店商业计划书
2014/01/14 职场文书
《中国梦我的梦》小学生演讲稿
2014/08/20 职场文书
产品陈列协议书(标准版)
2014/09/17 职场文书
2014年最新学校运动会广播稿
2014/09/17 职场文书
2015年财务部年度工作总结
2015/05/19 职场文书
信息技术研修心得体会
2016/01/08 职场文书
面试中canvas绘制图片模糊图片问题处理
2022/03/13 Javascript
Vue2.0搭建脚手架
2022/03/13 Vue.js