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 相关文章推荐
nw.js实现类似微信的聊天软件
Mar 16 Javascript
jQuery实现彩带延伸效果的网页加载条loading动画
Oct 29 Javascript
JSON+Jquery省市区三级联动
Jan 13 Javascript
JS控制FileUpload的上传文件类型实例代码
Oct 07 Javascript
Vue使用vue-cli创建项目
Sep 01 Javascript
JavaScript多态与封装实例分析
Jul 27 Javascript
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
May 01 Javascript
Javascript作用域和作用域链原理解析
Mar 03 Javascript
解决echarts echarts数据动态更新和dataZoom被重置问题
Jul 20 Javascript
利用React高阶组件实现一个面包屑导航的示例
Aug 23 Javascript
Vue实现简单购物车功能
Dec 13 Vue.js
教你使用vscode 搭建react-native开发环境
Jul 07 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/02/11 PHP
PHP实现的简单mock json脚本分享
2015/02/10 PHP
PHP7扩展开发之hello word实现方法详解
2018/01/15 PHP
JCalendar 日历控件 v1.0 beta[兼容IE&amp;Firefox] 有文档和例子
2007/05/30 Javascript
Js基础学习资料
2010/11/23 Javascript
最短的javascript:地址栏载入脚本代码
2011/10/13 Javascript
解决checkbox的attr(checked)一直为undefined问题
2014/06/16 Javascript
js网页右下角提示框实例
2014/10/14 Javascript
jQuery中size()方法用法实例
2014/12/27 Javascript
jQuery中toggleClass()方法用法实例
2015/01/05 Javascript
JavaScript中获取HTML元素值的三种方法
2016/06/20 Javascript
jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载(二)
2016/06/22 Javascript
基于原生js淡入淡出函数封装(兼容IE)
2016/10/20 Javascript
Node.js Sequelize如何实现数据库的读写分离
2016/10/23 Javascript
简单实现bootstrap导航效果
2017/02/07 Javascript
BootStrap表单宽度设置方法
2017/03/10 Javascript
angularjs实现首页轮播图效果
2017/04/14 Javascript
jQuery实现的事件绑定功能基本示例
2017/10/11 jQuery
Vue单页及多页应用全局配置404页面实践记录
2018/05/22 Javascript
JS实现前端路由功能示例【原生路由】
2020/05/29 Javascript
[03:48]DOTA2完美大师赛主赛事第二日精彩集锦
2017/11/24 DOTA
压缩包密码破解示例分享(类似典破解)
2014/01/17 Python
Python通过调用有道翻译api实现翻译功能示例
2018/07/19 Python
Python使用pyautogui模块实现自动化鼠标和键盘操作示例
2018/09/04 Python
Python实现定时自动关闭的tkinter窗口方法
2019/02/16 Python
python 多进程共享全局变量之Manager()详解
2019/08/15 Python
python利用xpath爬取网上数据并存储到django模型中
2021/02/26 Python
护士毕业生自我鉴定
2014/02/08 职场文书
安全生产实施方案
2014/02/23 职场文书
卖车协议书
2014/04/21 职场文书
艾滋病宣传标语
2014/06/25 职场文书
离婚协议书范文
2015/01/26 职场文书
税务会计岗位职责
2015/04/02 职场文书
让子弹飞观后感
2015/06/11 职场文书
如何写好竞聘报告
2019/04/03 职场文书
什么是Python装饰器?如何定义和使用?
2022/04/11 Python