最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

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

来源:http://www.erdangjiade.com/ 沐浴春风 2015-08-20 06:14浏览(1490)

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

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

jQuery手机wap响应式图标菜单导航
分类:导航菜单 > 下拉导航 难易:初级
查看演示 下载资源 下载积分: 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); 
}
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/423.html
评论3
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

  • 头像 板凳
    12-30 12:11
    ngu137
    不错啊。。。来看看看。。
  • 头像 椅子
    12-18 08:29
    ngu137
    学习学习啦。。。。!!!ee
  • 头像 沙发
    11-09 14:55
    qq562140910
    攒攒攒攒见附件
1 2