~~~~如何做多极動態下拉菜單？？？？

自己做的，有bug，ie5不能正常工作，是那个关于text的css高的鬼，小心，你可以做横向菜单和纵向菜单，注意不能跨越帧！！！
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT=""><SCRIPT LANGUAGE="JavaScript">
<!--
function lib_bwcheck(){ //为了提高适用性，必须的除非你打算在一种浏览器中浏览
this.ver=navigator.appVersion; 
this.agent=navigator.userAgent
this.dom=document.getElementById?1:0
this.win = (navigator.appVersion.indexOf("Win")>0);
    this.xwin = (navigator.appVersion.indexOf("X11")>0);
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0;
this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom)?1:0;
this.ie4=(document.all && !this.dom)?1:0;
this.ie=this.ie4||this.ie5||this.ie6
this.mac=this.agent.indexOf("Mac")>-1
this.opera5=this.agent.indexOf("Opera 5")>-1
this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0; 
this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5 || this.dom)
return this
}
var bw=new lib_bwcheck()   //实例化一个browser check对象
/*******************************************************************
                                        更换alert提示方法，美观      
*******************************************************************/
function inf(str){}
/*************************************************************************   
                                     lab_ani  
**************************************************************************/var aoa = new Array();
var ANICOUNT = -1;
var ANIMODE = true;function makeAnimate() {
this.aoa = aoa.length;
aoa[aoa.length] = this;
this.animating = false;
this.StartX = 0;
this.StartY = 0;
this.EndX = 0;
this.EndY = 0;
this.EndY = 0;
this.aniSpeed =18;
this.timeOut = null;
this.aniExe = "";
this.startAni = startAni;
if(this.state && this.state.length) this.ani = checkAni2;
else this.ani = checkAni1;
}function startAni( endx, endy, aniSpeed) {
if(ANIMODE) {
this.animating = true;
this.StartX = this.x;
this.StartY = this.y;
this.EndX = endx;
this.EndY = endy;
this.aniSpeed = (aniSpeed!=null) ? aniSpeed : this.aniSpeed;
if(this.timeOut != null) {
clearTimeout(this.timeOut);
    ANICOUNT--;
    }
    ANICOUNT++;
    this.ani();
}else {
this.EndX = endx;
this.EndY = endy;
this.moveToXY(endx, endy);
}
}
function checkAni1() {
if (this.EndX > this.StartX) {
this.x += Math.floor((this.EndX - this.x) / this.aniSpeed) + 1;
if (this.x > this.EndX) this.x = this.EndX;
}else {
this.x += Math.floor((this.EndX - this.x) / this.aniSpeed) - 1;
if (this.x < this.EndX) this.x = this.EndX;
}
if (this.EndY > this.StartY) {
this.y += Math.floor((this.EndY - this.y) / this.aniSpeed) + 1;
if (this.y > this.EndY) this.y = this.EndY;
}else {
this.y += Math.floor((this.EndY - this.y) / this.aniSpeed) - 1;
if (this.y < this.EndY) this.y = this.EndY;
}
this.moveTo(this.x,this.y);
if (this.x != this.EndX || this.y != this.EndY ) {
this.timeOut = eval("setTimeout('aoa[" + this.aoa + "].ani()',10)");
}else {
clearTimeout(this.timeOut);
this.timeOut = null;
this.animating = false;
ANICOUNT--;
if(this.aniExe){
eval(this.aniExe);
this.aniExe = "";
}
}
}function checkAni2() {
if (this.EndX > this.StartX) {
this.x += Math.floor((this.EndX - this.x) / this.aniSpeed) + 1;
if (this.x > this.EndX) this.x = this.EndX;
}else {
this.x += Math.floor((this.EndX - this.x) / this.aniSpeed) - 1;
if (this.x < this.EndX) this.x = this.EndX;
}
if (this.EndY > this.StartY) {
this.y += Math.floor((this.EndY - this.y) / this.aniSpeed) + 1;
if (this.y > this.EndY) this.y = this.EndY;
}else {
this.y += Math.floor((this.EndY - this.y) / this.aniSpeed) - 1;
if (this.y < this.EndY) this.y = this.EndY;
}
this.state[this.activestate].moveToXY(this.x,this.y);
if (this.x != this.EndX || this.y != this.EndY ) {
this.timeOut = eval("setTimeout('aoa[" + this.aoa + "].ani()',10)");
}else {
clearTimeout(this.timeOut);
this.timeOut = null;
this.animating = false;
ANICOUNT--;
if(this.aniExe){
eval(this.aniExe);
    this.aniExe = "";
}
if(this.state && this.state.length) {
for(var i=0; i<this.state.length; i++) {
if(i!=this.activestate) this.state[i].moveToXY(this.EndX, this.EndY);
}
}
}
}
/*----------------------------------------------------------------------
                            function of layer
-----------------------------------------------------------------------*/function lib_moveTo(x,y){
    this.x=x;
this.y=y;
this.css.left=x;
this.css.top=y
}function lib_moveBy(x,y){
     this.moveTo(this.x+x,this.y+y)
}function lib_showIt(){
     this.css.visibility="visible";
 this.visible=true;
}function lib_hideIt(){
     this.css.visibility="hidden";
 this.visible=false;
}function lib_showSub(){
    var x=this.panel.x+this.panel.width;
    var y=this.panel.y+this.y;
if(this.owner.align=='Hor'&&this.levelIndex==0){
     x=this.panel.x+this.x-this.leftwidth+5;
 y=this.panel.y+this.itemheight;
}
try{
       this.subs[0].panel.moveTo(x,y);
   this.subs[0].panel.doFilter(this.subs[0].panel.filter);//使用滤镜显示子菜单，否则使用下面
  // this.subs[0].panel.showIt();
   this.visible=true;
}
catch(x){
   return
}
}function lib_hideSub(){
   try{
      this.subs[0].panel.hideIt();
  this.visible=false;
   }
   catch(x){
      return
   }
}
function lib_hideAllSub(){
   
   for(i=1;i<this.panel.length;i++){
        this.panel[i].hideIt()
   }
   for(i=0;i<this.items.length;i++){
       this.items[i].isover=false;
   this.items[i].changeStyle();
   }}

解决方案 »

  1.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE> New Document </TITLE>
    <META NAME="Generator" CONTENT="EditPlus">
    <META NAME="Author" CONTENT="">
    <META NAME="Keywords" CONTENT="">
    <META NAME="Description" CONTENT=""><SCRIPT LANGUAGE="JavaScript">
    <!--
    function lib_bwcheck(){ //为了提高适用性，必须的除非你打算在一种浏览器中浏览
    this.ver=navigator.appVersion; 
    this.agent=navigator.userAgent
    this.dom=document.getElementById?1:0
    this.win = (navigator.appVersion.indexOf("Win")>0);
        this.xwin = (navigator.appVersion.indexOf("X11")>0);
    this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0;
    this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom)?1:0;
    this.ie4=(document.all && !this.dom)?1:0;
    this.ie=this.ie4||this.ie5||this.ie6
    this.mac=this.agent.indexOf("Mac")>-1
    this.opera5=this.agent.indexOf("Opera 5")>-1
    this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0; 
    this.ns4=(document.layers && !this.dom)?1:0;
    this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5 || this.dom)
    return this
    }
    var bw=new lib_bwcheck()   //实例化一个browser check对象
    /*******************************************************************
                                            更换alert提示方法，美观      
    *******************************************************************/
    function inf(str){}
    /*************************************************************************   
                                         lab_ani  
    **************************************************************************/var aoa = new Array();
    var ANICOUNT = -1;
    var ANIMODE = true;function makeAnimate() {
    this.aoa = aoa.length;
    aoa[aoa.length] = this;
    this.animating = false;
    this.StartX = 0;
    this.StartY = 0;
    this.EndX = 0;
    this.EndY = 0;
    this.EndY = 0;
    this.aniSpeed =18;
    this.timeOut = null;
    this.aniExe = "";
    this.startAni = startAni;
    if(this.state && this.state.length) this.ani = checkAni2;
    else this.ani = checkAni1;
    }function startAni( endx, endy, aniSpeed) {
    if(ANIMODE) {
    this.animating = true;
    this.StartX = this.x;
    this.StartY = this.y;
    this.EndX = endx;
    this.EndY = endy;
    this.aniSpeed = (aniSpeed!=null) ? aniSpeed : this.aniSpeed;
    if(this.timeOut != null) {
    clearTimeout(this.timeOut);
        ANICOUNT--;
        }
        ANICOUNT++;
        this.ani();
    }else {
    this.EndX = endx;
    this.EndY = endy;
    this.moveToXY(endx, endy);
    }
    }
    function checkAni1() {
    if (this.EndX > this.StartX) {
    this.x += Math.floor((this.EndX - this.x) / this.aniSpeed) + 1;
    if (this.x > this.EndX) this.x = this.EndX;
    }else {
    this.x += Math.floor((this.EndX - this.x) / this.aniSpeed) - 1;
    if (this.x < this.EndX) this.x = this.EndX;
    }
    if (this.EndY > this.StartY) {
    this.y += Math.floor((this.EndY - this.y) / this.aniSpeed) + 1;
    if (this.y > this.EndY) this.y = this.EndY;
    }else {
    this.y += Math.floor((this.EndY - this.y) / this.aniSpeed) - 1;
    if (this.y < this.EndY) this.y = this.EndY;
    }
    this.moveTo(this.x,this.y);
    if (this.x != this.EndX || this.y != this.EndY ) {
    this.timeOut = eval("setTimeout('aoa[" + this.aoa + "].ani()',10)");
    }else {
    clearTimeout(this.timeOut);
    this.timeOut = null;
    this.animating = false;
    ANICOUNT--;
    if(this.aniExe){
    eval(this.aniExe);
    this.aniExe = "";
    }
    }
    }function checkAni2() {
    if (this.EndX > this.StartX) {
    this.x += Math.floor((this.EndX - this.x) / this.aniSpeed) + 1;
    if (this.x > this.EndX) this.x = this.EndX;
    }else {
    this.x += Math.floor((this.EndX - this.x) / this.aniSpeed) - 1;
    if (this.x < this.EndX) this.x = this.EndX;
    }
    if (this.EndY > this.StartY) {
    this.y += Math.floor((this.EndY - this.y) / this.aniSpeed) + 1;
    if (this.y > this.EndY) this.y = this.EndY;
    }else {
    this.y += Math.floor((this.EndY - this.y) / this.aniSpeed) - 1;
    if (this.y < this.EndY) this.y = this.EndY;
    }
    this.state[this.activestate].moveToXY(this.x,this.y);
    if (this.x != this.EndX || this.y != this.EndY ) {
    this.timeOut = eval("setTimeout('aoa[" + this.aoa + "].ani()',10)");
    }else {
    clearTimeout(this.timeOut);
    this.timeOut = null;
    this.animating = false;
    ANICOUNT--;
    if(this.aniExe){
    eval(this.aniExe);
        this.aniExe = "";
    }
    if(this.state && this.state.length) {
    for(var i=0; i<this.state.length; i++) {
    if(i!=this.activestate) this.state[i].moveToXY(this.EndX, this.EndY);
    }
    }
    }
    }
    /*----------------------------------------------------------------------
                                function of layer
    -----------------------------------------------------------------------*/function lib_moveTo(x,y){
        this.x=x;
    this.y=y;
    this.css.left=x;
    this.css.top=y
    }function lib_moveBy(x,y){
         this.moveTo(this.x+x,this.y+y)
    }function lib_showIt(){
         this.css.visibility="visible";
     this.visible=true;
    }function lib_hideIt(){
         this.css.visibility="hidden";
     this.visible=false;
    }function lib_showSub(){
        var x=this.panel.x+this.panel.width;
        var y=this.panel.y+this.y;
    if(this.owner.align=='Hor'&&this.levelIndex==0){
         x=this.panel.x+this.x-this.leftwidth+5;
     y=this.panel.y+this.itemheight;
    }
    try{
           this.subs[0].panel.moveTo(x,y);
       this.subs[0].panel.doFilter(this.subs[0].panel.filter);//使用滤镜显示子菜单，否则使用下面
      // this.subs[0].panel.showIt();
       this.visible=true;
    }
    catch(x){
       return
    }
    }function lib_hideSub(){
       try{
          this.subs[0].panel.hideIt();
      this.visible=false;
       }
       catch(x){
          return
       }
    }
    function lib_hideAllSub(){
       
       for(i=1;i<this.panel.length;i++){
            this.panel[i].hideIt()
       }
       for(i=0;i<this.items.length;i++){
           this.items[i].isover=false;
       this.items[i].changeStyle();
       }}
      

  2.   

    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'    // H:horizontal|| V:vertical 
      
      //....................
          //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
    }