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

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

分类：导航菜单 > 下拉导航难易：初级

查看演示下载资源下载积分： 20 积分

HTML

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

<div class="nav">
    <ul class="clearfix">
        <li>
            <a href="http://www.sucaihuo.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);
}