打印

Div+CSS+JS树型菜单，可刷新

NETAny [楼主]

中级会员

帖子: 106
体力: 329
威望: 2
离线: 467 天

1^# 大中小发表于 2005-12-24 10:20 只看该作者

工作需要搞了一个DIV+CSS菜单，兼容Firefox,分享给大家，大家一齐学习

在线演示：http://www.livepo.com/UserCode/DivCssMenu.html

<!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>Div+CSS+JS树型菜单，可刷新</title>
<meta name="description" content="http://www.livepo.com">
<style type="text/css">

#PARENT{
	width:300px;
	padding-left:20px;
}
</style>
</head>
<body>
<div id="PARENT">
<ul id="nav">
<li><a href="#Menu=ChildMenu1"  onclick="DoMenu('ChildMenu1')">我的网站</a>
	<ul id="ChildMenu1" class="collapsed">
	<li><a href="http://www.netany.net" target="_blank">[url]www.netany.net[/url]</a></li>
	<li><a href="http://www.netany.net" target="_blank">[url]www.netany.net[/url]</a></li>
	<li><a href="http://www.netany.net" target="_blank">[url]www.netany.net[/url]</a></li>
	</ul>
</li>
<li><a href="#Menu=ChildMenu2" onclick="DoMenu('ChildMenu2')">我的帐务</a>
	<ul id="ChildMenu2" class="collapsed">
	<a href="http://www.netany.net" target="_blank">支付</a></li>
	<li><a href="#">网上支付</a></li>
	<li><a href="#">登记汇款</a></li>
	<li><a href="#">在线招领</a></li>
	<li><a href="#">历史帐务</a></li>
	</ul>
</li>
<li><a href="#Menu=ChildMenu3" onclick="DoMenu('ChildMenu3')">网站管理</a>
	<ul id="ChildMenu3" class="collapsed">
	<li><a href="#">登录</a></li>
	<a href="http://www.netany.net" target="_blank">管理</a></li>
	<li><a href="#">管理</a></li>
	<li><a href="#">管理</a></li>
	</ul>
</li>
<li><a href="#Menu=ChildMenu4" onclick="DoMenu('ChildMenu4')">网站管理</a>
	<ul id="ChildMenu4" class="collapsed">
	<li><a href="#">登录</a></li>
	<a href="http://www.netany.net" target="_blank">管理</a></li>
	<li><a href="#">管理</a></li>
	<li><a href="#">管理</a></li>
	</ul>
</li>
</ul>
</div>
<div style="width:300;padding-left:30px;">
</br></br>
工作需要搞了一个菜单，分享给大家，大家一齐学习
</br></br>
<p>请大家支持:<a href="http://www.netany.net" target="_blank">[url]http://www.netany.net[/url]</a></p>
</div>
</body>
</html>
<script type=text/javascript></script>

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

-----------------
稍微修改了一下显示，这样方便大家测试

[ 本帖最后由 NETAny 于 2006-7-22 09:35 编辑 ]

本帖最近评分记录

经典论坛大妈威望 +2 历史打分 2005-12-24 10:20

http://www.LIVEPO.com

TOP

挑战者liu

高级会员

帖子: 621
体力: 761
威望: 0

2^# 大中小发表于 2005-12-24 10:26 只看该作者

很好
支持,特别是刷新保持

E-liuzd

TOP

qiaodi

初级会员

帖子: 22
体力: 73
威望: 0
离线: 846 天

发短消息

3^# 大中小发表于 2005-12-24 23:58 只看该作者

点一下再点一下再点一下.....不出来了...

TOP

NETAny [楼主]

中级会员

帖子: 106
体力: 329
威望: 2
离线: 467 天

4^# 大中小发表于 2005-12-26 13:40 只看该作者

不好意思，有个小Bug，，已经修正

http://www.LIVEPO.com

TOP

Sheneyan

子虚乌有
超级版主

帖子: 8255
体力: 19468
威望: 177
当前: 福建厦门
离线: 3 天

5^# 大中小发表于 2005-12-26 13:50 只看该作者

你的代码似乎存在效率问题，点击主菜单时明显cpu占用提高，机器速度变慢（赛扬800,256 SD），先看看能否消除这个影响噢～

初步判断是那几个菜单效果造成的影响，可以考虑使用a本身的css样式来实现嘛～

子叶:子乌的叶子
帅哥们，美女们，新的一年终于来了，祝贺你们...终于又老了一岁~

TOP

goos

高级会员

帖子: 287
体力: 723
威望: 7
当前: 北京海淀区
离线: 27 天

6^# 大中小发表于 2005-12-26 14:05 只看该作者

從論壇裏搞的，稍微修改了下，呵呵也可以叫原創了！

<!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;}
*{margin:0;padding:0;}
#left {width: 160px; background: #fff; border:solid 1px #ccc;color: #f06;}
#shut {position: absolute;top: 2px;left:144px;}
#nav div{cursor: pointer; background:#f7f7f7;border-bottom: dashed 1px #ccc; padding:5px 5px 5px 10px; display:block}
#nav ul{list-style: inside circle; display: none;font: 12px/130% Tahoma; margin-left:2em;}
#nav li{padding:2px; margin-bottom:3px; border-bottom:solid 1px #eee;}
#nav li a{ color:#f20; text-decoration:none;} 
</style>
</head>
<body>
<img id="shut" src="" width="10" height="10" title="关闭菜单导航" />
<div id="left">
<div id="nav">
	<div>系统信息公告
		<ul>
		<li><a href="">公告列表</a></li>
		<li><a href="">发布留言</a></li>
		<li><a href="">查看留言</a></li>
		</ul>
	</div>
	
	<div>用户管理
		<ul>
		<li><a href="">添加用户</a></li>
		<li><a href="">更改密码</a></li>
		</ul>
	</div>
	
</div>
</div>
<script type="text/javascript">
var left = document.getElementById("left");
var shut = document.getElementById("shut");
function shut_open() {
	left.style.display = (left.style.display == "none")?"":"none";
	shut.style.left = (shut.style.left == "2px")?"144px":"2px";
	shut.src = (shut.src == "img/open.gif")?"img/shut.gif":"img/open.gif";
	shut.title = (shut.title == "打开菜单导航")?"关闭菜单导航":"打开菜单导航";
}
shut.onclick = shut_open;
var cao=document.getElementById("nav");
var ddii = cao.childNodes;
ul=new Array;
di=new Array;
for(var i=0;i<ddii.length;i++){
ddii[i].cao=i; 
cao.childNodes[i].childNodes[1].onclick=function nono(){window.event.cancelBubble = true;}
ddii[i].onclick=function shut_open1(){var i=this.cao;cao.childNodes[i].childNodes[1].style.display = (cao.childNodes[i].childNodes[1].style.display == "block")?"":"block";}       
}
</script>
</body>
</html>

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

TOP

goos

高级会员

帖子: 287
体力: 723
威望: 7
当前: 北京海淀区
离线: 27 天

7^# 大中小发表于 2005-12-26 14:06 只看该作者

但是不支持刷新

TOP

NETAny [楼主]

中级会员

帖子: 106
体力: 329
威望: 2
离线: 467 天

8^# 大中小发表于 2005-12-26 14:10 只看该作者

Sheneyan
　　谢谢你的意见，，我会再看看

http://www.LIVEPO.com

TOP

NETAny [楼主]

中级会员

帖子: 106
体力: 329
威望: 2
离线: 467 天

9^# 大中小发表于 2005-12-26 14:11 只看该作者

goos

你的代码很少，，不过好象不支持Firefox

http://www.LIVEPO.com

TOP

goos

高级会员

帖子: 287
体力: 723
威望: 7
当前: 北京海淀区
离线: 27 天

10^# 大中小发表于 2005-12-26 14:16 只看该作者

這下臭大了。。。。

TOP

Sheneyan

子虚乌有
超级版主

帖子: 8255
体力: 19468
威望: 177
当前: 福建厦门
离线: 3 天

11^# 大中小发表于 2005-12-26 14:24 只看该作者

hehe,goos，你的代码中不支持ff是小事，我对你文档的结构比较不喜欢

文档的结构我更喜欢NETAny的，他的代码更符合语义，单单看结构就能知道内容之间的关系，你的代码中滥用了div，这不是很好噢

也许是我太苛求，不过我还是希望尽最大努力，让自己的代码中不要出现与标签本意不符的内容，大家一起加油咯～

子叶:子乌的叶子
帅哥们，美女们，新的一年终于来了，祝贺你们...终于又老了一岁~

TOP

newlethe

高级会员

帖子: 355
体力: 772
威望: 2
当前: 湖北武汉
离线: 23 天

12^# 大中小发表于 2005-12-26 14:32 只看该作者

感谢。。。。。。。

http://www.haao.cn

TOP

goos

高级会员

帖子: 287
体力: 723
威望: 7
当前: 北京海淀区
离线: 27 天

13^# 大中小发表于 2005-12-26 14:37 只看该作者

Sheneyan在上个帖子中说

引用:

hehe,goos，...你的代码中滥用了div，这不是很好噢...

这个在调整的过程中，由于是xhtml的问题，才加了一个div
如果没有这个，布局好烂！

对于LZ的帖子，收藏了！

TOP

NETAny [楼主]

中级会员

帖子: 106
体力: 329
威望: 2
离线: 467 天

14^# 大中小发表于 2005-12-26 15:03 只看该作者

都是高手，，互相学习

http://www.LIVEPO.com

TOP

goos

高级会员

帖子: 287
体力: 723
威望: 7
当前: 北京海淀区
离线: 27 天

15^# 大中小发表于 2005-12-26 15:32 只看该作者

NETAny 你网站的新闻系统不错，可否给我发一个源码呢？

谢谢了~！

52go52go@gmail.com

TOP

flashlizi

银牌会员

帖子: 497
体力: 1222
威望: 124
当前: 上海浦东
离线: 7 天

发短消息

16^# 大中小发表于 2005-12-26 16:14 只看该作者

呵呵，有个bug：在FF下，当你点击1个菜单显示子菜单，再点击关闭子菜单，当你再次点击同一个菜单的时候，菜单就没有反应了。点击其他菜单就没问题。
没仔细看代码，估计是哪里的js出了点问题

RIAidea.com

TOP

flashlizi

银牌会员

帖子: 497
体力: 1222
威望: 124
当前: 上海浦东
离线: 7 天

发短消息

17^# 大中小发表于 2005-12-26 16:15 只看该作者

IE下同样有这个问题。。。。

RIAidea.com

TOP

NETAny [楼主]

中级会员

帖子: 106
体力: 329
威望: 2
离线: 467 天

18^# 大中小发表于 2005-12-27 10:37 只看该作者

真是不好意思，只记得更改在线显示的那一个，贴在这里的代码忘记改了
已经改过来了

http://www.LIVEPO.com

TOP

wenming

微笑的海豚
荣誉管理团队

帖子: 2354
体力: 6037
威望: 39
当前: 北京海淀区
离线: 2 天

19^# 大中小发表于 2005-12-27 11:28 只看该作者

偶写了一个用cookie记忆D，不过有图片，放上来没图片会不好看D。

珍视拥有的、遗忘失去的。

TOP

netdoctor

新手上路

帖子: 8
体力: 28
威望: 0
离线: 870 天

发短消息

20^# 大中小发表于 2005-12-27 18:43 只看该作者

楼上的 DAXIA
能不能把背景换成卡通的图片
请教了
在自己的网站上加载

TOP

netdoctor

新手上路

帖子: 8
体力: 28
威望: 0
离线: 870 天

发短消息

21^# 大中小发表于 2005-12-27 19:20 只看该作者

这个树型菜单的代码简单一点。

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

TOP

netdoctor

新手上路

帖子: 8
体力: 28
威望: 0
离线: 870 天

发短消息

22^# 大中小发表于 2005-12-27 19:32 只看该作者

谁来给改改
不要笑哦笑到跌交我可不负责
真的看不懂了
才来请教的

TOP

Sheneyan

子虚乌有
超级版主

帖子: 8255
体力: 19468
威望: 177
当前: 福建厦门
离线: 3 天

23^# 大中小发表于 2005-12-27 20:30 只看该作者

to NETAny:

嘿嘿，刚才在ff底下测试你的代码，发现你一处小问题～

Nav写成了nav，你的demo没问题，看来是笔误咯

子叶:子乌的叶子
帅哥们，美女们，新的一年终于来了，祝贺你们...终于又老了一岁~

TOP

Sheneyan

子虚乌有
超级版主

帖子: 8255
体力: 19468
威望: 177
当前: 福建厦门
离线: 3 天

24^# 大中小发表于 2005-12-27 20:32 只看该作者

to netdoctor:

...你的代码似乎括号配对有问题。。。家里没趁手的编辑工具，要找缺的括号好麻烦。。自己找找哈

子叶:子乌的叶子
帅哥们，美女们，新的一年终于来了，祝贺你们...终于又老了一岁~

TOP

wenming

微笑的海豚
荣誉管理团队

帖子: 2354
体力: 6037
威望: 39
当前: 北京海淀区
离线: 2 天

25^# 大中小发表于 2005-12-28 00:48 只看该作者

这帖子这么热，，没图片我也来放一个。我是做了四张背景图，一张替换li圆点的图。
测试过，FF OPERA IE 都好像蛮正常的。

<!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>
<title>New Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="Generator" content="Dolphin EditPlus 2.12" />
<meta name="Author" content="微笑的海豚,Dolphin" />
<meta name="Keywords" content="Javascript,Java,XML,XSLT,ASP,VBScript,ASP .net,C#,C++,Database,微笑的海豚" />
<meta name="Description" content="微笑的海豚" />
<style type="text/css" media="all">
/*  @import url(""); */
#MyAAAControl #LeftMenu{
  width:155px;
}
#MyAAAControl #LeftMenu div.PMenu{
  width:155px;
  font-size:14px;
  line-height:23px;
  margin:0 0 8px 0;
  position:relative;
}
#MyAAAControl #LeftMenu div.PMenu h2{
  margin:0;
  font-size:14px;
  font-weight:bold;
  padding:3px 0 0 20px;
  cursor:pointer;
  color:#FFF;
  height:27px;
  background-color:#FFF;
  background-image:url("http://wenming.vicp.net:8989/meimg/my3a_up.gif");
  background-repeat:no-repeat;
}
#MyAAAControl #LeftMenu div.PMenu h2.down{
  background-image:url("http://wenming.vicp.net:8989/meimg/my3a_down.gif");
}
#MyAAAControl #LeftMenu div.PMenu h2.over_up{
  background-image:url("http://wenming.vicp.net:8989/meimg/my3a_over_up.gif");
}
#MyAAAControl #LeftMenu div.PMenu h2.over_down{
  background-image:url("http://wenming.vicp.net:8989/meimg/my3a_over_down.gif");
}
#MyAAAControl #LeftMenu div.PMenu div.MenuItem{
  position:static;
  display:block;
  border:1px solid #F0E5B3;
  background-color:#FEF9E1;
  width:147px;
  margin:-3px 0 0 3px;
}
#MyAAAControl #LeftMenu div.PMenu div.MenuItem ul{
  margin-top:14px;
}
#MyAAAControl #LeftMenu div.PMenu div.MenuItem ul{
  list-style: url("http://wenming.vicp.net:8989/meimg/my3a_menu_pre.gif") outside circle;
}
</style>
<script language="javascript" type="text/javascript">
Array.prototype.in_array = function(e)
{
for(iarr=0;iarr<this.length && this[iarr]!=e;iarr++);
return !(iarr==this.length);
}
// SetCookie ,record a value to cookie
function SetCookie(name,value,days)
{
	var expires = "";
	if (days)
	{
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
	}
	document.cookie = name + "=" + value + expires;
		
}
function GetCookie(sName)
{
  var aCookie = document.cookie.split("; ");
  for (var i=0; i < aCookie.length; i++)
  {
    var aCrumb = aCookie[i].split("=");
    if (sName == aCrumb[0]) 
      return unescape(aCrumb[1]);
  }
  return null;
}
function doClickCookie(hid,op)
{
	if (op)
	{
		tmpval += ","+hid;	
	}
	else
	{
		tmpval = tmpval.replace(","+hid,"");	
	}
	SetCookie("pmenu",tmpval,1);
}
MenuClick = function(evnt) {
	obj = (document.all)?event.srcElement:evnt.target;
	if (obj.nodeName=="H2"){
		var NextNode = obj.nextSibling;
		while (NextNode.nodeType==3)
			NextNode=NextNode.nextSibling;
		if(NextNode.style.display=="none")
		{NextNode.style.display = "block";obj.className = "over_up";doClickCookie(obj.id,true);}else{NextNode.style.display = "none";obj.className = "over_down";doClickCookie(obj.id,false);}
	}
}
MenuOver = function(evnt) { 
	obj = (document.all)?event.srcElement:evnt.target;
	if (obj.nodeName=="H2"){
		obj.className =(obj.className=="")?"over_up":"over_down";
	}
}
MenuOut = function(evnt) {
	obj = (document.all)?event.srcElement:evnt.target;
	if (obj.nodeName=="H2"){
		obj.className =(obj.className=="over_up" || obj.className=="")?"":"down";
	}
}
MenuInitailize = function(){
var img1 = img2 = new Image(); //预载图片，可避免鼠标移入时发生闪烁。
img1.src = "http://wenming.vicp.net:8989/meimg/my3a_over_down.gif"; 
img2.src = "http://wenming.vicp.net:8989/meimg/my3a_over_up.gif";
if (document.all || document.getElementById) {
	var navNode = document.getElementById("LeftMenu").childNodes;
	var extend = GetCookie("pmenu");
	extend = (extend)?eval("new Array("+extend+")"):new Array(0,1); //初始化打开的菜单项目
	//alert(extend);
	var c=0;
	for(i=0;i<navNode.length;i++)
	{
		var subNode = navNode[i].childNodes;
		for(j=0;j<subNode.length;j++)
		{
			if (subNode[j].nodeName=="H2")
			{
				subNode[j].id = c;
				subNode[j].onclick		= MenuClick;
				subNode[j].onmouseover	= MenuOver;
				subNode[j].onmouseout	= MenuOut;
				if (extend.in_array(c++)) continue;
				subNode[j].className="down";
				var NextNode = subNode[j].nextSibling;
				while (NextNode.nodeType==3)
					NextNode=NextNode.nextSibling;
				NextNode.style.display = (NextNode.style.display=="none")?"block":"none";
			}
		}
	}
}}
window.onload=MenuInitailize;
var tmpval = GetCookie("pmenu");
tmpval = (tmpval)?tmpval:"100";
</script>
</head>
<body id="MyAAAControl">
<div id="LeftMenu">
<div class="PMenu">
  <h2>我是买家</h2>
  <div class="MenuItem">
    <ul>
      <li class="ReNameFolder"><a href="#">已买到的宝贝</a></li>
      <li class="ReNameFolder"><a href="#">竞拍中的宝贝</a></li>
      <li class="ReNameFolder"><a href="#">竞拍结束的宝贝</a></li>
      <li class="ReNameFolder"><a href="#">卖家回复/留言</a></li>
      <li class="ReNameFolder"><a href="#">求购宝贝</a></li>
      <li class="ReNameFolder"><a href="#">我的收藏</a></li>
      <li class="ReNameFolder"><a href="#">重命名这个文件</a></li>
    </ul>
  </div>
</div>
<div class="PMenu">
  <h2>我是卖家</h2>
  <div class="MenuItem">
    <ul>
      <li class="ReNameFolder"><a href="#">我要卖</a></li>
      <li class="ReNameFolder"><a href="#">已卖出的宝贝</a></li>
      <li class="ReNameFolder"><a href="#">出售中的宝贝</a></li>
      <li class="ReNameFolder"><a href="#">仓库里的宝贝</a></li>
      <li class="ReNameFolder"><a href="#">买家留言/回复</a></li>
      <li class="ReNameFolder"><a href="#">免费开店</a></li>
      <li class="ReNameFolder"><a href="#">我要进货</a></li>
    </ul>
  </div>
</div>
<div class="PMenu">
  <h2>3A银行</h2>
  <div class="MenuItem">
    <ul>
      <li class="ReNameFolder"><a href="#">管理账户</a></li>
      <li class="ReNameFolder"><a href="#">交易管理</a></li>
      <li class="ReNameFolder"><a href="#">退款管理</a></li>
    </ul>
  </div>
</div>
</div>
</body>
</html>

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

本帖最近评分记录

经典论坛大妈威望 +1 历史打分 2005-12-28 00:48

珍视拥有的、遗忘失去的。

TOP

NETAny [楼主]

中级会员

帖子: 106
体力: 329
威望: 2
离线: 467 天

26^# 大中小发表于 2005-12-28 13:26 只看该作者

to:neyan

确实写错了，，呵

楼上厉害啊

http://www.LIVEPO.com

TOP

zozo98

中级会员

帖子: 115
体力: 426
威望: 1
离线: 243 天

发短消息

27^# 大中小发表于 2005-12-28 14:21 只看该作者

也贴一个，嘿嘿！

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
body {  }
body.menu  { background:#383757; margin:0px; font-family:"Arial", "Helvetica", "sans-serif";  font-size:8pt; }
table.menu  { border:0px; font-family:"Arial", "Helvetica", "sans-serif";  font-size:8pt; }
td.menu  { font-family:"Arial", "Helvetica", "sans-serif";  font-size:8pt; }
img.menu  { vertical-align:bottom; border:0px; }
a.menu  { font-family:"Arial", "Helvetica", "sans-serif";  font-size:8pt; color:#215DC6; text-decoration:none; }
a:hover.menu  { font-size:8pt;color:#428EFF;font-family:"Arial", "Helvetica", "sans-serif";  }
.sec_menu  { border-left:1px solid gray; border-right:1px solid gray; border-bottom:1px solid gray; overflow:hidden; background:#f8f8f8; }
.menu_title  {font-family:"Arial", "Helvetica", "sans-serif";  font-size:8pt }
.menu_title span  { position:relative; top:2px; left:8px; color:#494949; font-weight:bold;font-family:"Arial", "Helvetica", "sans-serif"; font-size:8pt}
.menu_title2  {font-family:"Arial", "Helvetica", "sans-serif";  font-size:8pt }
.menu_title2 span  { position:relative; top:2px; left:8px; color:#428EFF; font-weight:bold; cursor:hand;font-family:"Arial", "Helvetica", "sans-serif";  font-size:8pt}
a:link {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000000;
	text-decoration: none;
}
a:visited {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000000;
	text-decoration: none;
}
a:hover {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #CCCCCC;
	text-decoration: none;
}
</style>

<SCRIPT LANGUAGE="Javascript" DEFER="TRUE"> 
<!--
var menuinit=new Array(50),vers;//(don't change this)
for(i=0;i<51;i++)menuinit[i]=new Array(3);//(don't change this)
var bgimages_show = "http://www.sosaw.com/UploadFile/2005-12/20051228141320118.gif";
var bgimages_hide = "http://www.sosaw.com/UploadFile/2005-12/20051228141311995.gif";
var onemenu = 0; //open one menu at same time.1 is yes, 0 is no. default=1.
var speedmout = 100; //menu show speed(1~100;default=50) *the large the fast, but also come with more bump.
var speedmin = 100; //menu hide speed(1~100;default=50)
var developversion = true; //when false block all script error if any.
//setting of which menu should be showen. In this example you have 4 menu, which you can switch between "show" and "not show"
//if you want to add extra one, you should follow this order: "menuinit[n][1]=;" (in [a][b], b must be '1', a is the serial number of menu)
menuinit[1][1]="show";
menuinit[2][1]="not show";
menuinit[3][1]="not show";
////////////////////////!!!DO NOT CHANGE BELOW THIS LINE!!!!/////////////////////////////
//
var da=new Date();
var browser=new BrowserDetectLite();
var fstrun=1;
var op="";
var whichContinue="";
var whichOpen="";
var opp=0;
var opd=0;
var opc=0;
var sc=1;sd=1;
var mnunum=0;
var cacheObj,cacheMaxh,cacheObj2;
//----------------------------------------------------------------------------------------
function menuShow(obj,maxh,obj2)
{
var da=new Date();
if(fstrun==1){
 op="show";
 mountmfunc(0,0,0);
 obj2.background=bgimages_hide;
 obj.style.pixelHeight=2;
 obj.style.display='block'; 
 opc=6.18*(speedmout*0.01); //step length
 opp=Math.round(opc); //rounded step length
 opd=(maxh/opp)/100; //times
 sc=1;sd=opd;
 fstrun=0;
 cacheObj=obj;cacheMaxh=maxh;cacheObj2=obj2;
}else{
 if(op!="show") return false;
}
  if(obj.style.pixelHeight<maxh-opp)
  {
           if(opd>1){//for slow speed
              if(sd-sc<1){obj.filters.alpha.opacity+=1;sd+=opd;}
              sc++;
            }else{//for fast speed
              obj.filters.alpha.opacity+=Math.ceil(1/opd);
            }
            
        obj.style.pixelHeight+=opp;
	cacheObj=obj;cacheMaxh=maxh;cacheObj2=obj2;
	setTimeout('menuShow(cacheObj,cacheMaxh,cacheObj2)','5');
  }else{
        obj.style.pixelHeight=maxh;
        obj.filters.alpha.opacity=100;
        fstrun=1;
        op="";
        sc=1;sd=1;
        mountmfunc(1,1,1);
        return true;
  }
}
//----------------------------------------------------------------------------------------
function menuHide(obj,maxh,obj2)
{
da=new Date();
if(fstrun==1){
 op="hide";
 mountmfunc(0,0,0);
 obj2.background=bgimages_show;
 opc=6.18*(speedmout*0.01); //step length
 opp=Math.round(opc); 
 opd=((maxh-3)/opp)/100;
 sc=1;sd=opd;
 fstrun=0;
 cacheObj=obj;cacheMaxh=maxh;cacheObj2=obj2;
}else{
 if(op!="hide") return false;
}
  if(obj.style.pixelHeight-opp>1)
  { 
	    if(opd>1){
              if(sd-sc<1){obj.filters.alpha.opacity-=1;sd+=opd;}
              sc++;
            }else{
               obj.filters.alpha.opacity-=Math.ceil(1/opd)*0.38;
            }
            obj.style.pixelHeight-=opp;
	setTimeout('menuHide(cacheObj,cacheMaxh,cacheObj2)','5');
  }else{
        obj.style.pixelHeight=1;
        obj.style.display='none';
        obj.filters.alpha.opacity=0;
        fstrun=1;
        op="";
        sc=1;sd=1;
        mountmfunc(1,1,1);
        if(whichContinue && onemenu==1) whichContinue.click();
        return true;
  }
}
//----------------------------------------------------------------------------------------
function menuChange(obj,maxh,obj2)
{
  if(obj.style.pixelHeight>1)
  {
    menuHide(obj,maxh,obj2);
	whichOpen='';       
  }
  else
    if(whichOpen)
	{
	  whichContinue=obj2;
          whichOpen.click();
	}
	else
	{
	  menuShow(obj,maxh,obj2);
	  if(onemenu==1)whichOpen=obj2;
	  whichContinue='';
	}
}
//----------------------------------------------------------------------------------------
function mountmfunc(clk,mi,mo){
//var=1 mount, var=0 disable var=2 do nothing
//clk=mouse click function
//mi=mouse over function
//mo=mouse out function
if(clk==1){document.onclick=monclick;}else if(clk==0){document.onclick="return false;";}else{}
if(mi==1){document.onmousemove=monmouseover;}else if(mi==0){document.onmousemove="return false;";}else{}
if(mo==1){document.onmouseout=monmouseout;}else if(mo==0){document.onmouseout="return false;";}else{}
for(i=1;i<mnunum;i++){
eval("document.all.menuTitle"+i+".className='menu_title';");
}
}
//----------------------------------------------------------------------------------------
//[Public]
var regex=new RegExp("menuTitle\d*","i");
var regex1=new RegExp("[0-9]*$","i");
var boo=0;
//----------------------------------------------------------------------------------------
function monmouseover(){
if(event.srcElement.tagName!="TD" || boo==1) return false;
if(regex.test(event.srcElement.id)){
event.srcElement.className="menu_title2";
boo=1;
}
}
//----------------------------------------------------------------------------------------
function monmouseout(){
if(event.srcElement.tagName!="TD") return false;
if(regex.test(event.srcElement.id)){
event.srcElement.className="menu_title";
boo=0;
}
}
//----------------------------------------------------------------------------------------
function monclick(){
if(!browser.isIE5up || browser.isIE55) return true;
if(event.srcElement.tagName=="A") return true;
if(event.srcElement.tagName=="SPAN"){
if(regex.test(event.srcElement.parentNode.id)){
b=event.srcElement.parentNode.id.match(regex1);
codex="menuChange(menu" + b + "," + eval("menuinit[" + b + "][2]") + "," + event.srcElement.parentNode.id+ ")";
eval(codex);
}
}
if(regex.test(event.srcElement.id)){
b=event.srcElement.id.match(regex1);
codex="menuChange(menu" + b + "," + eval("menuinit[" + b + "][2]") + "," + event.srcElement.id+ ")";
eval(codex);
}
}
//----------------------------------------------------------------------------------------
function init(){
if (document.readyState!="complete") return false;
if(!browser.isIE5up || browser.isIE55) return false;
if(!developversion)window.onerror = function(){window.onerror = blockError;return true;};
var mccount=0;
var showornot;
reg=new RegExp("menu[0-9]{1,2}","i");
reg1=new RegExp("[0-9]*$","i");
for(i=0;i<document.all.length;i++){
if(reg.test(document.all[i].id)){
mnunum++;
s=document.all[i].id.match(reg1);
k=eval("document.all.menu" + s + ".children[0].offsetHeight"); //code to get the height
eval("menuinit[s][2]=k");
for(n=0;n<document.all[i].childNodes.length;n++){
if(document.all[i].childNodes.item(n).tagName=="SPAN"){
//document.all[i].childNodes.item(n).
}
}
eval("showornot=menuinit[s][1]");
switch (showornot){
case "show":
if(++mccount>1 && onemenu==1)alert("You do not supposed put on 2 active menu while 'onemenu' on. Check your setting or turn 'onemenu' to '0'");
if(onemenu==1)eval("whichOpen=menuTitle" + s);
document.all[i].style.filter+="alpha(Opacity=100)";
document.all[i].style.overflow="hidden";
document.all[i].style.height=k;
document.all[i].style.display="block";
eval('document.all.menuTitle'+mnunum+'.background="'+bgimages_hide+'"');
break;
case "not show":
document.all[i].style.filter+="alpha(Opacity=0)";
document.all[i].style.overflow="hidden";
document.all[i].style.height="1";
document.all[i].style.display="none";
eval('document.all.menuTitle'+mnunum+'.background="'+bgimages_show+'"');
break;
default: 
alert("Expect 'show' or 'not show' in setting section!");
}
}
}
}
//-----------------------------------------------------------------------------