jQuery手机wap响应式图标菜单导航

收藏

分享一款手机wap响应式菜单导航，当鼠标悬浮图片菜单时，文字会上下翻滚替换图片，离开恢复初始状态。

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

查看演示

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

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

HTML

.nav放置多个li菜单，默认显示子级img，隐藏h1,h2

<div class="nav">
    <ul class="clearfix">
        <li>
            <a href="http://www.erdangjiade.com/js">
                <p><img src="images/nav1.jpg"  alt=""/></p>
                <div class="navdq">
                    <h1>首页</h1>
                    <h2>HOME</h2>
                </div>
            </a>
        </li>
    </ul>
</div>

jQuery

菜单.nav子级a 标签悬浮时和当鼠标离开时触发：

$('.nav li a').hover(function() {
    $('.navwz', this).stop().fadeIn(200);//隐藏当前图片菜单
    $('.navwz h1', this).stop().animate({'top': '0'}, 400);//显示文字
    $('.navwz h2', this).stop().animate({'top': '0'}, 400);
}, function() { //鼠标离开菜单时，效果相反
    $('.navwz', this).stop().fadeOut(400);
    $('.navwz h1', this).stop().animate({'top': '-43px'}, 400);
    $('.navwz h2', this).stop().animate({'top': '43px'}, 400);
})
qfzy();

导航菜单宽度自适应

function qfzy() {
    if ($(window).width() > 1003) {
        var nav = jQuery(window).width();
    } else {
        var nav = 1003;
    }
    var nav_single = nav / 7;
    $('.nav').width(nav);
    $('.nav li').width(nav_single);
}