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实现输入框动态增减的实例代码
Jul 14 Javascript
javascript对下拉列表框(select)的操作实例讲解
Nov 29 Javascript
js实现的GridView即表头固定表体有滚动条且可滚动
Feb 19 Javascript
使用JS+plupload直接批量上传图片到又拍云
Dec 01 Javascript
javascript实现动态加载CSS
Jan 26 Javascript
JSON字符串转JSON对象
Jul 31 Javascript
JS实现保留n位小数的四舍五入问题示例
Aug 03 Javascript
jquery仿微信聊天界面
May 06 jQuery
关于Stream和Buffer的相互转换详解
Jul 26 Javascript
bootstrap表格内容过长时用省略号表示的解决方法
Nov 21 Javascript
Angular5升级RxJS到5.5.3报错:EmptyError: no elements in sequence的解决方法
Apr 09 Javascript
layer扩展打开/关闭动画的方法
Sep 23 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中cookies使用指南
2007/03/16 PHP
DISCUZ 论坛管理员密码忘记的解决方法
2009/05/14 PHP
php htmlspecialchars()与shtmlspecialchars()函数的深入分析
2013/06/05 PHP
PHP strip_tags()去除HTML、XML以及PHP的标签介绍
2014/02/18 PHP
使用PHP和HTML5 FormData实现无刷新文件上传教程
2014/09/06 PHP
用Javascript做flash做的事..才完成的一个类.Auntion Action var 0.1
2007/02/23 Javascript
window.ActiveXObject使用说明
2010/11/08 Javascript
javascript中的void运算符语法及使用介绍
2013/03/10 Javascript
javascript中数组中求最大值示例代码
2013/12/18 Javascript
引用外部脚本时script标签关闭的写法
2014/01/20 Javascript
不同编码的页面表单数据乱码问题解决方法
2015/02/15 Javascript
jQuery实现form表单元素序列化为json对象的方法
2015/12/09 Javascript
JS中sort函数排序用法实例分析
2016/06/16 Javascript
jQuery实现的购物车物品数量加减功能代码
2016/11/16 Javascript
关于js的三种使用方式(行内js、内部js、外部js)的程序代码
2018/05/05 Javascript
JavaScript设计模式之单例模式原理与用法实例分析
2018/07/26 Javascript
vue cli 3.x 项目部署到 github pages的方法
2019/04/17 Javascript
Node.js fs模块(文件模块)创建、删除目录(文件)读取写入文件流的方法
2019/09/03 Javascript
利用Python破解验证码实例详解
2016/12/08 Python
Python动态导入模块的方法实例分析
2018/06/28 Python
Django JWT Token RestfulAPI用户认证详解
2019/01/23 Python
Python 运行.py文件和交互式运行代码的区别详解
2019/07/02 Python
Python自动化完成tb喵币任务的操作方法
2019/10/30 Python
wxPython实现绘图小例子
2019/11/19 Python
Python enumerate函数遍历数据对象组合过程解析
2019/12/11 Python
详解Pycharm安装及Django安装配置指南
2020/09/15 Python
4款Python 类型检查工具,你选择哪个呢?
2020/10/30 Python
意大利时尚精品店:Nugnes 1920
2020/02/10 全球购物
华硕新加坡官方网上商店:ASUS Singapore
2020/07/09 全球购物
多媒体专业自我鉴定
2014/02/28 职场文书
应用数学专业求职信
2014/03/14 职场文书
汉语言文学专业求职信
2014/06/19 职场文书
农村文化建设标语
2014/10/07 职场文书
民事和解协议书格式
2014/11/29 职场文书
2015暑期社会实践通讯稿
2015/07/18 职场文书
日本十大血腥动漫,那些被禁播的动漫盘点
2022/03/21 日漫