jQuery导航菜单上下翻动效果

收藏

一款非常好看的悬浮菜单效果，js代码很少。

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

查看演示

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

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

HTML

首先我们在#menu2放置一个菜单列表

• 首 页
• 预报预警
• 气象新闻
• 气象服务
• 行政审批
• 信息公开
• 气象科普
• 党风廉政
• 气象科普

引入菜单样式和jQuery库

<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery.js"></script>

jQuery

$(function() {
    $("#menu2 li a").wrapInner('<span class="out"></span>'); //所有a标签子级都加上span.out
    $("#menu2 li a").each(function() { //所有a标签都加上.over，并附带a标签的文字
        $('<span class="over">' + $(this).text() + '</span>').appendTo(this);
    });

    $("#menu2 li a").hover(function() { //当悬浮a标签时
        $(".out", this).stop().animate({
            'top': '48px'
        },
        300); // move down - hide
        $(".over", this).stop().animate({
            'top': '0px'
        },
        300); // move down - show
    },
    function() { //当离开a标签时
        $(".out", this).stop().animate({
            'top': '0px'
        },
        300); // move up - show
        $(".over", this).stop().animate({
            'top': '-48px'
        },
        300); // move up - hide
    });
});