热门关键字:
jquery > jquery插件 > jquery导航菜单 > Jquery实现超酷的左边商品分类导航菜单特效

Jquery实现超酷的左边商品分类导航菜单特效

21088
所属分类:jquery导航菜单
发布时间:2013/1/30 9:32:22
下载量:4041
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Detail.aspx?id=154

左边商品分类导航菜单Jquery特效是商城必不可少的神兵利器之一,今天刚好有空就整理了这款绿色的左边商品分类导航菜单出来分享给大家用。

 

主要包括了以下特点:

1、鼠标悬浮事件

2、弹出右边提示层

3、可支持Ajax数据加载

4、兼容IE6显示所有select 元素

 

主要代码如下:

$('div#nav > ul > li').hover(
    function(ev){
        var $this = this;
        allCateTimer = setTimeout(function() {
            var bottomHeight = document.documentElement.clientHeight - ev.clientY;
            
            if (bottomHeight <= 250) {
                $($this).addClass('over').find('div.submenubox').addClass('submenuboxBottom').removeClass('disn');
            } else {
                $($this).addClass('over').find('div.submenubox').removeClass('submenuboxBottom').removeClass('disn');
            }
            //兼容IE6隐藏所有select 元素
            $("select").each(function() {
              if ($(this).css('visibility') != 'hidden') {
                $(this).addClass('menuVisible').css('visibility', 'hidden');
              }
            });
            if ($($this).find("div.subcate").size()<= 0) {
                async_topMenu($this);
            }
        }, delay);
    },
    function(){
        var $this = this;
        if (allCateTimer) {
            clearTimeout(allCateTimer);
        }
        allCateTimer = setTimeout(function() { 
            $($this).removeClass('over').find('div.submenubox').addClass('disn');}, delay);
    }
);

 

效果如下:

Jquery实现超酷的左边商品分类导航菜单特效

 

 





如果您觉得本作品对您的学习有所帮助:支付鼓励



关键字:导航菜单 弹出层 二级菜单 天猫左侧分类导航 分类导航菜单
  • Jquery实现超酷的左边商品分类导航菜单特效如果你喜欢学院的资源就下载吧,亲,谢谢!
  • Jquery实现超酷的左边商品分类导航菜单特效
  • Jquery实现超酷的左边商品分类导航菜单特效
  • 提示:如果网络问题无法下载,请多尝试几次,与 网站管理员联系 或 本站留言 !

声明: 本站内容均为网友原创或整理于互联网,版权归作品最初创作人,转载请注明(出处)原文链接,转载前请邮件至磐temdy@qq.com,一旦发现造成侵权行为,后果自负。。

友荐云推荐