一个很酷的jQuery动画菜单

分类：素材 日期：2013-11-27 点击(192) 评论(0)

演 示 下 载

使用方法

引入文件

<script src="js/jquery.min.js"></script>
<script src="js/animate-bg.js"></script>

除了 jQuery 文件外，还需要引入 animate-bg.js 文件，这是一个让背景有动画效果的插件。

HTML

<div id="container">
    <ul id="nav">
        <li><a href="#">首 页</a></li>
        <li><a href="#">关 于</a></li>
        <li><a href="#">链 接</a></li>
        <li><a href="#">联 系</a></li>
    </ul>
</div>

CSS

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form {
    margin: 0;
    padding: 0;
    border: 0;
}
body {
    background: #f5f0e0 url(images/noise.png);
}
#container {
    height: 800px;
    background: url(images/bg.jpg) center top no-repeat;
}
ul#nav {
    width: 700px;
    margin: 0 auto;
    text-align: center;
    overflow: hidden;
}
ul#nav li {
    float: left;
    list-style: none;
}
ul#nav li a {
    display: block;
    width: 97px;
    height: 77px;
    padding: 72px 0 0 0;
    margin: 0 32px 0 32px;
    font: bold 16px Helvetica, Arial, Sans-Serif;
    text-transform: uppercase;
    color: #9c5959;
    text-shadow: 0 1px 3px #c4bda6;
    text-decoration: none;
    background: url(images/label.png) 0 -149px no-repeat;
}
ul#nav li a:hover {
    background: url(images/label.png) 0 0 no-repeat;
    color: #eee9d9;
    text-shadow: 0 2px 3px #4c2222;
}
ul#nav li a.js:hover {
    background: url(images/label.png) 0 -149px no-repeat;
}

JavaScript

$(function() {
    $("#nav li a").addClass("js");

    $("#nav li a").hover(function () {
        $(this).stop(true,true).animate({backgroundPosition:"(0 0)"}, 200);
        $(this).animate({backgroundPosition:"(0 -5px)"}, 150);
    }, function () {
        $(this).animate({backgroundPosition:"(0 -149px)"}, 200);
    });
});

演 示 下 载

标签：jQuery