散代码！一个多级菜单！[帮我up几次，代码长，3次放不下]

Question

function lib_checkMenu(){//用来检查菜单项的显示和样式
  if(this.owner.lastover!=null){
  if(this.owner.currentover.levelIndex==this.owner.lastover.levelIndex){
      if(this.owner.lastover.subs[0])this.owner.lastover.subs[0].panel.hideIt();
             this.owner.lastover.isover=false;
             this.owner.lastover.changeStyle();
 this.owner.currentover.isover=true;
 this.owner.currentover.changeStyle();
  }else if(this.owner.currentover.levelIndex<this.owner.lastover.levelIndex){
 if(this.owner.lastover.subs[0])this.owner.lastover.subs[0].panel.hideIt();
 for(i=0;i<(this.owner.lastover.levelIndex-this.owner.currentover.levelIndex);i++){
       this.owner.lastover.panel.hideIt();
   this.owner.lastover.isover=false;
   this.owner.lastover.changeStyle();
   this.owner.lastover=this.owner.lastover.parent;
 }
             this.owner.lastover.isover=false;
 this.owner.lastover.changeStyle();
 this.owner.currentover.isover=true;
 this.owner.currentover.changeStyle();
  }
  }
}
//change it's style when mouse over or leave it
function lib_changeStyle(){
     if(this.isover){
 this.css.backgroundColor=this.overcolor;
 //this.css.fontWeight='bold';
 this.css.borderRightWidth=0;
 }else{
  this.css.backgroundColor=this.bgcolor;
 // this.css.fontWeight='normal';
  if(this.owner.align=='Ver'||(this.owner.align=='Hor'&&this.levelIndex!=0)) this.css.borderRightWidth=1;
 }
 }
function lib_go(){
     if(this.link) location.href=this.link; 
 else return false;
}
/*----------------------------------------------------------------------
                             menu events
-----------------------------------------------------------------------*/
function lib_menuMOver(){ //1.change style |2.show submenu
  this.owner.currentover=this;
  this.isover=true;
      this.changeStyle(); 
  this.checkMenu()
      if(this.link) window.status=this.link;
  else window.status='';
  this.showSub()
  clearTimeout(this.owner.time);
 }
function lib_menuMOut(){//1.hide submenu
     this.owner.lastover=this;
     this.owner.time=setTimeout(this.owner.name+".hideAllSub()",600)
}function lib_menuMClick(){
   this.go()
}/******************************************
                             类MENU
*******************************************/
function TMenu(name){
  this.name=name;
  this.topmenu=new Array();
      this.items=new Array();//store all menu items order by create line;
  this.panel=new Array();
      this.stylecode="";
  this.htmlcode=""
      this.levelcount=0
  this.align='Hor'    // Hor水平菜单|| Ver 垂直菜单
  
  //...................................................................................................................................
      //define level style,whick include this menuitem;first-line client setting,otherwise use default setting;
  //if you wanna define every menuitem please :this.userLevlStyle=new Array();
  //if you wanna define every menulevel please :this.userItemStyle=new Array();
  //....................................................................................................................................
      this.userLevlStyle=new Array();
      this.userItemStyle=new Array();
  this.deftStyle=new Array();
      //菜单项属性
      this.deftStyle.itemheight=25;
      this.deftStyle.bgcolor='#ffffff';
  this.deftStyle.overcolor='#f7f7f7';
      this.deftStyle.fontcolor='#333366';
      this.deftStyle.fontsize=15;
      this.deftStyle.fontfamily='tahoma, arial,helvetica';
  this.deftStyle.border=1;
  this.deftStyle.bordercolor='#e1e1e1';
  this.deftStyle.borderstyle='dashed';
  this.deftStyle.img=0;
 
  //菜单容器属性
  this.deftStyle.leftwidth=20;
  this.deftStyle.leftcolor='#333366';
  this.deftStyle.rightwidth=14;
  this.deftStyle.rightcolor='#f7f7f7';
  this.deftStyle.topheight=20;
  this.deftStyle.bottomheight=20;
          this.deftStyle.panelfilter='progid:DXImageTransform.Microsoft.Fade(duration=0.5)';
          this.deftStyle.panelwidth=200;
          this.deftStyle.align='right';//extend...
          this.deftStyle.itemwidth=this.deftStyle.panelwidth-this.deftStyle.leftwidth-this.deftStyle.rightwidth-3*this.deftStyle.border;   this.createItem=lib_createItem;
  this.getObj=lib_getObj;
  this.makeStyleCode=lib_makeStyleCode;
  this.makeBodyCode=lib_makeBodyCode;
  this.hideAllSub=lib_hideAllSub;
  return this
}

Answer 1

/******************************************
                          类MENU ITEM
*********************************************/
function TMenuItem(owner,name,parent,caption,link,img){
  //properties
  this.name=name;
  this.owner=owner;
  this.isover=false;
  this.caption=caption;
  this.link=link;
  this.parent=new Object();
  this.subs=new Array();
  
  //define memuitem's parent and sub menuitem Object;
  if(parent!=''){
         this.visible=false;
       this.parent=owner.items[parent];
         this.parent.subs[this.parent.subs.length]=this;
 this.levelIndex=this.parent.levelIndex+1;
 this.owner.maxLevelIndex=this.levelIndex
 owner.levelcount=Math.max(owner.levelcount,this.levelIndex);
      } else{
         this.levelIndex=0;
             this.visible=true;
  }
  this.panelName= (this.levelIndex!=0)?this.parent.name:'topmenu'; 

 //retrieves  style for every elements
 var sty0=owner.deftStyle;
 var sty1=owner.userItemStyle;
 var sty2=owner.userLevlStyle;
   
 this.itemwidth=sty1['itemwidth']||sty2['itemwidth']||sty0['itemwidth'];
     this.itemheight=sty1['itemheight']||sty2['itemheight']||sty0['itemheight']; 
 this.bgcolor=sty1['bgcolor']||sty2['bgcolor']||sty0['bgcolor'];
     this.overcolor=sty1['overcolor']||sty2['overcolor']||sty0['overcolor'];
 this.fontcolor=sty1['fontcolor']||sty2['fontcolor']||sty0['fontcolor'];
 this.fontsize=sty1['fontsize']||sty2['fontsize']||sty0['fontsize'];
 this.fontfamily=sty1['fontfamily']||sty2['fontfamily']||sty0['fontfamily'];
     this.align=sty1['align']||sty2['align']||sty0['align'];
 this.border=sty1['border']||sty2['border']||sty0['border'];
 this.bordercolor=sty1['bordercolor']||sty2['bordercolor']||sty0['bordercolor'];
 this.borderstyle=sty1['borderstyle']||sty2['borderstyle']||sty0['borderstyle'];
     this.leftwidth=sty1['leftwidth']||sty2['leftwidth']||sty0['leftwidth'];
// this.leftcolor=sty1['leftcolor']||sty2['leftcolor']||sty0['leftcolor'];
// this.rightwidth=sty1['rightwidth']||sty2['rightwidth']||sty0['rightwidth'];
// this.rightcolor=sty1['rightcolor']||sty2['rightcolor']||sty0['rightcolor'];
// this.topheight=sty1['topheight']||sty2['topheight']||sty0['topheight'];
// this.bottomheight=sty1['bottomheight']||sty2['bottomheight']||sty0['bottomheight'];
 this.img=img||0;//sty1['img']||sty2['img']||sty0['img'];
      
     
  //create his panel object,infact it's work fine without panel,but I think that <div> is easy for some actions & integrity
  if(!owner.panel[this.panelName]) {
       //var panelName=(this.levelIndex!=0)?this.parent.name:'topmenu';
       this.panel=new TPanel(owner,this.panelName);
  // if(!owner.panel[this.panelName]){
   owner.panel[this.panelName]=this.panel;
   owner.panel[owner.panel.length]=this.panel;
   //}
 }else{
       this.panel=owner.panel[this.panelName];   
 }
  //events...
  this.onMouseOver=lib_menuMOver;
  this.onMouseOut=lib_menuMOut;
  this.onClick=lib_menuMClick;
  //methods...
  this.changeStyle=lib_changeStyle;
  this.showSub=lib_showSub;
  this.hideSub=lib_hideSub;
  this.go=lib_go;
  this.checkMenu=lib_checkMenu;      //this.setStyle();
  owner.items[name]=this
  if(parent==''){
      owner.topmenu[owner.topmenu.length]=this;
          owner.topmenu[name]=this;
  }
 
       if(!this.img) this.imgstr='';
   else this.imgstr='<img src="'+this.img+'" style="top:1px;left:1px;width:12px;height:15px;vertical-align:middle;" >';
       if(owner.align=='Hor'&&parent==''){
            this.html='<td id="td'+name+'" class="clItem'+this.name+'" style="border-right-width:0px;border-bottom-width:0px;">&nbsp;'+caption+'</td>'
   }else {
      this.html='<tr><td class="clPMiddle0" >&nbsp;'+this.imgstr+'</td> <td id="td'+name+'" class="clItem'+this.name+'">&nbsp;'+caption+'</td><td class="clPMiddle2">&nbsp;</td> </tr>';
   }      return this
}
/**************************************
                          类PANEL,菜单项的容器
***************************************/
function TPanel(owner,name){
  this.name=name;
  this.owner=owner;
  //retrieves  style for every elements
  var sty0=owner.deftStyle;
  var sty1=owner.userItemStyle;
  var sty2=owner.userLevlStyle;
      this.bgcolor=sty1['bgcolor']||sty2['bgcolor']||sty0['bgcolor'];
  this.filter=sty1['panelfilter']||sty2['panelfilter']||sty0['panelfilter'];
  this.itemheight=sty1['itemheight']||sty2['itemheight']||sty0['itemheight'];
  this.itemwidth=sty1['itemwidth']||sty2['itemwidth']||sty0['itemwidth'];
  this.width=sty1['panelwidth']||sty2['panelwidth']||sty0['panelwidth'];
      this.overcolor=sty1['overcolor']||sty2['overcolor']||sty0['overcolor'];
  this.leftwidth=sty1['leftwidth']||sty2['leftwidth']||sty0['leftwidth'];
  this.leftcolor=sty1['leftcolor']||sty2['leftcolor']||sty0['leftcolor'];
  this.rightwidth=sty1['rightwidth']||sty2['rightwidth']||sty0['rightwidth'];
  this.rightcolor=sty1['rightcolor']||sty2['rightcolor']||sty0['rightcolor'];
  this.topheight=sty1['topheight']||sty2['topheight']||sty0['topheight'];
  this.topcolor=sty1['topcolor']||sty2['topcolor']||sty0['topcolor'];
  this.bottomheight=sty1['bottomheight']||sty2['bottomheight']||sty0['bottomheight'];
  this.bottomcolor=sty1['bottomcolor']||sty2['bottomcolor']||sty0['bottomcolor'];
  this.border=sty1['border']||sty2['border']||sty0['border'];
  this.bordercolor=sty1['bordercolor']||sty2['bordercolor']||sty0['bordercolor'];
  this.borderstyle=sty1['borderstyle']||sty2['borderstyle']||sty0['borderstyle'];
  this.fontcolor=sty1['fontcolor']||sty2['fontcolor']||sty0['fontcolor'];
  this.fontsize=sty1['fontsize']||sty2['fontsize']||sty0['fontsize'];
  this.fontfamily=sty1['fontfamily']||sty2['fontfamily']||sty0['fontfamily'];   this.x=1;
  this.y=1;       //events....
   //this.onMouseOver=lib_panelMOver;
   //this.onMouseOut=lib_panelMOut;
      //methods....
  this.doFilter=lib_doFilter
  this.moveTo=lib_moveTo;
  this.moveBy=lib_moveBy;
  this.showIt=lib_showIt;
  this.hideIt=lib_hideIt;
  this.animate=makeAnimate;
}

Answer 2

function lib_doFilter(f){
      if(this.obj.filters[0]) this.obj.filters[0].Stop();
  else this.css.filter=f;
  this.obj.filters[0].Apply();
  this.showIt();
  this.obj.filters[0].Play();
}
/*************************************************
                                 库
*********************************************/
/*----------------------------------------------------------------------
                           function of TMenu
-----------------------------------------------------------------------*/function lib_createItem(name,parent,caption,link,img){//connect all menu items,each item is an object
 this.items[this.items.length]=new TMenuItem(this,name,parent,caption,link,img);
}//create his panel object,infact it's work fine without panel,but I think that <div> is easy for some actions & integrity
function lib_getObj(){
  if(!bw.bw) return alert('你的浏览器版本太低!请更换更高版本。')
     
  //get menuitem object
  for(i=0;i<this.items.length;i++){
       try{
      var idstr='td'+this.items[i].name;
          
  if(!bw.ns4) this.items[i].obj=bw.dom && document.getElementById(idstr)||bw.ie4 && document.all[idstr];
  else this.items[i].obj=document.layers[idstr]?document.layers[idstr]:0;
    
   this.items[i].css=bw.dom||bw.ie4?this.items[i].obj.style:this.items[i].obj;  
   this.items[i].x=this.items[i].obj.offsetLeft;
   this.items[i].y=this.items[i].obj.offsetTop;
   //add event
   
   this.items[i].obj.onclick=new Function(this.name+".items["+i+"].onClick()");
   this.items[i].obj.onmouseover=new Function(this.name+".items["+i+"].onMouseOver()");
   this.items[i].obj.onmouseout=new Function(this.name+".items["+i+"].onMouseOut()");
   }
   catch(x){
     
       return alert('对象:'+this.items[i].name+'并不存在,错误可能来自于设计之初 - 关闭脚本\n\n如果你使用Netscape请检查嵌套的<div>&<td>标签!');
   }
  }
      //get panel object
  for(i=0;i<this.panel.length;i++){
        try{
       var idstr='div'+this.panel[i].name
      
  if(!bw.ns4) this.panel[i].obj=bw.dom && document.getElementById(idstr)||bw.ie4 && document.all[idstr];
  else this.panel[i].obj=document.layers[idstr]?document.layers[idstr]:0;    this.panel[i].css=bw.dom||bw.ie4?this.panel[i].obj.style:this.panel[i].obj;  
   //get position
               this.panel[i].x=this.panel[i].obj.offsetLeft;
   this.panel[i].y=this.panel[i].obj.offsetTop;               this.panel[i].animate();
          }
  catch(x){
            return alert('对象:'+this.panel[i].name+'并不存在,错误可能来自于设计之初 - 关闭脚本\n\n如果你使用Netscape请检查嵌套的<div>&<td>标签!');
  }
  }}
//设置菜单的样式，首选用户自定义，否则使用默认
function lib_makeStyleCode(){
       var zindex=100;
       var code='<style>';
   var obj=new Object();
       //make style of menuitem
   for(i=0;i<this.items.length;i++){
       obj=this.items[i];
       code+='\n.clItem'+obj.name+'{height:'+obj.itemheight+'px;width:'+obj.itemwidth+'px;border-width:0px;border-bottom-width:'+obj.border+'px;border-right-width:'+obj.border+'px;border-color:'+obj.bordercolor+';border-bottom-style:'+obj.borderstyle+';border-right-style:'+obj.borderstyle+';font-family:'+obj.fontfamily+';font-size:'+obj.fontsize+'px;color:'+obj.fontcolor+';}';//word-break:break-all
   }
   //make style of menupanel
       for(i=0;i<this.panel.length;i++){
      obj=this.panel[i];
     var vis=i==0?'visibility:visible;':'visibility:hidden;';
          code+='\n.clDiv'+obj.name+'{position:absolute;width:'+obj.width+';background-color:'+obj.bgcolor+';zIndex:'
               +zindex+';cursor:pointer; cursor:hand;'+vis+'}'
   }//没有定义高度，使其自由伸缩
   obj=this.panel[0];
   //
   code+='\n.clPTop0{height:'+obj.topheight+'px;width:'+obj.leftwidth+'px;background-color:'+obj.leftcolor+';border-width:0px;border-bottom-width:'+obj.border+'px;border-right-with:'+obj.border+'px;border-right-color:black;border-bottom-style:'+obj.borderstyle+'}';
   code+='\n.clPTop1{height:'+obj.topheight+'px;width:'+obj.itemwidth+'px;border-width:0px;border-bottom-width:'+obj.border+'px;border-right-width:'+obj.border+'px;border-color:'+obj.bordercolor+';border-bottom-style:'+obj.borderstyle+';border-right-style:'+obj.borderstyle+';}';
   code+='\n.clPTop2{border-color:'+obj.bordercolor+';width:'+obj.rightwidth+'px;height:'+obj.topheight+'px;border-width:0px;background-color:'+obj.rightcolor+';}';
       //
   code+='\n.clPMiddle0{height:'+obj.itemheight+'px;width:'+obj.leftwidth+'px;background-color:'+obj.leftcolor+';border-width:0px;border-bottom-width:'+obj.border+'px;      border-bottom-style:'+obj.borderstyle+'}';
   
   code+='\n.clPMiddle2{border-color:'+obj.bordercolor+';width:'+obj.rightwidth+'px;height:'+obj.itemheight+'px;border-width:0px;background-color:'+obj.rightcolor+';}';
        //
   code+='\n.clPBottom0{height:'+obj.bottomheight+'px;width:'+obj.leftwidth+'px;background-color:'+obj.leftcolor+';border-top-color:'+obj.leftcolor+';border-width:0px;}';
   code+='\n.clPBottom1{border-color:'+obj.bordercolor+';height:'+obj.bottomheight+'px;width:'+obj.itemwidth+'px;border-width:0px;border-right-width:'+obj.border+'px;border-right-style:'+obj.borderstyle+';}';
   code+='\n.clPBottom2{border-color:'+obj.bordercolor+';width:'+obj.rightwidth+'px;height:'+obj.bottomheight+'px;border-width:0px;background-color:'+obj.rightcolor+';}';    code+='\n</style>';
       document.write(code); 
}
var menucode="";

Answer 3

function lib_makeBodyCode(){
      var htmlstr="";
      var p=this.panel[0]; 
  htmlstr+='\n<div id="div'+ p.name+'" class="clDiv'+p.name+'" ><table width="100%" bordercolor="black" border="1" cellspacing="0" cellpadding="0">';
  if(this.align=='Hor'){
       htmlstr+='<tr>';
            for(j=0;j<this.topmenu.length;j++){
  if(j==0)htmlstr+='<td style="border:0px;">&nbsp;<IMG SRC="apple.gif" WIDTH="12" HEIGHT="15" BORDER=0 ALT="llrock">&nbsp;</td>';//用来放一张图片
       htmlstr+=this.topmenu[j].html;
        }
   htmlstr+='</tr>';
  }else{
      htmlstr+='<tr><td class="clPTop0" >&nbsp;</td><td class="clPTop1">&nbsp;</td><td class="clPTop2" >&nbsp;</td> </tr>';
      for(j=0;j<this.topmenu.length;j++){
           if(j==0)htmlstr+='<tr><td class="clPTop0" >&nbsp;</td><td class="clPTop1" style="font-family:tahoma, arial,helvetica;font-size:15px;font-weight:bold;">&nbsp;导航菜单</td><td class="clPTop2" >&nbsp;</td> </tr>'
       htmlstr+=this.topmenu[j].html;
      }   
  htmlstr+='<tr><td class="clPBottom0">&nbsp;</td> <td class="clPBottom1"></td><td class="clPBottom2"></td></tr>'      }   
  htmlstr+='\n</table></div>';   //make other panel code
  for(i=1;i<this.panel.length;i++){
      var p=this.panel[i]; 
      htmlstr+='\n<div id="div'+ p.name+'" class="clDiv'+p.name+'" ><table width="100%" bordercolor="black" border="1" cellspacing="0" cellpadding="0">';
  htmlstr+='<tr><td class="clPTop0" >&nbsp;</td><td class="clPTop1">&nbsp;</td><td class="clPTop2" >&nbsp;</td> </tr>';
      for(j=0;j<this.items[p.name].subs.length;j++){
          htmlstr+=this.items[p.name].subs[j].html;   
  }
  htmlstr+='<tr><td class="clPBottom0">&nbsp;</td> <td class="clPBottom1">&nbsp;</td>  <td class="clPBottom2">&nbsp;</td></tr>'
  htmlstr+='\n</table></div>';
  }
     menucode=htmlstr;
 document.write(htmlstr)
 this.getObj();//创建代码之后得到浏览器对象
}
//-->
</SCRIPT>
</HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
 oMenu=new TMenu('oMenu');
 oMenu.createItem('a','','CSDN','','apple.gif')
      oMenu.createItem('a1','a','Javascript','','apple.gif')
       oMenu.createItem('a11','a1','www.llrock.com','www.llrock.com')
  oMenu.createItem('a2','a','Delphi')
      oMenu.createItem('a21','a2','')
      oMenu.createItem('a3','a','C++')
 oMenu.createItem('b','','edit')
   oMenu.createItem('b1','b','top2-sub1')
   oMenu.createItem('b2','b','top2-sub2')
 oMenu.createItem('c','','view')
   oMenu.createItem('c1','c','top3-sub1')
   oMenu.createItem('d','','help')
   oMenu.createItem('e','','windows')
   oMenu.createItem('f','','tools') oMenu.makeStyleCode();
oMenu.makeBodyCode();oMenu.panel[0].moveTo(100,200)
//-->
</SCRIPT>
<INPUT TYPE="button" onclick="oMenu.panel[0].startAni(300,100);" value="move with animate">
</BODY>
</HTML>

Answer 4

首先感谢 fengqingyundan(风情云淡)妹妹，好心的妹妹，你会有好运的！
终于贴完了，心情不好，散代码，昨天散了一个，好像大家不喜欢，今天再来一个，我作完这个之后没有做多大改进，我用了一些高版本的css属性，所以在递版本ie中有可能不能正常工作，我预留了很多扩展的地方，但是没时间搞，主要是海想做其他的，呵呵·！

Answer 5

我用的是ie6，没有问题，如果你无法用，修改makeStyle()函数里的样式，找一找，把不支持的样式去掉，其他地方不涉及版本问题，我用ns4.6测试了通过！事不是考错了，一共四部分

Answer 6

llrock (百乐宝) .呵呵，我也看看你的大作。学习学习

Answer 7

thank u a lot!
我是菜鸟，嘿嘿！

Answer 8

可以发到我的email吗：[email protected]

Answer 9

？？？考了不久行了吗?为什么要发到你的email，不懂

Answer 10

[email protected]渴望得到一份多谢

Answer 11

怪了，怎么我把代码粘贴下来之后是一个“点击Button之后会移动的菜单啊？”