打印

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

本主题由 caiying2007 于 2008-5-4 14:08 设置高亮

lalasxc [楼主]

中级会员

帖子: 168
体力: 286
威望: 1
当前: 天津南开
离线: 8 天

专长 前端制作,JS,AS

1^# 大中小发表于 2008-5-4 09:45

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

<!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>无标题文档</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+"&nbsp;&nbsp;&nbsp;"+"<img src='http://www.tjdadi.com.cn/off.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>&nbsp;</p>
    <p><strong>欢迎使用用户管理系统！</strong></p>
    <p>&nbsp;</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>

提示：您可以先修改部分代码再运行

[ 本帖最后由 lalasxc 于 2008-5-5 15:59 编辑 ]

本帖最近评分记录

caiying2007 威望 +1 不错,支持原创 2008-5-6 14:53

TOP

winzip

中级会员

帖子: 141
体力: 285
威望: 0
当前: 安徽合肥

2^# 大中小发表于 2008-5-4 09:48

good job
任务栏

TOP

lalasxc [楼主]

中级会员

帖子: 168
体力: 286
威望: 1
当前: 天津南开
离线: 8 天

专长 前端制作,JS,AS

3^# 大中小发表于 2008-5-4 10:20

这个叫任务栏是不合适点，我也不知叫什么好

TOP

m2maomao

火车的下一站
中级会员

帖子: 138
体力: 243
威望: 0
当前: 内蒙赤峰
离线: 2 天

发短消息

4^# 大中小发表于 2008-5-4 10:52

It's so stranger.

TOP

lalasxc [楼主]

中级会员

帖子: 168
体力: 286
威望: 1
当前: 天津南开
离线: 8 天

专长 前端制作,JS,AS

5^# 大中小发表于 2008-5-4 11:21

It's so stranger
如此的陌生人？

TOP

ppeyes

新手上路

帖子: 12
体力: 32
威望: 0
当前: 福建厦门
离线: 45 天

发短消息

6^# 大中小发表于 2008-5-4 11:28

收下了

TOP

maliangcnypm

新手上路

帖子: 46
体力: 49
威望: 0
当前: 北京通州区
离线: 8 天

发短消息

7^# 大中小发表于 2008-5-4 11:30

It's so stranger
It's so strange
很强大

TOP

9skylark

新手上路

帖子: 14
体力: 33
威望: 0
当前: 上海徐汇
离线: 64 天

发短消息

8^# 大中小发表于 2008-5-4 12:03

很好

挺实用的

奔跑

TOP

shaohua162001

荷西
中级会员

帖子: 550
体力: 420
威望: 0
当前: 北京海淀区

专长 网页设计,前端制作,ASP

9^# 大中小发表于 2008-5-4 12:07

楼主太好了我一直在找这样的效果
谢谢啊

后院

TOP

lhnlj2

水舞流漠
高级会员

帖子: 313
体力: 617
威望: 0
当前: 江苏徐州

10^# 大中小发表于 2008-5-4 12:26

楼主太强悍了。。谢谢

www.lanrendy.com

TOP

xilao

新手上路

帖子: 24
体力: 49
威望: 0
离线: 2 天

发短消息

11^# 大中小发表于 2008-5-4 14:49

哈哈。很实力。顶一下

TOP

lalasxc [楼主]

中级会员

帖子: 168
体力: 286
威望: 1
当前: 天津南开
离线: 8 天

专长 前端制作,JS,AS

12^# 大中小发表于 2008-5-4 14:58

这里有个问题，大家帮忙看下，就是一个#ff0000这样的颜色值，怎么让所有的浏览器都能报出同样的一个值，例如FF下会是rgb(255,255,0)

TOP

lucknox

阻鸡手
中级会员

帖子: 213
体力: 443
威望: 0
当前: 湖北宜昌
离线: 22 天

13^# 大中小发表于 2008-5-4 15:14

效果不错，还需要美化啊

test?

TOP

haohaohb

新手上路

帖子: 11
体力: 28
威望: 0
当前: 湖北荆门
离线: 59 天

发短消息

14^# 大中小发表于 2008-5-4 15:17

呵呵！不错不错！收藏了！

TOP

liyingang

简简单单
初级会员

帖子: 111
体力: 65
威望: 0
当前: 北京海淀区

专长 网页设计,UI,Flash

15^# 大中小发表于 2008-5-4 15:20

呵呵！不错！收藏了！

TOP

qxq864298

新手上路

帖子: 48
体力: 41
威望: 0
当前: 北京海淀区

发短消息

16^# 大中小发表于 2008-5-4 15:27

so good so strong

TOP

kabukon

中级会员

帖子: 511
体力: 320
威望: 0
当前: 上海静安

发短消息

专长 前端制作,JS

17^# 大中小发表于 2008-5-4 15:35

楼主的慷慨又让我们堕落了，现在都是拿现成的，自己都懒的写了

TOP

zhuweibao

新手上路

帖子: 7
体力: 18
威望: 0
当前: 上海闵行
离线: 56 天

发短消息

18^# 大中小发表于 2008-5-4 21:08

很强大,谢谢.

翊辰GRID

TOP

LostSinger

新手上路

帖子: 14
体力: 36
威望: 0
离线: 25 天

发短消息

19^# 大中小发表于 2008-5-4 21:15

很好很强大，收藏了

TOP

ecma

请叫我草履虫
高级会员

帖子: 759
体力: 979
威望: 3
当前: 福建厦门

20^# 大中小发表于 2008-5-4 23:30

引用:

原帖由 lalasxc 于 2008-5-4 14:58 发表
这里有个问题，大家帮忙看下，就是一个#ff0000这样的颜色值，怎么让所有的浏览器都能报出同样的一个值，例如FF下会是rgb(255,255,0)

写了一个

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Untitled Document</title>
		<script type="text/javascript">
			window.onload = function() {
				var color = document.getElementById("box").style.backgroundColor;
				alert("原来的颜色:" + color);
				alert("转换后的颜色:" +　hexColor(color));
				
			}
						
			function hexColor(color){
				var myColor = "#";
				if(/rgb/i.test(color)){
					color.replace(/\d+/g,function($0){myColor += $0 = $0 == 0 ? "00" : $0 = $0 < 16 ? "0" + parseInt($0).toString(16) : parseInt($0).toString(16);});
					return myColor;
				}
				else if(/#([0-9]|[a,b,c,d,e,f]){3}/g.test(color)){
					color.replace(/[0-9]|[a,b,c,d,e,f]/g,function($0){myColor += $0.toString() + $0.toString();});
					return myColor;
				}
				else if(/#([0-9]|[a,b,c,d,e,f]){6}/g.test(color)){
					return color;
				}
				else{
					throw new Error("color type error");
				}
			}
		</script>
	</head>
	<body>
		<div id="box" style="height:100px;width:100px;border:1px solid #ddd;background:#f0a;"></div>
	</body>
</html>

提示：您可以先修改部分代码再运行

[ 本帖最后由 ecma 于 2008-5-4 23:32 编辑 ]

Rammstein

TOP

lovelylife

中级会员

帖子: 102
体力: 219
威望: 0
当前: 上海浦东
离线: 3 天

21^# 大中小发表于 2008-5-4 23:49

引用:

原帖由 kabukon 于 2008-5-4 15:35 发表
楼主的慷慨又让我们堕落了，现在都是拿现成的，自己都懒的写了

呵呵，现在的人都懒了

收藏了

================================
http://onlyaa.com [ javascript、经典专区 ]

TOP

seagreen7

初级会员

帖子: 45
体力: 105
威望: 0
离线: 31 天

发短消息

22^# 大中小发表于 2008-5-5 09:15

不错，收藏了

TOP

xcondor

初级会员

帖子: 27
体力: 67
威望: 0
当前: 四川成都
离线: 2 天

专长 网页设计,策划,网站运营

23^# 大中小发表于 2008-5-5 09:35

不错，自己感觉在美观方面，上面导航条有点长了

TOP

cnbluesea

新手上路

帖子: 32
体力: 45
威望: 0
当前: 河南郑州
离线: 64 天

发短消息

24^# 大中小发表于 2008-5-5 09:49

不错啊

做好准备

TOP

alou

小娄
高级会员

帖子: 344
体力: 711
威望: 0
当前: 上海徐汇

25^# 大中小发表于 2008-5-5 09:55

效果很好，但可能不实用

企鹅

TOP

cuikai

银牌会员

帖子: 1260
体力: 1795
威望: 5
当前: 北京东城区

专长 UI,前端制作

26^# 大中小发表于 2008-5-5 10:10

试着和我这边现有的后台结合一下…… 我去试了……

承接(前端开发/网站设计)类兼职:www.uicss.cn

TOP

lalasxc [楼主]

中级会员

帖子: 168
体力: 286
威望: 1
当前: 天津南开
离线: 8 天

专长 前端制作,JS,AS

27^# 大中小发表于 2008-5-5 12:20

回复 ecma 在 20# 的帖子

thanks,回去试一下！

TOP

andylau123

新手上路

帖子: 95
体力: 0
威望: 0
离线: 48 天

发短消息

28^# 大中小发表于 2008-5-5 13:05

楼主太好了我一直在找这样的效果
谢谢啊

TOP

ecma

请叫我草履虫
高级会员

帖子: 759
体力: 979
威望: 3
当前: 福建厦门

29^# 大中小发表于 2008-5-5 13:24

引用:

原帖由 lalasxc 于 2008-5-5 12:20 发表
thanks,回去试一下！

修复了一个bug,支持 ie6,ie7,firefox,opera,safari

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Untitled Document</title>
		<script type="text/javascript">
			window.onload = function() {
				var color = document.getElementById("box").style.backgroundColor;
				alert("原来的颜色:" + color);
				alert("转换后的颜色:" +　hexColor(color));
				
			}
						
			function hexColor(color){
				var myColor = "#";
				if(/rgb/i.test(color)){
					color.replace(/\d+/g,function($0){myColor += $0 = $0 == 0 ? "00" : $0 = $0 < 16 ? "0" + parseInt($0).toString(16) : parseInt($0).toString(16);});
					return myColor;
				}
				else if(/#([0-9]|[a,b,c,d,e,f]){6}/g.test(color)){
					return color;
				}
				else if(/#([0-9]|[a,b,c,d,e,f]){3}/g.test(color)){
					color.replace(/[0-9]|[a,b,c,d,e,f]/g,function($0){myColor += $0.toString() + $0.toString();});
					return myColor;
				}
				else{
					throw new Error("color type error");
				}
			}
		</script>
	</head>
	<body>
		<div id="box" style="height:100px;width:100px;border:1px solid #ddd;background:#f0a;"></div>
	</body>
</html>

提示：您可以先修改部分代码再运行

Rammstein

TOP

sunboyzb

银牌会员

帖子: 552
体力: 1117
威望: 0
当前: 江苏苏州
离线: 1 天

30^# 大中小发表于 2008-5-5 14:32

好东西,多动手就是好样的,值得学习!

创世纪计算机资源网

TOP