您的位置：首页 > Web前端 > CSS

仿Vista风格简约三态高亮CSS菜单代码

2011-02-28 08:31 405 查看

代码简介：分离式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>
<title>仿Vista风格简约三态高亮CSS菜单代码_网页代码站(www.webdm.cn)</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://www.webdm.cn/images/20090917/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://www.webdm.cn/images/20090917/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://www.webdm.cn/images/20090917/vista_button.gif) no-repeat left top;font-weight:bold;}
.normal,.normal span,.over,.over span,.cur,.cur span{display:inline;cursor:pointer;}
/* www.webdm.cn */
.over{background:url(http://www.webdm.cn/images/20090917/vista_button.gif) no-repeat right -108px;}
.over span{background:url(http://www.webdm.cn/images/20090917/vista_button.gif) no-repeat left -72px;}
.cur{background:url(http://www.webdm.cn/images/20090917/vista_button.gif) no-repeat right -180px;}
.cur span{background:url(http://www.webdm.cn/images/20090917/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="#none" title="网页代码站" onfocus="this.blur();"><span>网页代码站</span></a></li>
<li><a href="http://www.webdm.cn" title="新随笔"><span>新随笔</span></a></li>
<li><a href="#none" title="联系"><span>联　系</span></a></li>
<li><a href="http://www.webdm.cn" title="CSS特效"><span>CSS特效</span></a></li>
<li><a href="/" title="订阅"><span>订　阅</span></a></li>
<li><a href="#none" title="冰极峰" onfocus="this.blur();"><span>冰极峰</span></a></li>
</ul>
</div>
</div>

<script type="text/javascript">
// 此脚本设置高亮显示
function getObj(objName){return(document.getElementById(objName));}
///
//全局变量,菜单数量和当前选中菜单的序号
var temp;/*菜单ID*/
window.onload =function() {
var obj=getObj("menu");/*ul的id*/
var obj_a=obj.getElementsByTagName("a");
number=obj_a.length;
for (var i=0,j=obj_a.length;i<j;i++){
obj_a[i].index=i;
obj_a[i].className="normal";
obj_a[i].onclick=function(){click(this)};
obj_a[i].onmouseover=function(){overme(this)};
obj_a[i].onmouseout=function(){outme(this)};
obj_a[i].onfocus=function(){this.blur()};
}
if (getCookie("show_a") != null) {
obj_a[getCookie("show_a")].className="cur";
temp=getCookie("show_a")
}
else{
var obj=getObj("menu");
var obj_a=obj.getElementsByTagName("a");
obj_a[0].className="cur";
}
}
//鼠标滑过效果
function overme(o){
if (temp!=o.index)
o.className="over";/*翻滚色样式*/
}
//鼠标移开后效果
function outme(o){
if (temp!=o.index)
o.className="normal";
}
//鼠标点击效果
function click(o){

var obj=getObj("menu");
var obj_a=obj.getElementsByTagName("a");
for (var i=0,j=obj_a.length;i<j;i++){
obj_a[i].className="normal";
}
o.className="cur";
o.blur();
setCookie("show_a",o.index,1);/*设置1分钟后失效*/
temp=o.index
}
// --- 设置cookie
function setCookie(sName,sValue,expireMinute) {
var cookieString = sName + "=" + escape(sValue);
if (expireMinute>0) {//设置过期时间
var date = new Date();
//date.setTime(date.getTime + expireHours * 3600 * 1000);
date.setTime(date.getTime + expireMinute * 60 * 1000);

cookieString = cookieString + "; expire=" + date.toGMTString();
}
document.cookie = cookieString;
}
//--- 获取cookie
function getCookie(sName) {
var aCookie = document.cookie.split("; ");
for (var j=0; j < aCookie.length; j++){
var aCrumb = aCookie[j].split("=");
if (escape(sName) == aCrumb[0])
return unescape(aCrumb[1]);
}
return null;
}
</script>
</body>
</html>
<br>
<a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！

代码来自：http://www.webdm.cn/webcode/b960ac86-0fc1-48b2-a495-432f0c955c54.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航