分离式滑动门导航菜单
代码
<br/><br/><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br/><html xmlns="http://www.w3.org/1999/xhtml"><br/><head><br/><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br/><title>冰极峰作品：手工打造极酷的分离式滑动门导航菜单</title><br/><style type="text/css"><br/>/*——————————————————————————————————————————<br/> 作者：冰极峰<br/> blog地址:http://www.cnblogs.com/binyong/<br/> 时间：2009-3-15<br/>——————————————————————————————————————————*/<br/>*{margin:0;padding:0;}/*将它统一成一个模样吧，不然在各个浏览器下，你会死得很难看*/<br/>body{background:#999;}<br/>a{outline:none;}<br/>#wrapper{margin:100px auto 20px;text-align:center;width:640px;}<br/>ul{list-style:none;}/*去掉小圆点吧*/<br/>li{float:left;height:53px;background:url(/articleimg/2009/03/6511/bg.gif) repeat-x left bottom;overflow:hidden;}/*水平排列并来点间距吧，不要把我挤得太紧了。*/<br/>.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(/articleimg/2009/03/6511/button.gif) no-repeat right -36px; text-decoration:none;font-size:12px;color:#fff;}<br/>.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(/articleimg/2009/03/6511/button.gif) no-repeat left top;font-weight:bold;}<br/>.normal,.normal span,.over,.over span,.cur,.cur span{display:inline;cursor:pointer;}<br/>.over{background:url(/articleimg/2009/03/6511/button.gif) no-repeat right -108px;}<br/>.over span{background:url(/articleimg/2009/03/6511/button.gif) no-repeat left -72px;}<br/>.cur{background:url(/articleimg/2009/03/6511/button.gif) no-repeat right -180px;}<br/>.cur span{background:url(/articleimg/2009/03/6511/button.gif) no-repeat left -144px;}<br/>.blog{clear:both;margin:0px auto;text-align:center;width:640px;color:#fff;}<br/></style><br/></head><br/><body><br/><div id="wrapper"><br/> <div id="nav"><br/> <ul id="menu"><br/> <li><a href="#none" title="首页" ><span>首 页</span></a></li><br/> <li><a href="#none" title="新随笔"><span>新随笔</span></a></li><br/> <li><a href="#none" title="联系"><span>联 系</span></a></li><br/> <li><a href="#none" title="管理"><span>管 理</span></a></li><br/> <li><a href="#none" title="订阅"><span>订 阅</span></a></li><br/> <li><a href="#none" title="冰极峰"><span>冰极峰博客</span></a></li><br/> </ul><br/> </div><br/></div><br/><div class="blog">欢迎光临我的博客:<a href="http://www.cnblogs.com/binyong/" target="_blank">http://www.cnblogs.com/binyong/</a></div><br/></body><br/></html><br/><script type="text/javascript"><br/>/*三态高亮菜单*/<br/>// 作者:冰极峰<br/>// 时间:2009-3-15<br/>// 作用:此脚本用于设置三态导航菜单的高亮显示.<br/>function getObj(objName){return(document.getElementById(objName));}<br/>//全局变量,菜单数量和当前选中菜单的序号<br/>var temp;/*菜单ID*/<br/>window.onload =function() {<br/> var obj=getObj("menu");/*ul的id*/<br/> var obj_a=obj.getElementsByTagName("a");<br/> number=obj_a.length;<br/> for (var i=0,j=obj_a.length;i<j;i++){<br/> obj_a[i].index=i;<br/> obj_a[i].className="normal";<br/> obj_a[i].onclick=function(){click(this)};<br/> obj_a[i].onmouseover=function(){overme(this)};<br/> obj_a[i].onmouseout=function(){outme(this)};<br/> obj_a[i].onfocus=function(){this.blur()};/*去掉IE下的虚线框*/<br/> }<br/> if (getCookie("show_a") != null) {<br/> obj_a[getCookie("show_a")].className="cur";<br/> temp=getCookie("show_a")<br/> }<br/> else{<br/> var obj=getObj("menu");<br/> var obj_a=obj.getElementsByTagName("a"); <br/> obj_a[0].className="cur"; <br/> } <br/>}<br/>//鼠标滑过效果<br/>function overme(o){<br/> if (temp!=o.index) <br/> o.className="over";/*翻滚色样式*/ <br/>}<br/>//鼠标移开后效果<br/>function outme(o){<br/> if (temp!=o.index) <br/> o.className="normal";/*翻滚色样式*/ <br/>}<br/>//鼠标点击效果<br/>function click(o){<br/> <br/> var obj=getObj("menu");<br/> var obj_a=obj.getElementsByTagName("a");<br/> for (var i=0,j=obj_a.length;i<j;i++){<br/> obj_a[i].className="normal";<br/> }<br/> o.className="cur";<br/> o.blur();<br/> setCookie("show_a",o.index,1);/*设置1分钟后失效*/<br/> temp=o.index <br/>}<br/>// --- 设置cookie<br/>function setCookie(sName,sValue,expireMinute) {<br/> var cookieString = sName + "=" + escape(sValue);<br/> if (expireMinute>0) {//设置过期时间<br/> var date = new Date();<br/> //date.setTime(date.getTime + expireHours * 3600 * 1000);//时间单位=毫秒,以小时为参数<br/> date.setTime(date.getTime + expireMinute * 60 * 1000);//时间单位=毫秒,以分钟为参数<br/> <br/> cookieString = cookieString + "; expire=" + date.toGMTString();<br/> }<br/> document.cookie = cookieString;//写cookie<br/>}<br/>//--- 获取cookie<br/>function getCookie(sName) {<br/> var aCookie = document.cookie.split("; ");<br/> for (var j=0; j < aCookie.length; j++){<br/> var aCrumb = aCookie[j].split("=");<br/> if (escape(sName) == aCrumb[0])<br/> return unescape(aCrumb[1]);<br/> }<br/> return null;<br/>}<br/></script> <br/><br/>
0 条留言
我要留言