仿淘宝商城左侧分类导航菜单效果(平滑,高效,智能定位,jquery版)
2011-09-11 00:39
816 查看
[转/article/4742164.html]
仿淘宝商城 左侧分类导航菜单 效果(平滑,高效,智能定位,jquery版)
![](http://images.cnblogs.com/cnblogs_com/zengxiangzhan/201108/201108271024093383.png)
![](http://images.cnblogs.com/cnblogs_com/zengxiangzhan/201108/201108271024165722.png)
jquery实现:
完毕!
仿淘宝商城 左侧分类导航菜单 效果(平滑,高效,智能定位,jquery版)
![](http://images.cnblogs.com/cnblogs_com/zengxiangzhan/201108/201108271024093383.png)
![](http://images.cnblogs.com/cnblogs_com/zengxiangzhan/201108/201108271024165722.png)
jquery实现:
$(document).ready(function () { <!-- 鼠标进入--> var g = $(".pop-subcategory"); $('.items').delegate("li", "mouseenter", function () { $(".shadow").children().addClass("hidden"); var i = $("li").index(this); var s = $(".shadow").children().eq(i); s.removeClass("hidden"); $(this).addClass("selected"); $(".mallCategory").css("zIndex", 20); g.removeClass("hidden"); <!--智能定位--> var e = $(this); var z = 20, u = 0; var C = e.offset(), y = e.height(), v = $(".mallCategory").offset(), t = $(".pop-subcategory").height(), w = $(window).height(), q = $(window).scrollTop(), r = w - t - (C.top - q), x = Math.abs(C.top - q - v.top), B = w - (C.top - q), p = C.top - v.top; if (r <= 0) { r = Math.abs(r); if (B > y) { u = B - y; if (u > z) { p = p - r - z + 7; } else { p = p - r; } } else { p = p - r + z + B + 20; } } if (p < 0) { p = 0; } $(".pop-subcategory").css("top", p + "px"); $(".shadow").children().eq(i).find('.lst-subcategory dl:first').addClass("first"); g.live("mouseenter", function () { $('.items').children().removeClass("selected"); $('.items').children().eq(i).addClass("selected"); g.removeClass("hidden"); }); }); <!-- 鼠标移出后--> $('.pop-subcategory').delegate("div.J_SubViewItem", "mouseleave", function () { $(this).addClass("hidden"); g.addClass("hidden"); $('.items').children().removeClass("selected"); $(".mallCategory").css("zIndex", 15); }); $('.items').delegate("li.J_MenuItem", "mouseleave", function () { $(this).removeClass("selected"); g.addClass("hidden"); $(".mallCategory").css("zIndex", 15); }); });
完毕!
相关文章推荐
- 仿淘宝商城左侧分类导航菜单效果(平滑,高效,智能定位,jquery版)
- jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
- jquery仿京东导航,仿淘宝商城左侧分类导航菜单,jquery实现下拉菜单效果
- jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
- jQuery模仿京东/天猫商品左侧分类导航菜单效果
- jQuery实战之仿淘宝商城左侧导航效果
- jquery左侧导航滑动网页定位效果
- javascript仿京东导航左侧分类导航下拉菜单效果
- jQuery实战之仿淘宝商城左侧导航效果
- javascript仿京东导航左侧分类导航下拉菜单效果
- jQuery左侧菜单效果
- jQuery 实现侧边浮动导航菜单效果
- jQuery纵向导航菜单效果实现方法
- 左侧分类导航菜单(续)
- jquery左侧导航网页菜单
- Jquery实现仿淘宝天猫左侧分类导航插件
- jQuery+css实现非常漂亮的水平导航菜单效果