码码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
body {
font-family: "宋体";
font-size: 14px;
margin:0px;
}
ul {list-style:none;}
#links ul li {
margin-bottom: 6px;
}
-->
</style>
<script type="text/javascript" src="jslib/jquery-1.6.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('a.link').hover(function() {
$(this).animate({ paddingLeft: '20px' },400);
}, function() {
$(this).animate({ paddingLeft: 0 }, 400);
});
});
</script>
</head>
<body>
<ul><li><a href="#" class="link">首页</a></li>
<p></p>
<li><a href="#" class="link">菜单一</a></li>
<p></p>
<li><a href="#" class="link">菜单二</a></li>
<p></p>
<li><a href="#" class="link">菜单三</a></li>
<p></p>
<li><a href="#" class="link">菜单四</a></li>
<p></p>
<li><a href="#" class="link">菜单五</a></li>
<p></p>
<li><a href="#" class="link">菜单六</a></li>
</ul>
</body>
</html>
图图:
代码说明:
设置html体的字体为宋体,字体尺寸14px,四个外边距都为0;
ul列表风格-无;
每个列表项底部外边距为6;
a链接鼠标悬停函数:
动画:左缩进20px,持续400ms;
动画,复原,持续400ms;
html体:
ul中包含li项目
li中包含a链接