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 相关文章推荐
使用SyntaxHighlighter实现HTML高亮显示代码的方法
Feb 04 Javascript
Underscore.js常用方法总结
Feb 28 Javascript
jQuery实现页面内锚点平滑跳转特效的方法总结
May 11 Javascript
js实现鼠标经过表格行变色的方法
May 12 Javascript
原生js封装二级城市下拉列表的实现代码
Jun 16 Javascript
JS HTML5拖拽上传图片预览
Jul 18 Javascript
js实现的在线调色板功能完整实例
Dec 21 Javascript
Vue中fragment.js使用方法详解
Mar 09 Javascript
浅谈Vue组件及组件的注册方法
Aug 24 Javascript
vue项目中使用vue-i18n报错的解决方法
Jan 13 Javascript
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
Feb 15 jQuery
vue实现带过渡效果的下拉菜单功能
Feb 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
PHP易混淆函数的区别及用法汇总
2014/11/22 PHP
windows7配置Nginx+php+mysql的详细教程
2016/09/04 PHP
php获取远程图片并下载保存到本地的方法分析
2016/10/08 PHP
php图像验证码生成代码
2017/06/08 PHP
yii2 上传图片的示例代码
2018/11/02 PHP
js使用函数绑定技术改变事件处理程序的作用域
2011/12/26 Javascript
jquery如何获取复选框的值
2013/12/12 Javascript
动态添加删除表格行的js实现代码
2014/02/28 Javascript
2014最热门的JavaScript代码高亮插件推荐
2014/11/25 Javascript
jquery实现通用的内容渐显Tab选项卡效果
2015/09/07 Javascript
javascript中类的定义方式详解(四种方式)
2015/12/22 Javascript
Java遍历集合方法分析(实现原理、算法性能、适用场合)
2016/04/25 Javascript
jQuery 中ajax异步调用的四种方式
2016/06/28 Javascript
BootStrop前端框架入门教程详解
2016/12/25 Javascript
详解JS中的快速排序与冒泡
2017/01/10 Javascript
Vue.js搭建移动端购物车界面
2020/06/28 Javascript
vue中的inject学习教程
2019/04/24 Javascript
详解微信小程序获取当前时间及日期的方法
2019/04/28 Javascript
[40:27]完美世界DOTA2联赛PWL S3 PXG vs GXR 第一场 12.19
2020/12/24 DOTA
python中的yield使用方法
2014/02/11 Python
python分割一个文本为多个文本的方法
2019/07/22 Python
详解python中index()、find()方法
2019/08/29 Python
详解Python实现进度条的4种方式
2020/01/15 Python
Python实现从N个数中找到最大的K个数
2020/04/02 Python
jupyter notebook中美观显示矩阵实例
2020/04/17 Python
keras实现VGG16方式(预测一张图片)
2020/07/07 Python
python修改微信和支付宝步数的示例代码
2020/10/12 Python
关于canvas绘制模糊问题的解决方法
2019/09/24 HTML / CSS
创建青年文明号材料
2014/05/09 职场文书
班级口号大全
2014/06/09 职场文书
2014年党的群众路线活动个人整改措施
2014/10/28 职场文书
单位租房协议书样本
2014/10/30 职场文书
幼儿教师2014年度工作总结
2014/12/16 职场文书
《游戏公平》教学反思
2016/02/20 职场文书
java设计模式--三种工厂模式详解
2021/07/21 Java/Android
电脑开机弹出documents文件夹怎么回事?弹出documents文件夹解决方法
2022/04/08 数码科技