跨浏览器支持的多级导航菜单(纯Javascript脚本)

前段时间写的JavaScript 跨浏览器 多级导航菜单，现在把它拿出来与大家共享。

本程序主要是实现页面导航菜单的实现，实现数据与程序的分离，数据采取Array数组的形式存储

当然必要的时候也可以用XML，或者是ASP.NET动态的从数据库中读取。样式表可以自定义，用的时候只需要

在一个DIV中调用menu()函数即可实现下拉导航菜单。

菜单的数据结构是这样的：

   ID  (菜单ID)

   Name (菜单名称)

   URL   (URL)

   PreID   (上级ID)

   EnableLink  (是否有链接)

 

主要包括以下文件

down_menu.js

down_menu.css

doun_menu.htm(测试页)

 

另外还用到了少量的prototype.js函数。

 

/*

//====================================================

down_menu.js

DMenu : v1.0  2007-7-30

Author : Febird

//====================================================

*/

//====================================================

//Menu Data Array

//====================================================

 

var _R =8+1;

var dataArray=new Array(_R);

for(i=0;i<dataArray.length;i++)

{

 dataArray[i]=new Array();

 

}

 

dataArray[1][0]=1;

dataArray[1][1]="综合";

dataArray[1][2]="";

dataArray[1][3]=0;

dataArray[1][4]=false;

 

dataArray[2][0]=2;

dataArray[2][1]="娱乐";

dataArray[2][2]="";

dataArray[2][3]=0;

dataArray[2][4]=false;

 

dataArray[3][0]=3;

dataArray[3][1]="程序";

dataArray[3][2]="";

dataArray[3][3]=0;

dataArray[3][4]=false;

 

dataArray[4][0]=4;

dataArray[4][1]="新浪网";

dataArray[4][2]="http://www.sina.com";

dataArray[4][3]=2;

dataArray[4][4]=true;

 

dataArray[5][0]=5;

dataArray[5][1]="搜狐网";

dataArray[5][2]="http://www.sohu.com";

dataArray[5][3]=2;

dataArray[5][4]=true;

 

dataArray[6][0]=6;

dataArray[6][1]="CSDN";

dataArray[6][2]="http://www.csdn.net";

dataArray[6][3]=3;

dataArray[6][4]=true;

 

dataArray[7][0]=7;

dataArray[7][1]="搜狐体育";

dataArray[7][2]="http://sports.sohu.com";

dataArray[7][3]=5;

dataArray[7][4]=true;

 

dataArray[8][0]=8;

dataArray[8][1]="搜狐图片";

dataArray[8][2]="http://pp.sohu.com";

dataArray[8][3]=5;

dataArray[8][4]=true;

 

//====================================================

 

//====================================================

 

function getDataByPreId( preId)

{

  var arr=new Array();

  var t=dataArray; 

  var j=0;

    for(var i=0;i<t.length;i++)

    {

        if(t[i][3]==preId) arr[j++]=t[i];

    }

   return arr;

 

}

 

//====================================================

 

//====================================================

 

 

var menuStr="";

function writeMenu(inId)

{ 

   var tempStr;

   var c_name="",c_id="";   

   var subItems=getDataByPreId(inId);

   if(subItems.length>0)

   {

      if (inId==0){c_name="mm";c_id="mainid";} else{c_name="ms";c_id="c"+inId; }

       tempStr="<div  id='"+c_id+"' class='"+c_name+"c' >";

      for(var i=0;i<subItems.length;i++) 

     {

      

         var url="";

        if(subItems[i][4])

        {

         url="onclick=\"window.location.href='"+subItems[i][2]+"'\"";   //or other express like "window.open & parent.href "

        

        }

       tempStr+="<div  id="+subItems[i][0]+" class='"+c_name+"_0' "+ url

       +"onmouseover='subShowAttr(this,true)'  onmouseout ='subShowAttr(this,false)' >"+subItems[i][1]+"</div>"

     

     }

      tempStr+="</div>";

      menuStr+=tempStr;

     for(i=0;subItems.length;i++)  

      { 

      try{ writeMenu(subItems[i][0]);}catch(e){break;}

    

      }

  }

}

 

function  menu()

{

writeMenu(0);

document.write(menuStr);

}

//====================================================

 

//====================================================

 

 

 

 

var mscArray=new Array();

var num=0;

function getAllmsc(Id) //only   use  after body init;

{       

      var subItems=getDataByPreId(Id);  

     for(i=0;i<subItems.length;i++)

      {    

             

          if(getDataByPreId(subItems[i][0]).length>0)

          {

             mscArray[num]="c"+subItems[i][0];           

             num++;         

          }   

      

      }  

       for(i=0;i<subItems.length;i++)

     {

        if(getDataByPreId(subItems[i][0]).length>0)

         {

            try{ getAllmsc(subItems[i][0]);}catch(e){break;}   

        }

     }

}

 

function hideSubAll(o)   //use like hideSubAll(this);

{ 

  var hideFather=dataArray[o.id][3];

   getAllmsc(hideFather);

   for (var i=0;i<mscArray.length;i++)

   {

      $(mscArray[i]).style.visibility="hidden";

   }

}

 

//====================================================

 

//====================================================

 

 

var mouseOn=0;

 

function subShowAttr(o,pr)

{

     var  cid="c"+o.id;

   if(pr)

      {

        o.className=o.className.replace("0","1");

       try

         {

              //hideSubAll(o);//hide all menu containner belong  to this                        

             mouseOn++;

             var x=o.parentNode.childNodes;

             for(i=0;i<x.length;i++)

              {

                try{ $("c"+x[i].id).style.visibility="hidden";}catch(e){}

              }

                                                             

             $(cid).style.top=(dataArray[o.id][3]==0)?(o.offsetTop+o.offsetHeight):(o.offsetTop+o.parentNode.offsetTop);

             $(cid).style.left=(dataArray[o.id][3]==0)?o.offsetLeft:(o.parentNode.offsetLeft+o.offsetWidth);          

             $(cid).style.visibility="visible";

           

        }

       catch(e) { }

            

      }

  else {

        o.className=o.className.replace("1","0");

         mouseOn--;      

      }     

}

 

 

function hideAll()

{

    if(mouseOn<=0)

  {

    var ml = document.getElementsByTagName("DIV");

    for (i=0; i<ml.length; i++)

     {

       if (ml[i].className=="msc")

      {

        ml[i].style.visibility="hidden";

       }

       }

   }

  setTimeout("hideAll()",10); 

}

 

hideAll();

 

 

 

//====================================================

 

//====================================================

 

 

//====================================================

以下为 down_menu.htm

//====================================================

 

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>

<title>Power Menu</title>

<script language="javascript" src="prototype.js" ></script>

<script language="javascript" src="down_menu.js" ></script>

<link  href="down_menu.css"  type="text/css" rel="stylesheet">

</head>

 

<body>

 

<div id="test"><script language="javascript">menu();</script><div>

</body>

 

</html>

 

//=================================================================================

 

以下为css文件

.mm_0{

width:100px;height:20px;font-size:15px;font-family:Arial black;border:#89CB10  1px solid;margin:0px;padding:0px;text-align:center;float:left;background:#89CB10;

}

.mm_1{

width:100px;height:20px;font-size:15px;font-family:Arial black;border:#ECFA3A 1px solid;margin:0px;padding:0px;text-align:center;float:left;cursor:pointer;background:#B5E74E;

}

 

.ms_0{

width:120px;height:20px;border: #ECFA3A 0px solid;margin:0px;padding:0px;

text-align:center;float:left;background:#ADEF34;

}

 

.ms_1{

width:120px;height:20px;border:#5A26141 px solid;margin:0px;padding:0px;text-align:center;float:left;cursor:pointer;background:#A9DA1D;

}

 

.mmc {

width:100%;height:22px;background:#89CB10;visibility:visible;position:absolute;

top:0;left:0;border: #ECFA3A 1px solid;margin:0px;padding:0px;

}

 

.msc {

width:120px;visibility:hidden;position:absolute;top:0;left:0;border: #ECFA3A 1px solid;margin:0px;padding:0px;

}

 

附加文件下载地址：点击下载