打印

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

lalasxc [楼主]

中级会员

帖子: 208
体力: 373
威望: 1
当前: 天津南开
离线: 1 天

专长 前端制作,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

西部数码VPS主机1G内存仅266元

lalasxc [楼主]

中级会员

帖子: 208
体力: 373
威望: 1
当前: 天津南开
离线: 1 天

专长 前端制作,JS,AS

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

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

TOP

广州周立功诚聘—平面/网页/UI/工业设计师 | 天业互联-酷睿租用599￥

lalasxc [楼主]

中级会员

帖子: 208
体力: 373
威望: 1
当前: 天津南开
离线: 1 天

专长 前端制作,JS,AS

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

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

TOP

认证您的手机，获得手机认证图标

，更多手机认证的好处

ecma

请叫我草履虫

银牌会员

帖子: 850
体力: 1102
威望: 3
当前: 福建福州

4^# 大中小发表于 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 编辑 ]

TOP

用CSS布局建站从零开始 | Photoshop中打造史诗般梦幻场景 | 05年第一次软件行业创业的惨痛教训

ecma

请叫我草履虫

银牌会员

帖子: 850
体力: 1102
威望: 3
当前: 福建福州

5^# 大中小发表于 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>

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

TOP

tangl198710

啸天皇帝

银牌会员

帖子: 539
体力: 1190
威望: 0
当前: 四川成都
离线: 9 天

专长 JS,PHP,MySQL

6^# 大中小发表于 2008-5-5 15:18

很好，很强大。

还有一个问题如何修改一下像这个样子。

如果点某个菜单之后(左边那一栏)菜单的背景色就改一个。
还有一个问题就是。

如果我的li里面再加一个管理项怎么让它不显示到第二行而是将已经显示出来的全部相应的变短一点。
请ZL再讲解一下。

谢谢！

[ 本帖最后由 tangl198710 于 2008-5-5 15:23 编辑 ]

TOP

tangl198710

啸天皇帝

银牌会员

帖子: 539
体力: 1190
威望: 0
当前: 四川成都
离线: 9 天

专长 JS,PHP,MySQL

7^# 大中小发表于 2008-5-5 15:24

<!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"//欢迎内容隐藏
//循环取得当前索引
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){
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";
 }
else{
clearContent();
$("welcome").style.display="block"
   }
  }
}
menu.appendChild(tagMenu);
}
//清除标签样式
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>
<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>

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

这个运行起来就有不漂亮的地方了。

TOP

lalasxc [楼主]

中级会员

帖子: 208
体力: 373
威望: 1
当前: 天津南开
离线: 1 天

专长 前端制作,JS,AS

8^# 大中小发表于 2008-5-5 16:04

回复 tangl198710 在 32# 的帖子

左侧菜单问题已解决，第二个问题LI短的话，那文字和图片也要折行，同样不好看

TOP

tangl198710

啸天皇帝

银牌会员

帖子: 539
体力: 1190
威望: 0
当前: 四川成都
离线: 9 天

专长 JS,PHP,MySQL

9^# 大中小发表于 2008-5-5 16:54

那怎样可以弄得好看呢？就像126邮箱的效果一样。

还是发两个图片。

附件: 您所在的用户组无法下载或查看附件，您需要注册/登录后才能查看！

TOP

lovevfp

禁止发言

帖子: 115
体力: 13
威望: 0
当前: 北京朝阳区
离线: 121 天

10^# 大中小发表于 2008-5-6 09:16

我看到有几个人都提到美化，其实吧，楼主能够发出来应该非常感谢他了，至于美化嘛，自己根据你的自身情况进行更改就行了嘛，不可能大家使用这个菜单的时候都用同样的界面吧！！

TOP

myhero

初级会员

帖子: 35
体力: 71
威望: 0
当前: 湖北武汉

专长 网页设计,UI,网站运营

11^# 大中小发表于 2008-5-6 18:34

美化了下，希望大家喜欢。多谢楼主。

下载地址：myhero.rar

[ 本帖最后由 myhero 于 2008-5-6 18:35 编辑 ]

TOP

FFEEDD

褪色

高级会员

认证
帖子: 415
体力: 696
威望: 1
当前: 广东深圳
离线: 26 天

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

12^# 大中小发表于 2008-5-6 19:31

这个东西我觉的有模仿126信箱的嫌疑```
但是可动手去写值得学习``顶一下

你以为农民都喜欢背井离乡吗?

TOP

sxnow

猴子

银牌会员

帖子: 496
体力: 1269
威望: 7
当前: 浙江杭州
离线: 40 天

专长 前端制作,PHP,ASP

13^# 大中小发表于 2008-5-7 17:30

加了双击关闭标签事件

向来很喜欢126邮箱的风格~~和Maxthon很像啊~~

因为快要下机没仔细看随便加了个双击关闭标签的事件这下更像126了不过代码没整理只是把关闭按钮函数直接放过来了有时间再啃啃

楼主大好人还有美化的那位仁兄你太有才了！希望大家把这个东东优化到底~ 有空我用JQ改写一下提升一下兼容性~~ 还有想加上拖拽标签效果~~

如需联系+我QQ :49054026

附件: 您所在的用户组无法下载或查看附件，您需要注册/登录后才能查看！

免费的域名&存储空间

TOP

myhero

初级会员

帖子: 35
体力: 71
威望: 0
当前: 湖北武汉

专长 网页设计,UI,网站运营

14^# 大中小发表于 2008-5-7 18:16

163风格....

都喜欢126的风格啊。。。。昨晚只做了163的风格。。
看样子今天晚上又得花点时间了。

下载地址:163.rar

[ 本帖最后由 myhero 于 2008-5-7 21:03 编辑 ]

TOP

myhero

初级会员

帖子: 35
体力: 71
威望: 0
当前: 湖北武汉

专长 网页设计,UI,网站运营

15^# 大中小发表于 2008-5-7 23:54

126风格

谢谢52楼sxnow朋友进行指导！

说明:
1、FF下搜索框错位,主要问题是用了2次相对定位.不需要搜索框的可直接去掉.
2、topTags下的li行高有点低，可根据自己需要调整。
3、尽量和126相似。代码写得比较工整，不需要的地方直接删除即可。

下载地址：126.rar

TOP

javaDev1981

新手上路

帖子: 1
体力: 7
威望: 0
当前: 福建福州
离线: 417 天

16^# 大中小发表于 2008-5-8 11:47

回复 myhero 在 58# 的帖子

在关闭时有点小Bug，就是关闭某个菜单项时，不会把下面的内容也关闭

TOP

ljlyy

中级会员

帖子: 116
体力: 283
威望: 1
当前: 广东广州
离线: 4 天

专长 JS,ASP

17^# 大中小发表于 2008-5-8 17:54

我用jquery也做了个类似的！
http://www.94this.com.cn/article.asp?id=28

博客

TOP

cmwap

上一届

高级会员

帖子: 626
体力: 988
威望: 11
当前: 江西南昌

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

支持

支持````
再看看我的

http://bbs.blueidea.com/thread-2857350-1-1.html

\\自.娱.自.乐:2008\waproot\self.lsc

TOP

lalasxc [楼主]

中级会员

帖子: 208
体力: 373
威望: 1
当前: 天津南开
离线: 1 天

专长 前端制作,JS,AS

19^# 大中小发表于 2008-7-9 16:02

在哪里看到过？我在蓝色首发，其他都是转贴！

TOP

vtesoyj

初级会员

认证
帖子: 45
体力: 91
威望: 0
当前: 广东深圳
离线: 7 天

20^# 大中小发表于 2009-6-3 14:15

美化自己美化吧。。其实改些css就行了。这么强大的代码

TOP

liliangcool

新手上路

认证
帖子: 9
体力: 23
威望: 0
当前: 广东深圳
离线: 29 天

21^# 大中小发表于 2009-6-3 14:45

引用:

原帖由 javaDev1981 于 2008-5-8 11:47 发表
在关闭时有点小Bug，就是关闭某个菜单项时，不会把下面的内容也关闭

好象原本楼主的代码没有这个BUG，美化后开始出现
我也发现了！
关闭一标签时候，该标签的内容没有被关闭掉！

TOP

8yong8

银牌会员

帖子: 657
体力: 1354
威望: 0
当前: 上海杨浦
离线: 1 天

专长 JS,PHP,MySQL

22^# 大中小发表于 2009-6-3 16:29

改改样式应该会不错的

做一个最抠门的程序员!

TOP

JcssRay

深白se

中级会员

认证
帖子: 93
体力: 201
威望: 0
当前: 广东中山
离线: 1 天

专长 网页设计,JS

23^# 大中小发表于 2009-6-3 19:10

呵呵.~
那个颜色转换的我正准备写,没想到这里有 ~``如果没时间就直接盗取了.谢谢哦.~

jesktop.blogbus.com

TOP

daoying2000

borchert

银牌会员

帖子: 575
体力: 1245
威望: 0
当前: 河北秦皇岛
离线: 1 天

24^# 大中小发表于 2009-6-3 22:29

现在做机顶盒应用，这些效果根本无法解析，郁闷

TOP

e98123

初级会员

帖子: 34
体力: 84
威望: 0
离线: 8 天

25^# 大中小发表于 2009-6-4 06:52

酷。留下了，回家改改看。。

TOP

lyj4532556

初级会员

帖子: 28
体力: 68
威望: 0
当前: 安徽合肥
离线: 1 天

26^# 大中小发表于 2009-6-5 14:05

谢谢了,,很好的东西,,收藏了

TOP