仿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订阅特效代码搜索

菜单导航特效推荐

猜你也喜欢看这些