[共享]:自己编的一个Javascript菜单程序，没有子菜单层数的限制：）

Question

由于CSDN的帖子字数限制，所以分开发，以下是第二部分：<script>
// 下级菜单的指示图标的地址，如果没有，就设为空。var MENU_EXPAND_LOGO_PATH = 'http://www.bokesoft.com/logistic/images/menuexpand.gif'; function menuItem(nID,nPID,sText,sHref)
{
this.id=nID;
this.pid=nPID;
this.text=sText;
this.href=sHref;
this.hasChild=false;
}function whichItem()
{
var e = event.srcElement;
//while (e.tagName != "TD")
// e = e.parentElement
return e;
}function CalcTotalLeft(item)
{
var nR=0;
do
{
if(item.offsetLeft)
nR+=item.offsetLeft;
}while(item=item.parentNode) return nR;
}function CalcTotalTop(item)
{
var nR=0;
do
{
if(item.offsetTop)
{
nR+=item.offsetTop;
}
if(item.className=='subMenuSlot')
break;
}while(item=item.parentNode) return nR;
}var body=document.all.tags("BODY")[0];var menu=new Array();function BuildMenuData()
{
var i=0,level=-1;
var stack=new Array();
LevelDown();
menu[i++]=new menuItem(i-1,stack[level],'首页','/logistic');
menu[i++]=new menuItem(i-1,stack[level],'中心简介','/logistic/intro');
menu[i++]=new menuItem(i-1,stack[level],'教育培训','/logistic/education');
LevelDown();
menu[i++]=new menuItem(i-1,stack[level],'师资介绍','/logistic/education/01.asp');
menu[i++]=new menuItem(i-1,stack[level],'教学环境','/logistic/education/02.asp');
menu[i++]=new menuItem(i-1,stack[level],'教学方式','/logistic/education/03.asp');
menu[i++]=new menuItem(i-1,stack[level],'个人培训课程','/logistic/education/04.asp');
LevelDown();
menu[i++]=new menuItem(i-1,stack[level],'物流岗位资格人证初级培训班','/logistic/education/04.asp#1');
menu[i++]=new menuItem(i-1,stack[level],'物流岗位资格人证中级培训班','/logistic/education/04.asp#2');
menu[i++]=new menuItem(i-1,stack[level],'企业资源计划管理初级班','/logistic/education/04.asp#3');
menu[i++]=new menuItem(i-1,stack[level],'企业资源计划管理中级班','/logistic/education/04.asp#4');
LevelUp();
menu[i++]=new menuItem(i-1,stack[level],'企业培训课程','/logistic/education/05.asp');
LevelDown();
menu[i++]=new menuItem(i-1,stack[level],'现代物流高级研修班','/logistic/education/05.asp#1');
menu[i++]=new menuItem(i-1,stack[level],'现代物流行业培训课程','/logistic/education/05.asp#2');
menu[i++]=new menuItem(i-1,stack[level],'现代物流单科培训课程','/logistic/education/05.asp#3');
LevelUp();
menu[i++]=new menuItem(i-1,stack[level],'ERP培训课程','/logistic/education/06.asp');
menu[i++]=new menuItem(i-1,stack[level],'报名细则','/logistic/education/07.asp');
menu[i++]=new menuItem(i-1,stack[level],'在线报名','/logistic/education/register.asp');
LevelUp();
menu[i++]=new menuItem(i-1,stack[level],'物流资讯','/logistic/info');
LevelDown();
menu[i++]=new menuItem(i-1,stack[level],'物流政策','/logistic/info/01');
menu[i++]=new menuItem(i-1,stack[level],'物流新闻','/logistic/info/02');
menu[i++]=new menuItem(i-1,stack[level],'综合物流新闻','/logistic/info/03');
menu[i++]=new menuItem(i-1,stack[level],'陆上运输动态','/logistic/info/04');
menu[i++]=new menuItem(i-1,stack[level],'空运水运动态','/logistic/info/05');
menu[i++]=new menuItem(i-1,stack[level],'项目新闻','/logistic/info/06');
menu[i++]=new menuItem(i-1,stack[level],'综合经贸动态','/logistic/info/07');
LevelUp();
menu[i++]=new menuItem(i-1,stack[level],'咨询服务','/logistic/consulting');
LevelDown();
menu[i++]=new menuItem(i-1,stack[level],'服务项目介绍','/logistic/consulting/01.asp');
menu[i++]=new menuItem(i-1,stack[level],'客户列表','/logistic/consulting/02.asp');
menu[i++]=new menuItem(i-1,stack[level],'成功案例','/logistic/consulting/03.asp');
LevelUp();
menu[i++]=new menuItem(i-1,stack[level],'下载区','/logistic/download');
LevelDown();
menu[i++]=new menuItem(i-1,stack[level],'培训课件下载','/logistic/download/01.asp');
menu[i++]=new menuItem(i-1,stack[level],'相关资料下载','/logistic/download/02.asp');
LevelUp();
menu[i++]=new menuItem(i-1,stack[level],'联系我们','/logistic/contact');
LevelDown();
menu[i++]=new menuItem(i-1,stack[level],'联系方式列表','/logistic/contact/01.asp');
menu[i++]=new menuItem(i-1,stack[level],'管理员信箱','/logistic/contact/02.asp');
LevelUp();
LevelUp();

function LevelDown()
{
stack.push(i-1);
level++;
if(level-1!=-1)
menu[stack[level]].hasChild=true;
}

function LevelUp()
{
level--;
stack.pop();
}

}

Answer 1

由于CSDN的帖子字数限制，所以分开发，以下是第三部分：function BuildMenu()
{
var i=0;
for(;i<menu.length;i++)
{
if(menu[i].pid==-1)
{
var item=document.createElement('div');
item.className='topLevelNormal';

item.name=item.id='item'+menu[i].id;
item.MenuID=menu[i].id;
item.PID=menu[i].pid;

item.innerText=menu[i].text;
item.attachEvent("onmouseover",menu_onmouseover)
item.attachEvent("onmouseout",menu_onmouseout)
item.attachEvent("onclick",menu_onclick)
TopMenuSpan.insertAdjacentElement("beforeEnd",item);
if(menu[i].hasChild)
{
item.ChildSlotName=BuildSubMenu(menu[i].id,'bottom');
}
}
}
}function BuildSubMenu(pid,direction)
{
var pitem=document.all('item'+pid);
var slot=document.createElement('div');

slot.name=slot.id='slot'+pid;
slot.MenuID=pid;
slot.PID=pitem.PID;

slot.className='subMenuSlot';
slot.style.visibility='hidden';
var i;
for(i=0;i<menu.length;i++)
if(menu[i].pid==pid)
{
var table=document.createElement('table');
table.border=0;
table.cellSpacing=0;
var item=table.insertRow().insertCell();

item.name=item.id='item'+menu[i].id;
item.MenuID=menu[i].id;
item.PID=menu[i].pid;

item.innerText=menu[i].text;
item.className='subMenuItemNormal';
item.attachEvent("onmouseover", menu_onmouseover)
item.attachEvent("onmouseout", menu_onmouseout)
item.attachEvent("onclick",menu_onclick)
item.noWrap=true;

// 插入下级菜单指示标记
if(menu[i].hasChild)
{
item.background=MENU_EXPAND_LOGO_PATH;
} slot.insertAdjacentElement("beforeEnd",table);
}
TopMenuSpan.insertAdjacentElement("beforeEnd",slot);

// 调整尺寸
var items=slot.all.tags('TABLE');
var maxWidth=slot.offsetWidth;
for(i=0;i<items.length;i++)
items[i].style.width=maxWidth; // 调整位置
if(direction=='bottom')
{
slot.style.left=CalcTotalLeft(pitem);
slot.style.top=CalcTotalTop(pitem)+pitem.offsetHeight;
}
if(direction=='right')
{
slot.style.left=CalcTotalLeft(pitem)+pitem.offsetWidth;
slot.style.top=CalcTotalTop(pitem);
}


// 创建下级菜单
for(i=0;i<menu.length;i++)
{
item=document.all('item'+menu[i].id);
if(menu[i].pid==pid&&menu[i].hasChild)
{
item.ChildSlotName=BuildSubMenu(menu[i].id,'right');
}
} return slot.name;
}var timeHandle=0;
var timeout=250;
var menustack=new Array();function menu_onmouseover()
{
var item=whichItem();
var className;
if(item.PID==-1)
className='topLevelHover';
else
className='subMenuItemHover'; item.className=className;
window.status=menu[item.MenuID].text;

while(menustack.length>0 && menustack[menustack.length-1].MenuID!=item.PID)
{
var slot=menustack.pop();
slot.style.visibility='hidden';
}

if(item.ChildSlotName)
{
var slottodisplay=document.all(item.ChildSlotName);
menustack.push(slottodisplay);
slottodisplay.style.visibility='visible';
}

window.clearTimeout(timeHandle);
}function menu_onmouseout()
{
var item=whichItem();
if(item.PID==-1)
className='topLevelNormal';
else
className='subMenuItemNormal'; item.className=className;
window.clearTimeout(timeHandle);
timeHandle=window.setTimeout('ClearAll()',timeout);
}function menu_onclick()
{
var item=whichItem();
window.navigate(menu[item.MenuID].href);
window.clearTimeout(timeHandle);
timeHandle=window.setTimeout('ClearAll()',timeout);
}function ClearAll()
{
while(menustack.length>0)
{
var item=menustack.pop();
item.style.visibility='hidden';
}
window.status='就绪';
}function Init()
{
BuildMenuData();
BuildMenu();
}function TRACE(text)
{
debugpad.innerHTML+=text+'<BR>';
}window.onload=Init;
</script>
<body>
<div style="width:100%;height:100;background-color:#666666"></div>
<div style="width:100%;background-color:#f1f1f1;" name="TopMenuSpan" id="TopMenuSpan"></div>
<div name="debugpad" id="debugpad"></div>
<p>
本程序由 <a href="mailto:[email protected]">Phivex Lee ( [email protected] )</a> 编制，如引用，请注明出处。
</p>
</body></html>

Answer 2

OH，忘了说，请用 Micro$oft Internet Explorer 5.5 以上版本查看：）

Answer 3

好
提点建议：
生成的菜单能不能从一个文件里读取，这样菜单变化也不用改次文件了。
如：1.'首页','/logistic'
1.1'首页下','/...'
................

Answer 4

这个嘛。呵呵。其实如果你把脚本提取出来，放在单独的JS文件里面，然后在每个HTML页面里面做引用，效果也是一样的呀。呵呵，不过呢，我接受你的建议！呵呵，0.2版本里面就加这个功能：）谢谢哦！

Answer 5

??倒贴分都没人看这帖？！~晕~~以后再也不在CSDN上发这样的东西了。

Answer 6

http://expert.csdn.net/Expert/topic/1683/1683886.xml?temp=.0484125你看看这个菜单，是否比你的效果好一点，呵呵~~
不过我不知道怎么找出来那个子菜单