帝王谷资源网

jQuery模仿京东/天猫商品左侧分类导航菜单效果
网络编程 2024/11/1 佚名
3 2
帝王谷资源网 Design By www.wdxyy.com

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

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模仿京东/天猫商品左侧分类导航菜单效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持

标签：
jquery仿京东天猫分类导航
帝王谷资源网 Design By www.wdxyy.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
帝王谷资源网 Design By www.wdxyy.com
www.wdxyy.com 帝王谷资源网
139,976互联网资源
144,792高清电影
21,817无损音乐
631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接