手工打造分离式滑动门导航菜单 - 网页制作

　手工打造分离式滑动门导航菜单

作者：by0001　时间： 2009-03-16　文档类型：原创　来自：蓝色理想

第 1 页手工打造分离式滑动门导航菜单 [1]
第 2 页手工打造分离式滑动门导航菜单 [2]
第 3 页手工打造分离式滑动门导航菜单 [2]
第 4 页手工打造分离式滑动门导航菜单 [4]
第 5 页手工打造分离式滑动门导航菜单 [5]

现在在各种主流浏览器中看看你的成果，是否显示得完全一样呢！

图五

至此，一个极酷的标准的滑动门导航菜单就在你手中诞生了！

总结：我们在制作这些案例时，要随时留意自己的结构，让它能保持良好的前后伸展性。尽量杜决冗余的无语义的标签，这在一个流水线似的工作环境中尤其显得重要。给后端程序带来巨大的方便的同时，也使自己的代码看来比较舒服！

至此，一个极酷的标准的滑动门导航菜单就在你手中诞生了！

本实例测试的兼容性环境是：
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

经典论坛交流：
http://bbs.blueidea.com/thread-2916305-1-1.html

本文链接：http://www.blueidea.com/tech/web/2009/6511.asp　

出处：蓝色理想
责任编辑：bluehearts

上一页手工打造分离式滑动门导航菜单 [4] 下一页

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。

相关文章

跨浏览器的inline-block

作者文章

用div+css模拟表格对角线


关键字搜索	常规搜索	推荐文档
热门搜索：CSS Fireworks 设计比赛网页制作 web标准用户体验 UE photoshop Dreamweaver Studio8 Flash 手绘 CG

站点最新

站点最新列表

周大福“敬•自然”设计大赛开启

国际体验设计大会7月将在京举行

中国国防科技信息中心标志征集

云计算如何让安全问题可控

云计算是多数企业唯一拥抱互联网的机会

阿里行云

云手机年终巨献，送礼标配299起

阿里巴巴CTO王坚的"云和互联网观"

1499元买真八核云OS双蛋大促

首届COCO桌面手机主题设计大赛

栏目最新

栏目最新列表

浅谈JavaScript编程语言的编码规范

如何在illustrator中绘制台历

Ps简单绘制一个可爱的铅笔图标

数据同步算法研究

用ps作简单的作品展示页面

CSS定位机制之一:普通流

25个最佳最闪亮的Eclipse开发项目

Illustrator中制作针线缝制文字效果

Photoshop制作印刷凹凸字体

VS2010中创建自定义SQL Rule