仿Vista样式三态高亮CSS菜单

2024-09-05 12:19:48

字体：大中小

来源：转载

供稿：网友

分离式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" content="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(/jscss/demoimg/200905/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(/jscss/demoimg/200905/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(/jscss/demoimg/200905/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(/jscss/demoimg/200905/vista_button.gif) no-repeat right -108px;}.over span{background:url(/jscss/demoimg/200905/vista_button.gif) no-repeat left -72px;}.cur{background:url(/jscss/demoimg/200905/vista_button.gif) no-repeat right -180px;}.cur span{background:url(/jscss/demoimg/200905/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><span>开始</span></li>		<li><span>新随笔</span></li>		<li><span>联　系</span></li>		<li><span>CSS特效</span></li>		<li><span>订　阅</span></li>		<li><span>冰极峰</span></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 }// --- 设置cookiefunction setCookie(sName,sValue,expireMinute) {	var cookieString = sName + "=" + escape(sValue);	if (expireMinute>0) {//设置过期时间		 var date = new Date();		 date.setTime(date.getTime + expireMinute * 60 * 1000);		 cookieString = cookieString + "; expire=" + date.toGMTString();	}	document.cookie = cookieString;}//--- 获取cookiefunction 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>

上一篇：又一款黑色漂亮的DIV+CSS导航条

下一篇：个性的不规则菜单，CSS实现