极酷的三层分离的标准滑动门导航菜单

2009-04-02 19:34:43 佚名

本文一步一步手把手教你打造一个极酷的三层分离的标准滑动门导航菜单，从思路、原理、步骤，手段可谓“无所不用其极”，即便你是菜鸟，相信你看了本文后，也能打造出属于自己的超级漂亮的标准导航菜单。
现在在各种主流浏览器中看看你的成果，是否显示得完全一样呢！

图五
至此，一个极酷的标准的滑动门导航菜单就在你手中诞生了！
总结：我们在制作这些案例时，要随时留意自己的结构，让它能保持良好的前后伸展性。尽量杜决冗余的无语义的标签，这在一个流水线似的工作环境中尤其显得重要。给后端程序带来巨大的方便的同时，也使自己的代码看来比较舒服！
至此，一个极酷的标准的滑动门导航菜单就在你手中诞生了！
总结：我们在制作这些案例时，要随时留意自己的结构，让它能保持良好的前后伸展性。尽量杜决冗余的无语义的标签，这在一个流水线似的工作环境中尤其显得重要。给后端程序带来巨大的方便的同时，也使自己的代码看来比较舒服！
本实例测试的兼容性环境是：
IE6/IE7/FF3/TT/OPERA9.63/谷歌浏览器测试通过，其它的浏览器请朋友帮忙测试一下。
运行代码框

<!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>冰极峰作品：手工打造极酷的分离式滑动门导航菜单</title>

<style type="text/css">

/*——————————————————————————————————————————

作者：冰极峰

blog地址:http://www.cnblogs.com/binyong/

时间：2009-3-15

——————————————————————————————————————————*/

*{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(/articleimg/2009/03/6511/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(/articleimg/2009/03/6511/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(/articleimg/2009/03/6511/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(/articleimg/2009/03/6511/button.gif) no-repeat right -108px;}

.over span{background:url(/articleimg/2009/03/6511/button.gif) no-repeat left -72px;}

.cur{background:url(/articleimg/2009/03/6511/button.gif) no-repeat right -180px;}

.cur span{background:url(/articleimg/2009/03/6511/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="首页" ><span>首　页</span></a></li>

<li><a href="#none" title="新随笔"><span>新随笔</span></a></li>

<li><a href="#none" title="联系"><span>联　系</span></a></li>

<li><a href="#none" title="管理"><span>管　理</span></a></li>

<li><a href="#none" title="订阅"><span>订　阅</span></a></li>

<li><a href="#none" title="冰极峰"><span>冰极峰博客</span></a></li>

</ul>

</div>

</div>

<div class="blog">欢迎光临我的博客:<a href="http://www.cnblogs.com/binyong/" target="_blank">http://www.cnblogs.com/binyong/</a></div>

</body>

</html>

<script type="text/javascript">

/*三态高亮菜单*/

// 作者:冰极峰

// 时间:2009-3-15

// 作用:此脚本用于设置三态导航菜单的高亮显示.

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()};/*去掉IE下的虚线框*/

}

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

}

//--- 获取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>

[Ctrl A 全部选择提示：你可先修改部分代码，再按运行]
如果看不到效果，请下载下面的压缩包：menu.rar