鼠标移动会动的CSS菜单_菜单导航特效

鼠标放上移动后，菜单项会动起来，效果很不错，不过过多的使用了图片，修改起来有些麻烦，也影响网页加载，重要的是学习一种实现的思路，为你写出性能更好的菜单打下基矗

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>会动的菜单</title>
<style type="text/css"> 
<!--
 
body {
	margin: 26px;
	padding: 0;
	background: #fff url(http://p1.mb5u.com/texiao/1/back.png) no-repeat;
}
 
span {
	display: none;
}
 
ul {
	position: relative;
	width: 800px;
	background: url(http://p1.mb5u.com/texiao/1/bg_nav.png) no-repeat;
	height: 113px;
	list-style-type: none;
	margin: 0;
	padding: 0;
}
 
li#bu1 a, li#bu2 a, li#bu3 a, li#bu4 a {
	background: transparent;
	position: absolute;
	width: 110px;
	height: 32px;
	bottom: 0;
	text-decoration: none;
}

* html*li#bu1 a, * html*li#bu2 a, * html*li#bu3 a, * html*li#bu4 a { bottom: -1px; }
 
li#bu1 a { left: 21px; }
li#bu2 a { left: 122px; background: url(http://p1.mb5u.com/texiao/1/business_hover.gif) 0 0 no-repeat; }
li#bu3 a { left: 223px; background: url(http://p1.mb5u.com/texiao/1/personal_hover.gif) 0 0 no-repeat; }
li#bu4 a { left: 324px; background: url(http://p1.mb5u.com/texiao/1/information_hover.gif) 0 0 no-repeat; }
li#bu2 a:hover, li#bu3 a:hover, li#bu4 a:hover { background-position: 0 -32px; }
-->
</style>
</head>
<body>
<ul>
<li id="bu1"><a href="#"><span>homepage</span></a></li>
<li id="bu2"><a href="#"><span>business</span></a></li>
<li id="bu3"><a href="#"><span>personal</span></a></li>
<li id="bu4"><a href="#"><span>information</span></a></li>
</ul>
</body>
</html>

所属频道：菜单导航特效/更新时间：2011-02-24

[收藏][报错][返回列表]

鼠标移动会动的CSS菜单_菜单导航特效

菜单导航特效Rss订阅特效代码搜索

菜单导航特效推荐

猜你也喜欢看这些