仿Vista樣式三態高亮CSS菜單_菜單導航特效

分離式CSS滑動門導航菜單，來自冰極峰博客。三態高亮導航菜單，CSS和JavaScript技術的完美結合，并可記憶菜單位置，運用于JS的Cookies機制，相信有很多人會喜歡的。

<!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" mrc="text/html; charset=utf-8" />
<title>分離式CSS滑動門導航菜單</title>
<style type="text/css">
*{margin:0;padding:0;}
body{background:#999;}
a{outline:none;}
#wrapper{margin:100px auto 20px;text-align:center;width:640px;}
ul{list-style:none;}/*去掉列表修飾*/
li{float:left;height:53px;background:url(http://p1.mb5u.com/texiao/vista_bg.gif) repeat-x left bottom;overflow:hidden;}/*水平間距*/
.normal,.over,.cur{display:inline-block;padding-right:30px;padding-top:10px;*padding-top:0;padding-bottom:13px;*padding-bottom:0;height:36px;background:url(http://p1.mb5u.com/texiao/vista_button.gif) no-repeat right -36px; text-decoration:none;font-size:12px;color:#fff;}
.normal span,.over span,.cur span{display:inline-block;padding-left:30px;padding-top:10px;*padding-top:0;padding-bottom:13px;*padding-bottom:0;height:36px;line-height:36px;background:url(http://p1.mb5u.com/texiao/vista_button.gif) no-repeat left top;font-weight:bold;}
.normal,.normal span,.over,.over span,.cur,.cur span{display:inline;cursor:pointer;}
.over{background:url(http://p1.mb5u.com/texiao/vista_button.gif) no-repeat right -108px;}
.over span{background:url(http://p1.mb5u.com/texiao/vista_button.gif) no-repeat left -72px;}
.cur{background:url(http://p1.mb5u.com/texiao/vista_button.gif) no-repeat right -180px;}
.cur span{background:url(http://p1.mb5u.com/texiao/vista_button.gif) no-repeat left -144px;}
.blog{clear:both;margin:0px auto;text-align:center;width:640px;color:#fff;}
</style>
</head>
<body>
<div id="wrapper">
	<div id="nav">
		<ul id="menu">
		<li><a href="/" title="網站首頁" onfocus="this.blur();"><span>開始</span></a></li>
		<li><a href="#" title="新隨筆"><span>新隨筆</span></a></li>
		<li><a href="#" title="聯系"><span>聯　系</span></a></li>
		<li><a href="/jscss/" title="CSS特效"><span>CSS特效</span></a></li>
		<li><a href="/" title="訂閱"><span>訂　閱</span></a></li>
		<li><a href="#" title="冰極峰" onfocus="this.blur();"><span>冰極峰</span></a></li>
		</ul>
	</div>
</div>

所屬頻道：菜單導航特效/更新時間：2011-02-24

[收藏][報錯][返回列表]

相關菜單導航特效：

仿Vista樣式三態高亮CSS菜單_菜單導航特效

菜單導航特效Rss訂閱特效代碼搜索

菜單導航特效推薦

猜你也喜歡看這些