jQuery模仿京东/天猫商品左侧分类导航菜单效果

 更新时间:2016年06月29日 16:26:28   作者:kafeigeiwo   我要评论
在京东或者是天猫上可以看到左侧分类导航菜单,当鼠标滑过导航分类时,会出现详细分类模块,鼠标移开就会恢复默认样式,下面小编给大家带来了基于 mouseenter()和mouseleave()实现仿京东/天猫商品左侧分类导航菜单效果,一起看看吧

现在天猫或者京东商品分类模块的默认的效果是这样的:

当鼠标滑过任意一栏导航分类时,就会出现相关详细分类模块,例如:

当鼠标移出蓝色框以外的区域,就会恢复默认的效果显示!然而使用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相当于是装饰展示的作用,把布局排好就行

那么重点是在第3个模块,第三个模块的大盒子这里命名为dd

在dd的盒子(也就是第3模块)里面,分别有左边红色背景的这个导航分类的大盒子(nav_list)3.1,和右边鼠标滑过之后才显示的白色背景的盒子(nav_detailBox)3.2,经常写这种布局的肯定知道是用定位布局才能实现,所以这里也是用定位来实现的布局。

布局要和我们的样式相关联系,比如我们默认样式就是鼠标不滑过是默认的效果,鼠标滑过显示的特殊效果,那就单独写一个样式,通过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是这些盒子

nav_detailBox就是鼠标滑过左边的nav_list_s才显示的大盒子,nav_detail就是这个大盒子里的内容。

以上所述是小编给大家介绍的jQuery模仿京东/天猫商品左侧分类导航菜单效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持

相关文章

  • Juqery Html(),append()等方法的Bug解决方法

    Juqery Html(),append()等方法的Bug解决方法

    标题中说是jquery中的Bug,只是个人这么认为,先申明一下!
    2010-12-12
  • jquery实现选项卡切换代码实例

    jquery实现选项卡切换代码实例

    这篇文章主要介绍了jquery实现选项卡切换,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • 基于JQuery实现CheckBox全选全不选

    基于JQuery实现CheckBox全选全不选

    做项目时需要实现CheckBox的全选,我想用JQuery实现,从网上找了找,网上的确有很多例子,但都不能实现我想要的全部效果
    2011-06-06
  • jQuery多级联动下拉插件chained用法示例

    jQuery多级联动下拉插件chained用法示例

    这篇文章主要介绍了jQuery多级联动下拉插件chained用法,结合实例形式分析了jQuery多级联动下拉插件chained的功能与基本使用技巧,需要的朋友可以参考下
    2016-08-08
  • jquery组件WebUploader文件上传用法详解

    jquery组件WebUploader文件上传用法详解

    这篇文章主要为大家详细介绍了jquery组件WebUploader文件上传用法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11
  • jQuery判断当前点击的是第几个li的代码

    jQuery判断当前点击的是第几个li的代码

    jQuery中如何判断当前点击的是第几个li,使用$(this).index()取得li的下标,下面的示例,大家可以看看
    2014-09-09
  • jQuery中removeAttr()方法用法实例

    jQuery中removeAttr()方法用法实例

    这篇文章主要介绍了jQuery中removeAttr()方法用法,实例分析了removeAttr()方法的功能、定义及从匹配元素中移除相应属性的使用技巧,需要的朋友可以参考下
    2015-01-01
  • jQuery插件实现文件上传功能(支持拖拽)

    jQuery插件实现文件上传功能(支持拖拽)

    这篇文章主要介绍了jQuery插件实现文件上传功能,可支持拖拽文件上传,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-06-06
  • jQuery操作cookie的示例代码

    jQuery操作cookie的示例代码

    这篇文章主要介绍了jQuery操作cookie的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-06-06
  • jQuery实现鼠标滑过图片移动特效

    jQuery实现鼠标滑过图片移动特效

    这篇文章主要介绍了jQuery实现鼠标滑过图片移动特效,鼠标移动到图片上时图片向上动一下,等到鼠标离开后,图片又返回到原来位置,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12

最新评论