打印

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

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

tangl198710

啸天皇帝
高级会员

帖子: 419
体力: 925
威望: 0
当前: 四川成都
离线: 4 天

发短消息

专长 PHP,MySQL,MSSQL

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

很好，很强大。

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

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

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

谢谢！

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

TOP

tangl198710

啸天皇帝
高级会员

帖子: 419
体力: 925
威望: 0
当前: 四川成都
离线: 4 天

发短消息

专长 PHP,MySQL,MSSQL

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

shuntianpeng

笨小孩儿
金牌会员

帖子: 2046
体力: 3612
威望: 54
当前: 江苏苏州
离线: 2 天

33^# 大中小发表于 2008-5-5 15:49

很好，很强大

我命由我不由天~
80社区

TOP

lalasxc [楼主]

中级会员

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

发短消息

专长 前端制作,JS,AS

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

回复 tangl198710 在 32# 的帖子

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

TOP

fhjzzx

初级会员

帖子: 66
体力: 142
威望: 0

发短消息

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

酷的很，先手下了，谢谢~~~~~~

www.admincss.com

TOP

tangl198710

啸天皇帝
高级会员

帖子: 419
体力: 925
威望: 0
当前: 四川成都
离线: 4 天

发短消息

专长 PHP,MySQL,MSSQL

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

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

还是发两个图片。

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

TOP

fatkun

新手上路

帖子: 18
体力: 42
威望: 0
当前: 广东广州

发短消息

37^# 大中小发表于 2008-5-5 17:58

好东西!!不收藏对不起自己啊!

TOP

fengoo

新手上路

帖子: 19
体力: 39
威望: 0
离线: 3 天

发短消息

38^# 大中小发表于 2008-5-5 20:04

强啊

TOP

carlos110

新手上路

帖子: 2
体力: 9
威望: 0
离线: 3 天

发短消息

39^# 大中小发表于 2008-5-5 21:07

相当不错感谢楼主收藏了

TOP

idsuzhou

新手上路

帖子: 22
体力: 44
威望: 0

40^# 大中小发表于 2008-5-5 21:12

楼主

实力派。很强！

TOP

wenhao676

中级会员

帖子: 109
体力: 331
威望: 0
离线: 1 天

发短消息

41^# 大中小发表于 2008-5-6 08:01

再美化一下

比较实用

学习

TOP

joymv

貌似没几年青春
中级会员

帖子: 262
体力: 417
威望: 0
当前: 江西南昌

专长 网页设计,PHP

42^# 大中小发表于 2008-5-6 08:07

引用:

原帖由 9skylark 于 2008-5-4 12:03 发表
挺实用的

用做什么好呢?

iT堂

TOP

lovevfp

新手上路

帖子: 88
体力: 42
威望: 0
当前: 北京朝阳区
离线: 2 天

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

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

TOP

myhero

新手上路

帖子: 24
体力: 48
威望: 0

发短消息

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

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

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

下载地址：myhero.rar

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

TOP

FFEEDD

褪色
中级会员

帖子: 153
体力: 278
威望: 0
当前: 上海宝山

发短消息

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

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

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

对我来说生命就是1/2.

TOP

dreamyan

新手上路

帖子: 5
体力: 11
威望: 0
当前: 广东珠海
离线: 51 天

发短消息

46^# 大中小发表于 2008-5-6 22:00

很好，得好好研究下！谢谢

TOP

chong6

高级会员

帖子: 430
体力: 941
威望: 0
离线: 1 天

发短消息

47^# 大中小发表于 2008-5-6 23:02

强大!!!!!!!!!!!

http://www.shuoshenme.com/ 说什么--值得推荐!

TOP

yachuan520

天空飞扬的柳絮
中级会员

帖子: 130
体力: 235
威望: 10
当前: 上海闸北
离线: 19 天

发短消息

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

很好，很强大。收藏了。

TOP

tangl198710

啸天皇帝
高级会员

帖子: 419
体力: 925
威望: 0
当前: 四川成都
离线: 4 天

发短消息

专长 PHP,MySQL,MSSQL

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

能用框架实现就太好了。现在的都在同一个页面做成一个后台管理也不现实

可以实现126的那种就好了。

TOP

iskywang

中级会员

帖子: 247
体力: 425
威望: 0
当前: 北京海淀区
离线: 2 天

发短消息

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

50^# 大中小发表于 2008-5-7 16:37

点击生成的标签如何自适应宽度？因为js中也有，对js不熟悉，那位高手辛苦下

yiyiya2008

TOP

dan59

初级会员

帖子: 75
体力: 64
威望: 0
离线: 5 天

发短消息

51^# 大中小发表于 2008-5-7 17:28

唉，有现拿了。

我的MSN SPACE
spaces.msn.com/danielchen59/
团队的MSN SPACE
spaces.msn.com/51wdgroup/

TOP

sxnow

猴子
银牌会员

帖子: 435
体力: 1163
威望: 7
离线: 1 天

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

加了双击关闭标签事件

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

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

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

如需联系+我QQ :49054026

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

{ :+: 许诺 | SnoW | SnowBillow | HotSnoW | Studio!~ :+: } 偶西菜鸟大家带带偶哈~~

TOP

givebest

初级会员

帖子: 64
体力: 127
威望: 0
当前: 广东深圳
离线: 1 天

专长 网页设计,ASP,SEO

53^# 大中小发表于 2008-5-7 17:39

有待美化.

静静曼延

TOP

sxnow

猴子
银牌会员

帖子: 435
体力: 1163
威望: 7
离线: 1 天

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

我觉得内容页面应该用ajax取然后结合个history来用锚点改写地址栏~~ 这样做后台应该很不错滴~

{ :+: 许诺 | SnoW | SnowBillow | HotSnoW | Studio!~ :+: } 偶西菜鸟大家带带偶哈~~

TOP

myhero

新手上路

帖子: 24
体力: 48
威望: 0

发短消息

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

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

163风格....

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

下载地址:163.rar

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

TOP

sxnow

猴子
银牌会员

帖子: 435
体力: 1163
威望: 7
离线: 1 天

56^# 大中小发表于 2008-5-7 21:08

126比较清爽啊~~哈哈~~

{ :+: 许诺 | SnoW | SnowBillow | HotSnoW | Studio!~ :+: } 偶西菜鸟大家带带偶哈~~

TOP

rayyer

洞中仙
中级会员

帖子: 119
体力: 316
威望: 0
当前: 陕西西安
离线: 4 天

发短消息

57^# 大中小发表于 2008-5-7 21:49

正需要这种效果，自己做不出来，只有模仿了，懒人精神

TOP

myhero

新手上路

帖子: 24
体力: 48
威望: 0

发短消息

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

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

126风格

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

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

下载地址：126.rar

TOP

a0936

河西走狼
初级会员

帖子: 39
体力: 85
威望: 0

发短消息

59^# 大中小发表于 2008-5-8 10:47

顶楼主，收藏备用

河西走狼

TOP

livecoffee

初级会员

帖子: 52
体力: 112
威望: 0
当前: 湖北武汉
离线: 9 天

发短消息

专长 网页设计,PHP,ASP

60^# 大中小发表于 2008-5-8 11:30

谢谢有点像35主机管理系统的那效果

TOP