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

 

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 >