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 相关文章推荐
Jquery+CSS3实现一款简洁大气带滑动效果的弹出层
May 15 Javascript
asm.js使用示例代码
Nov 28 Javascript
浅谈Unicode与JavaScript的发展史
Jan 19 Javascript
ECMA5数组的新增方法有哪些及forEach()模仿实现
Nov 03 Javascript
用Vue.js实现监听属性的变化
Nov 17 Javascript
javascript正则表达式模糊匹配IP地址功能示例
Jan 06 Javascript
使用angular帮你实现拖拽的示例
Jul 05 Javascript
js 概率计算(简单版)
Sep 12 Javascript
Node.js命令行/批处理中如何更改Linux用户密码浅析
Jul 22 Javascript
vue 实现cli3.0中使用proxy进行代理转发
Oct 30 Javascript
jQuery轮播图功能制作方法详解
Dec 03 jQuery
vuex存取值和映射函数使用说明
Jul 24 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定时删除文件夹下文件(清理缓存文件)
2013/01/23 PHP
php foreach正序倒序输出示例代码
2014/07/01 PHP
Yii2下点击验证码的切换实例代码
2017/03/14 PHP
Aster vs Newbee BO5 第三场2.19
2021/03/10 DOTA
彪哥1.1(智能表格)提供下载
2006/09/07 Javascript
用js实现手把手教你月入万刀(转贴)
2007/11/07 Javascript
jQuery EasyUI 的EasyLoader功能介绍
2010/09/12 Javascript
jQuery模拟超链接点击效果代码
2013/04/21 Javascript
JavaScript利用append添加元素报错的解决方法
2014/07/01 Javascript
详解JavaScript编程中的数组结构
2015/10/24 Javascript
JQuery.validate在ie8下不支持的快速解决方法
2016/05/18 Javascript
bootstrap输入框组件使用方法详解
2017/01/19 Javascript
jquery ajaxfileupload异步上传插件使用详解
2017/02/08 Javascript
微信小程序 slider的简单实例
2017/04/19 Javascript
vue增删改查的简单操作
2017/07/15 Javascript
利用vue+elementUI实现部分引入组件的方法详解
2017/11/22 Javascript
jQuery实现的点击按钮改变样式功能示例
2018/07/21 jQuery
Python如何实现文本转语音
2016/08/08 Python
使用Python实现博客上进行自动翻页
2017/08/23 Python
记一次python 内存泄漏问题及解决过程
2018/11/29 Python
Python中xml和json格式相互转换操作示例
2018/12/05 Python
对python中的try、except、finally 执行顺序详解
2019/02/18 Python
浅谈Python反射 &amp; 单例模式
2019/03/21 Python
Django 权限认证(根据不同的用户,设置不同的显示和访问权限)
2019/07/24 Python
tensorflow使用range_input_producer多线程读取数据实例
2020/01/20 Python
什么是python的自省
2020/06/21 Python
python邮件中附加文字、html、图片、附件实现方法
2021/01/04 Python
使用phonegap进行提示操作的具体方法
2017/03/30 HTML / CSS
技校毕业生自荐信范文
2014/03/07 职场文书
森林防火宣传标语
2014/06/27 职场文书
幼儿园教师师德师风演讲稿:爱我所爱 无悔青春
2014/09/10 职场文书
学生会干部自我鉴定2014
2014/09/18 职场文书
民事诉讼代理授权委托书范本
2014/10/08 职场文书
校长个人总结
2015/03/03 职场文书
放假通知格式
2015/04/14 职场文书
教您怎么制定西餐厅运营方案 ?
2019/07/05 职场文书