功能强大，代码简单的管理菜单

作者：lalasxc 来源：经典论坛时间：2008-07-11 16:52:00　

五一在家写的，和大家分享，支持所有浏览器,添加了左侧菜单点击变色效果

<!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=gb2312" /><title>管理中心 - asp之家</title><style type="text/css">body{font-size:12px;}ul,li,h2{margin:0;padding:0;}ul{list-style:none;}#top{width:900px;height:40px;margin:0 auto;background-color:#CCCC00}#top h2{width:150px;height:40px;background-color:#99CC00;float:left;font-size:14px;text-align:center;line-height:40px;}#topTags{width:750px;height:40px;margin:0 auto;background-color:#CCCC00;float:left}#topTags ul li{float:left;width:100px;height:25px;margin-right:5px;display:block;text-align:center;cursor:pointer;padding-top:15px;}#main{width:900px;height:500px;margin:0 auto;background-color:#F5F7E6;}#leftMenu{width:150px;height:500px;background-color:#009900;float:left}#leftMenu ul{margin:10px;}#leftMenu ul li{width:130px;height:30px;display:block;background:#99CC00;cursor:pointer;line-height:30px;text-align:center;margin-bottom:5px;}#leftMenu ul li a{color:#000000;text-decoration:none;}#content{width:750px;height:500px;float:left}.content{width:740px;height:490px;display:none;padding:5px;overflow-y:auto;line-height:30px;}#footer{width:900px;height:30px;margin:0 auto;background-color:#ccc;line-height:30px;text-align:center;}.content1 {width:740px;height:490px;display:block;padding:5px;overflow-y:auto;line-height:30px;}</style><script type="text/javascript">window.onload=function(){function $(id){return document.getElementById(id)}var menu=$("topTags").getElementsByTagName("ul")[0];//顶部菜单容器var tags=menu.getElementsByTagName("li");//顶部菜单var ck=$("leftMenu").getElementsByTagName("ul")[0].getElementsByTagName("li");//左侧菜单var j;//点击左侧菜单增加新标签for(i=0;i<ck.length;i++){ck[i].onclick=function(){$("welcome").style.display="none"//欢迎内容隐藏clearMenu();this.style.background="yellow";//循环取得当前索引for(j=0;j<8;j++){if(this==ck[j]){if($("p"+j)==null){openNew(j,this.innerHTML);//设置标签显示文字 }clearStyle();$("p"+j).style.backgroundColor="yellow";clearContent();$("c"+j).style.display="block"; } }return false; } }//增加或删除标签function openNew(id,name){var tagMenu=document.createElement("li");tagMenu.id="p"+id;tagMenu.innerHTML=name+"   "+"<img src='/file/UploadPic/20087/11/200871116563211.gif' style='vertical-align:middle'/>";//标签点击事件tagMenu.onclick=function(evt){clearMenu();ck[id].style.background="yellow";clearStyle();tagMenu.style.backgroundColor="yellow";clearContent();$("c"+id).style.display="block";}//标签内关闭图片点击事件tagMenu.getElementsByTagName("img")[0].onclick=function(evt){evt=(evt)?evt:((window.event)?window.event:null);if(evt.stopPropagation){evt.stopPropagation()} //取消opera和Safari冒泡行为;this.parentNode.parentNode.removeChild(tagMenu);//删除当前标签var color=tagMenu.style.backgroundColor;//设置如果关闭一个标签时，让最后一个标签得到焦点if(color=="#ffff00"||color=="yellow"){//区别浏览器对颜色解释if(tags.length-1>=0){clearStyle();tags[tags.length-1].style.backgroundColor="yellow";clearContent();var cc=tags[tags.length-1].id.split("p");$("c"+cc[1]).style.display="block";clearMenu();ck[cc[1]].style.background="yellow"; }else{clearContent();clearMenu();$("welcome").style.display="block" } }}menu.appendChild(tagMenu);}//清除菜单样式function clearMenu(){for(i=0;i<ck.length;i++){ck[i].style.background="#99CC00"; }}//清除标签样式function clearStyle(){for(i=0;i<tags.length;i++){menu.getElementsByTagName("li")[i].style.backgroundColor="#FFCC00"; }}//清除内容function clearContent(){for(i=0;i<7;i++){$("c"+i).style.display="none"; }}}</script></head><body><div id="top"><h2>管理菜单</h2><div id="topTags"><ul></ul></div></div><div id="main"> <div id="leftMenu"><ul><li>个人资料</li><li>相册管理</li><li>日志管理</li><li>留言管理</li><li>风格管理</li><li>系统管理</li><li>帮助信息</li></ul></div><div id="content"><div id="welcome" class="content" style="display:block;"> <div align="center"> <p> </p> <p><strong>欢迎使用用户管理系统！</strong></p> <p> </p> </div></div><div id="c0" class="content">个人资料</div><div id="c1" class="content">相册管理</div><div id="c2" class="content">日志管理</div><div id="c3" class="content">留言管理</div><div id="c4" class="content">风格管理</div><div id="c5" class="content">系统管理</div><div id="c6" class="content">帮助信息</div></div></div><div id="footer">copyright for lalasxc </div></body></html>

标签：代码,菜单

投稿

功能强大，代码简单的管理菜单

猜你喜欢

如何随机显示图片计数器？

CSS3的新特性

基于Oracle的高性能动态SQL程序开发

mysql 8.0.28 安装配置方法图文教程

Python基础之类的定义和使用详解

sql2005 远程连接问题解决方法

sqlserver 导出插入脚本代码

微信小程序Demo导入详细介绍

Python IDE PyCharm的基本快捷键和配置简介

关于Idea向GitHub push代码时一直重复提示输入用户名和密码的问题

优化代码改善CSS文件可读性

Python语法之精妙的十个知识点(装B语法)

苹果的“创新”

如何远程使用服务器上的Jupyter notebook

Numpy之将矩阵拉成向量的实例

前端框架之封装Vue第三方组件三个技巧

围观tangram js库

javascript实现炫酷的拖动分页

MySQL 的覆盖索引与回表的使用方法

python处理按钮消息的实例详解

功能强大，代码简单的管理菜单

猜你喜欢

如何随机显示图片计数器？

CSS3的新特性

基于Oracle的高性能动态SQL程序开发

mysql 8.0.28 安装配置方法图文教程

Python基础之类的定义和使用详解

sql2005 远程连接问题解决方法

sqlserver 导出插入脚本代码

微信 小程序Demo导入详细介绍

Python IDE PyCharm的基本快捷键和配置简介

关于Idea向GitHub push代码时一直重复提示输入用户名和密码的问题

优化代码 改善CSS文件可读性

Python语法之精妙的十个知识点(装B语法)

苹果的“创新”

如何远程使用服务器上的Jupyter notebook

Numpy之将矩阵拉成向量的实例

前端框架之封装Vue第三方组件三个技巧

围观tangram js库

javascript实现炫酷的拖动分页

MySQL 的覆盖索引与回表的使用方法

python处理按钮消息的实例详解

微信小程序Demo导入详细介绍

优化代码改善CSS文件可读性