網(wǎng)頁特效代碼模板無憂>網(wǎng)頁特效>菜單導(dǎo)航特效代碼>

鼠標(biāo)移動(dòng)會(huì)動(dòng)的CSS菜單_菜單導(dǎo)航特效

鼠標(biāo)放上移動(dòng)后，菜單項(xiàng)會(huì)動(dòng)起來，效果很不錯(cuò)，不過過多的使用了圖片，修改起來有些麻煩，也影響網(wǎng)頁加載，重要的是學(xué)習(xí)一種實(shí)現(xiàn)的思路，為你寫出性能更好的菜單打下基矗

<!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>會(huì)動(dòng)的菜單</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>

所屬頻道：菜單導(dǎo)航特效/更新時(shí)間：2011-02-24

[收藏][報(bào)錯(cuò)][返回列表]

相關(guān)菜單導(dǎo)航特效：

欧美三区四区_av先锋影音资源站_亚洲第一论坛sis_影音先锋2020色资源网_亚洲精品社区_在线免费观看av网站_国产一区二区伦理_亚洲欧美视频一区二区_99视频精品全部免费在线_精精国产xxxx视频在线

鼠標(biāo)移動(dòng)會(huì)動(dòng)的CSS菜單_菜單導(dǎo)航特效

菜單導(dǎo)航特效Rss訂閱特效代碼搜索

菜單導(dǎo)航特效推薦

猜你也喜歡看這些