jQuery手机wap图标菜单导航

收藏

分享一个手机wap自定义图标菜单效果，鼠标悬浮导航试试呢。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

自定义图标菜单

• 1.商品展示管理模块

  自主添加产品类别，不限级数。后台对产品实现增、查、删、改等功能。前端对产品进行列表展示、详细页面展示。详细页面包含产品小图、大图、详细参数、文字内容介绍、多图滚动展示、图片放大展示、关联资讯介绍展示。
• 2.会员注册、登陆管理模块

  管理会员注册信息、会员列表，建立会员等级权限组，分配会员至权限组，然后根据权限使用网站的其它各个功能模块。
• 3.会员基本资料管理模块

  对会员注册的基本资料进行查看、修改。

jQuery

$(function() {
    $(".s-mod ul").fadeIn(300, function() {
        $(".s-mod .s-mod-loding").remove();
    })
    $(".s-mod ul .s-mod-item").each(function() {
        var i = $(this);
        var o = {
            w: 1 * i.attr("w"),
            h: 1 * i.attr("h"),
            l: 1 * i.attr("l"),
            t: 1 * i.attr("t"),
            bg: i.attr("bg"),
            cbg: i.attr("cbg"),
            speed: 600
        };
        var wrap = i.find(".s-mod-wrap");
        var def = i.find(".s-mod-def");
        var cur = i.find(".s-mod-cur");
        i.css({width: o.w, height: o.h, left: o.l, top: o.t});
        wrap.css({width: o.w, height: o.h});
        def.css({width: (o.w - 24), height: o.h, backgroundColor: o.bg});
        cur.css({width: (o.w - 24), height: o.h, backgroundColor: o.cbg, top: o.h});

        def.find("span").css({paddingTop: ((o.h - def.find("span").height()) / 2)})
        cur.find("span").css({paddingTop: ((o.h - cur.find("span").height()) / 2)})

        //滑动效果
        i.hover(function() {
            def.stop().animate({top: -o.h}, o.speed, "easeOutBounce")
            cur.stop().animate({top: 0}, o.speed, "easeOutBounce")
        }, function() {
            def.stop().animate({top: 0}, o.speed, "easeOutBounce")
            cur.stop().animate({top: o.h}, o.speed, "easeOutBounce")
        })
    })
})