动态侧拉菜单,二级.方便改为下拉菜单

 

function JsMenu(name)

...{

    this.Direction = 0;        //主菜单排列方向：0代表横向，1代表竖向

    this.MainWidth = 200;    //主菜单各项宽度

    this.MainHeight = 20;    //主菜单各项高度

    

    this.ItemWidth = null;

    this.ItemHeight = null;

    

    this.MainIcon = null;

    this.MainAlign = null;

    

    this.ItemIcon = null;

    this.ItemAlign = null;

    

    this.MainAnchor = null;

    this.ItemAnchor = null;

    

    this.Spacing = 0;

    this.Padding = 0;

    

    this.OutBgColor = '#FFFFFF';

    this.OverBgColor = '#EFEFEF';

    

    this.OutBorder = '1px solid #BBBBBB';

    this.OverBorder = '1px solid #999999';

    

    

    this.Name = 'JM';        //注：不用更改

    this.Icon = '·';        //注：不用更改

    var HasItems = false;

    var MenuItems = new Array();

    this.Add = function(Id,Parent,Text,Href,Target,Title)

    ...{

        HasItems = true;

        MenuItems[MenuItems.length] = new Array(Id,Parent,Text,Href,Target,Title);

    };

    

    this.Load = function()

    ...{

        if(name == null)

            this.Name += Math.random().toString().replace('.','0');

        else

            this.Name = this.Name + name;

        if(this.MainHeight != null) this.MainHeight = 'height="'+this.MainHeight+'"';

        if(this.ItemHeight != null) this.ItemHeight = 'height="'+this.ItemHeight+'"';

        if(this.MainAlign != null) this.MainAlign = 'align="'+this.MainAlign+'"';

        if(this.ItemAlign != null) this.ItemAlign = 'align="'+this.ItemAlign+'"';

        if(this.MainAnchor != null) this.MainAnchor = 'class="'+this.MainAnchor+'"';

        if(this.ItemAnchor != null) this.ItemAnchor = 'class="'+this.ItemAnchor+'"';

        if(this.MainIcon == null)

            this.MainIcon = this.Icon;

        else

            this.MainIcon = '<img border="0" src="'+this.MainIcon+'" align="absmiddle"/>';

        if(this.ItemIcon == null)

            this.ItemIcon = this.Icon;

        else

            this.ItemIcon = '<img border="0" src="'+this.ItemIcon+'" align="absmiddle"/>';

    };

    

    this.getMain = function(NO)

    ...{

        if(this.Direction == 1) document.write('<tr>');

        document.write('<td width="'+this.MainWidth+'" '+this.MainAlign+' '+this.MainHeight+' bgcolor="'+this.OutBgColor+'" style="border:'+this.OutBorder+';padding:'+this.Padding+';white-space:nowrap;" title="'+MenuItems[NO][5]+'"');

        document.write(' onmouseover="this.bgColor=''+this.OverBgColor+'';this.style.border=''+this.OverBorder+'';'+this.Name+'_'+MenuItems[NO][0]+'.style.display='inline';" onmouseout="this.bgColor=''+this.OutBgColor+'';this.style.border=''+this.OutBorder+'';'+this.Name+'_'+MenuItems[NO][0]+'.style.display='none';">');

        document.write('<div style="display:inline;width:'+(this.MainWidth-20)+'px;">&nbsp;'+this.MainIcon+' <a href="'+MenuItems[NO][3]+'" target="'+MenuItems[NO][4]+'" '+this.MainAnchor+'>'+MenuItems[NO][2]+'</a>&nbsp;</div>');

        document.write('<div id="'+this.Name+'_'+MenuItems[NO][0]+'_HI" align="right" style="display:none;width:20px;"><span style="font-family:Webdings">4</span></div>');

        if(this.Direction == 1)

        ...{

            document.write('<td width="0" align="left" valign="top" onmouseover="'+this.Name+'_'+MenuItems[NO][0]+'.style.display='inline';" onmouseout="'+this.Name+'_'+MenuItems[NO][0]+'.style.display='none';">');

            document.write('<div id="'+this.Name+'_'+MenuItems[NO][0]+'" style="position:absolute;display:none;">');

            document.write(this.getItems(MenuItems[NO][0]));

            document.write('</div>');

            document.write('</td>');

        }

        else

        ...{

            document.write('<br/>');

            document.write('<div id="'+this.Name+'_'+MenuItems[NO][0]+'" style="position:absolute;display:none;">');

            document.write(this.getItems(MenuItems[NO][0]));

            document.write('</div>');

        }

        document.write('</td>');

        if(this.Direction == 1) document.write('</tr>');

    };

    

    this.getItems = function(PID)

    ...{

        var HasItems = false;

        var ItemString = null;

        ItemString = '<table style="border-collapse:collapse;" border="0" cellpadding="0" cellspacing="0">';

        for(var i=1; i<MenuItems.length; i++)

        ...{

            if(MenuItems[i][1] == PID)

            ...{

                HasItems = true;

                ItemString += '<tr>';

                ItemString += '<td width="'+this.ItemWidth+'" '+this.ItemAlign+' '+this.ItemHeight+' bgcolor="'+this.OutBgColor+'" style="border:'+this.OutBorder+';padding:'+this.Padding+';white-space:nowrap;" title="'+MenuItems[i][5]+'"';

                ItemString += ' onmouseover="this.bgColor=''+this.OverBgColor+'';this.style.border=''+this.OverBorder+'';'+this.Name+'_'+MenuItems[i][0]+'.style.display='inline';" onmouseout="this.bgColor=''+this.OutBgColor+'';this.style.border=''+this.OutBorder+'';'+this.Name+'_'+MenuItems[i][0]+'.style.display='none';">';

                ItemString += '<div style="display:inline;width:'+(this.ItemWidth-20)+'px;">&nbsp;'+this.ItemIcon+' <a href="'+MenuItems[i][3]+'" target="'+MenuItems[i][4]+'" '+this.ItemAnchor+'>'+MenuItems[i][2]+'</a>&nbsp;</div>';

                ItemString += '<div id="'+this.Name+'_'+MenuItems[i][0]+'_HI" align="right" style="display:none;width:20px;"><span style="font-family:Webdings">4</span></div>';

                ItemString += '<td width="0" align="left" valign="top" onmouseover="'+this.Name+'_'+MenuItems[i][0]+'.style.display='inline';" onmouseout="'+this.Name+'_'+MenuItems[i][0]+'.style.display='none';">';

                ItemString += '<div id="'+this.Name+'_'+MenuItems[i][0]+'" style="position:absolute;display:none;">';

                ItemString += this.getItems(MenuItems[i][0]);

                ItemString += '</div>';

                ItemString += '</td>';

                ItemString += '</td>';

                ItemString += '</tr>';

                ItemString += '<tr>';

                ItemString += '<td bgcolor="#FFFFFF" style="line-height:'+this.Spacing+'px;">&nbsp;</td>';

                ItemString += '</tr>';

            }

        }

        ItemString += '</table>';

        if(HasItems)

        ...{

            ItemString += '<script language="javascript" type="text/javascript">';

            ItemString += 'document.getElementById("'+this.Name+'_'+PID+'_HI").style.display = "inline";';

            ItemString += '</script>';

            return ItemString;

        }

        else

            return '&nbsp;';

    };

    

    this.Show = function()

    ...{

        if(HasItems)

        ...{

            this.Load();

            document.write('<table style="border-collapse:collapse;" border="0" cellpadding="0" cellspacing="0">');

            this.getMain(0);

            for(var i=1; i<MenuItems.length; i++)

            ...{

                if(MenuItems[i][1] == 0)

                ...{

                    if(this.Direction == 1)

                    ...{

                        document.write('<tr>');

                        document.write('<td bgcolor="#FFFFFF" style="line-height:'+this.Spacing+'px;">&nbsp;</td>');

                        document.write('</tr>');

                    }

                    else

                    ...{

                        document.write('<td bgcolor="#FFFFFF" width="'+this.Spacing+'"><spacer/></td>');

                    }

                    this.getMain(i);

                }

            }

            document.write('</table>');

        }

    };

    

    this.toString = function()

    ...{

        return '[class JsMenu]';

    };

}

要用到的代码

JS文件.放在目录CSS下.其他地方的话请自己更改

源码:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML><HEAD><TITLE></TITLE>

<META http-equiv=Content-Type content="text/html; charset=utf-8">

<META content="MSHTML 6.00.2900.2873" name=GENERATOR></HEAD>

<BODY leftMargin=0 topMargin=0>

<META http-equiv=Pragma content=no-cache><LINK 

href="css/common.css" type=text/css rel=STYLESHEET>

<!--#include file="inc/Conn.asp"-->

<div>侧拉菜单,同时可以改为下拉菜单</div>

<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0 bgcolor="#FFFFFF">

        <TBODY>

        

        <TR>

          <TD align=middle>

            <DIV align=center>

            <SCRIPT language=JavaScript 

            src="css/JsMenu.js"></SCRIPT>

            <SCRIPT language=JavaScript>

        var JM = new JsMenu();

        JM.Direction = 1;    //主菜单排列方向：0代表横向，1代表竖向

        JM.MainWidth = 160;    //主菜单各项宽度

        JM.MainHeight = 28;    //主菜单各项高度

        

        JM.ItemWidth = null;    //子菜单宽度

        JM.ItemHeight = 28;    //子菜单高度

        

        JM.MainIcon = 'css/icon.gif';    //主菜单图标

        JM.MainAlign = 'left';    //主菜单对齐方式

        

        JM.ItemIcon =  'css/b01.gif';    //子菜单图标

        JM.ItemAlign = 'left';        //子菜单对齐方式

        

        JM.MainAnchor = null;        //主菜单链接样式

        JM.ItemAnchor = null;        //子菜单链接样式

        

        JM.Spacing = 1;                //菜单之间间隔

        JM.Padding = 4;                //菜单各项填充

        

        JM.OutBgColor = '';    //默认时的背景颜色

        JM.OverBgColor = '#D1DBE7';    //激活时的背景颜色

        

        JM.OutBorder = '0px solid #ffffff';        //默认时的边框样式

        JM.OverBorder = '1px solid #C0E0FF';    //激活时的边框样式

        

        //加载数据项(分类ID,所属父ID,分类名,链接地址,打开链接的方式,显示Title);

        i=0;

        m=0;

        n=0;

        var name="";

        var parName="";

        var temp="";

        var temp2=new Array(); 

        var temp3=new Array();

        var link="product.asp?bigclassname=";

        </SCRIPT>

<%set rsBigClass1=server.CreateObject("adodb.recordset")

rsBigClass1.open "Select * From BigClass",conn,1,1

do while not rsBigClass1.eof%>

        

            <SCRIPT language=JavaScript>        

               i++;

              name="level";

              name=name+i;

              var menuName=""; 

              var nameExhibit="<%=rsBigClass1("bigclassname")%>"; 

              

                        menuName="<%=rsBigClass1("bigclassname")%>"; 

                    

                JM.Add(name,'',menuName,link+"<%=rsBigClass1("bigclassname")%>",'_self',nameExhibit);

           </SCRIPT>

<!--子菜单-->

      

  <SCRIPT language=JavaScript>

                      var j=0;

                      parName=name;

                      temp=parName;

               </SCRIPT>

<%

      set rsSmallClass1=server.CreateObject("adodb.recordset")

      rsSmallClass1.open "Select * From SmallClass Where BigClassName='" & rsBigClass1("BigClassName") & "'",conn,1,1

      if not(rsSmallClass1.bof and rsSmallClass1.eof) then

        do while not rsSmallClass1.eof

    %>  

            <SCRIPT language=JavaScript>

                    j++;

                    name="level"+i+"_"+j;                   

                    </SCRIPT>

            <SCRIPT language=JavaScript>

               var subMenuName=""; 

               var nameExhibit="<%=rssmallclass1("smallclassname")%>"; 

            

                        subMenuName="<%=rssmallclass1("smallclassname")%>"; 

                    

            JM.Add(name,parName,subMenuName,link+"<%=rsBigClass1("bigclassname")%>&smallclassname=<%=rssmallclass1("smallclassname")%>",'_self',nameExhibit);

        </SCRIPT>

            <SCRIPT language=JavaScript>

                    parName=temp;

                   </SCRIPT>

<%

      rsSmallClass1.movenext

      loop

      end if

      rsSmallClass1.close

      set rsSmallClass1=nothing    %>

<!--子菜单完成-->

<%  rsBigClass1.movenext

    loop

    rsbigclass1.close

    set rsbigclass1=nothing%>

            <SCRIPT language=JavaScript>

        JM.Show();    //显示菜单

        </SCRIPT>

    </DIV></TD></TR></TBODY></TABLE>