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

互联网 发布时间：2009-04-02 19:34:43 作者：佚名

网页制作Webjx文章简介：本文一步一步手把手教你打造一个极酷的三层分离的标准滑动门导航菜单，从思路、原理、步骤，手段可谓“无所不用其极”，即便你是菜鸟，相信你看了本文后，也能打造出属于自己的超级漂亮的标准导航菜单。

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

图五
至此，一个极酷的标准的滑动门导航菜单就在你手中诞生了！
总结：我们在制作这些案例时，要随时留意自己的结构，让它能保持良好的前后伸展性。尽量杜决冗余的无语义的标签，这在一个流水线似的工作环境中尤其显得重要。给后端程序带来巨大的方便的同时，也使自己的代码看来比较舒服！
至此，一个极酷的标准的滑动门导航菜单就在你手中诞生了！
总结：我们在制作这些案例时，要随时留意自己的结构，让它能保持良好的前后伸展性。尽量杜决冗余的无语义的标签，这在一个流水线似的工作环境中尤其显得重要。给后端程序带来巨大的方便的同时，也使自己的代码看来比较舒服！
本实例测试的兼容性环境是：
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

AudioContext 实现音频可视化(web技术分享)
这篇文章主要分享的是web技术的 AudioContext 实现音频可视化，要实现音频可视化得先实现一些炫酷的效果需要借助 Web Audio API提供的一些方法 AudioContext，下面详细内容
2022-02-23
WebRTC记录音视频流(web技术分享)
这篇文章主要给大家介绍了web技术中的WebRTC记录音视频流，文章内容围绕主题展相关资料，需要的小伙伴可以参考一下，希望对你有所帮助
2022-02-23
html5+CSS3的编码规范
这是我通过网上查阅资料总结的一些编码规范，用于巩固对html，css页面重构时的基础,需要的朋友可以参考下
2020-12-19
前端编码规范（4）—— CSS 和 Sass (SCSS) 开发规范
这篇文章主要介绍了前端编码规范（4）—— CSS 和 Sass (SCSS) 开发规范,需要的朋友可以参考下
2017-01-21
Web前端开发规范2017(HTML/JavaScript/CSS)
这是一份旨在增强团队的开发协作，提高代码质量和打造开发基石的编码风格规范，其中包含了 HTML, JavaScript 和 CSS/SCSS 这几个部分。我们知道，当一个团队开始指定并实行
2017-01-21
web前端开发规范文档(2014年版本)
这篇文章主要为大家介绍了前端开发团队遵循和约定的代码书写规范，意在提高代码的规范性和可维护性,需要的朋友可以参考下
2017-01-21
响应式Web之流式网格系统
这篇文章主要为大家详细介绍了响应式Web之流式网格系统的相关资料，感兴趣的小伙伴们可以参考一下
2016-07-04
在网页标题栏上和收藏夹显示网站logo的实现方法
下面小编就为大家分享一篇在网页标题栏上和收藏夹显示网站logo的实现方法。希望对大家有所帮助。一起跟随小编过来看看吧，祝大家游戏愉快哦
2016-03-16
Visual Foxpro 6.0 中文版安装向导(图解)
基于很多用户都在下载Visual Foxpro 6.0，但是有安装vtp6.0经验的朋友确很少，在安装过程中总会出现这样那样的问题，基于这些问题，下面小编抽个时间把Visual Foxpro 6.0
2015-09-09
网站日志200 0 64状态码的分析(协议子状态)
网站日志200 0 64状态码的分析介绍
2012-10-29

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

相关文章

最新评论

文章分类

大家感兴趣的内容

最近更新的内容