仿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   class="rhxvb9j"   id="wrapper">	<div   class="btjhzjx"   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實現