我们将会建立一个很酷的动画导航列表完成滑动悬停效果。
我们将构建的设计工作没有jQuery首先确保它的广泛访问用户不启用Javascript,然后用jQuery增强效应对于大多数用户。
基本的HTML结构
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Animated Label Navigation Menu</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>
<script src="js/animate-bg.js" type="text/javascript"></script>
<script src="js/scripts.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</body>
</html>
使用CSS风格的设计
body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {
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;
}
接下来,CSS给生活带来的设计。开始快速复位的CSS文件删除任何默认浏览器样式,然后周围设置页面设计通过添加重复噪声背景纹理到页面的身体。中心的< ul > margin: auto;和 text-align: center;和明确的元素使用 overflow: hidden;.
左浮动每个<李>项并排放置每个导航项。其余的样式可以直接到锚。每个锚需要的确切尺寸标签图形,考虑任何填充用于位置的文本。复制的字体样式Photoshop使用相同的大胆Helvetica样式,并使用CSS3 text-shadow属性重新创建Photoshop阴影。最后,添加标签图像作为背景图像和位置设置为-149 px是隐藏屏幕直到鼠标导航项。
设置的样式 :hover通过移动背景影响回位置和改变字体的颜色和阴影,以确保他们仍然可以看到当背景颜色的变化。
HTML文件的预览会显示一个完全工作菜单设计到目前为止,尽管基本的CSS样式标签立即出现和消失,没有任何酷滑动效果。首先开发这个基本回落很重要所以禁用Javascript的用户仍将看到一个悬停效果。
jQuery的效果
为了添加一些Javascript效果,我们首先需要返回的HTML文件和链接了一些JS文件。我们需要三个文件:jQuery库,一个方便的插件允许动画背景地位,最后自己的空白脚本。js文件,我们将编写自己的代码。
$(document).ready(function() {
$("ul#nav li a").addClass("js");
$("ul#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代码是一个简单的线关掉基本的CSS效果。添加一个特殊的。js与Javascript类锚允许我们添加一个额外的CSS来覆盖原来的样式。这种过时的方式我们可以实际滑动悬停效果。添加一个悬停功能菜单列表内的锚。在徘徊,使用 .animate()设置 backgroundPosition0 0,然后后退hover-out屏幕。200保持事情的速度迅速。一个额外的添加是一个片段 .stop(true,true)防止影响循环如果鼠标经过快速菜单。
在浏览器中预览的效果将显示标签滑动在盘旋。我们可以添加一个额外的行真正改善的效果。增加一个额外的动画将标签仅5 px创建一个很酷的小反弹效果。类似的效果也可以通过使用宽松的插件,但是保存连接额外的文件这个小技巧很好地工作。
