类似QQ的垂直菜单(动态)

步骤:
1.新建一个页面,假如说叫VerticalMenu
2.把html代码copy到html代码区
3.把LoadTopMenu方法copy到cs代码区
4.运行即可
-------------------------------------
1.html代码

< STYLE  type ="text/css" >
    A:link  {} {  COLOR :  #000000 ;  FONT-SIZE :  12px ;  TEXT-DECORATION :  none }
    A:visited  {} {  COLOR :  #000000 ;  FONT-SIZE :  12px ;  TEXT-DECORATION :  none }
    A:hover  {} {  COLOR :  #006CD9 ;  FONT-SIZE :  12px ;  TEXT-DECORATION :  none }
    BODY  {} {  FONT-SIZE :  12px ; }
    TD  {} {  FONT-SIZE :  12px ;  line-height :  150% }
</ STYLE >
< script  language ="JavaScript" >
<!--
function  showitem(id,name)
{
     // 打开弹出式页面
     // return ("<span><a href='"+id+"' target=_blank>"+name+"</a></span><br>")
     // 在框架中打开
     return  ( " <span><a href='#' onclick=\ " url(' " +id+ " ');\ " > " + name + " </a></span><br> " )
}
function  url(id)
{
     var  source  =  document.getElementById('fMain');
    source.src = id;
}
function  switchoutlookBar(number)
{
     var  i  =  outlookbar.opentitle;
    outlookbar.opentitle = number;
     var  id1,id2,id1b,id2b
     if  (number != i  &&  outlooksmoothstat == 0 ) {
         if  (number !=- 1 )
         {
             if  (i ==- 1 ) {
                id2 = " blankdiv " ;
                id2b = " blankdiv " ;
            }
             else {
                id2 = " outlookdiv " + i;
                id2b = " outlookdivin " + i;
                document.all( " outlooktitle " + i).style.border = " 1px none navy " ;
                document.all( " outlooktitle " + i).style.background = outlookbar.maincolor;
                document.all( " outlooktitle " + i).style.color = " #ffffff " ;
                document.all( " outlooktitle " + i).style.textalign = " center " ;
            }
            id1 = " outlookdiv " + number
            id1b = " outlookdivin " + number
            document.all( " outlooktitle " + number).style.border = " 1px none white " ;
            document.all( " outlooktitle " + number).style.background = outlookbar.maincolor;  // title
            document.all( " outlooktitle " + number).style.color = " #ffffff " ;
            document.all( " outlooktitle " + number).style.textalign = " center " ;
            smoothout(id1,id2,id1b,id2b, 0 );
        }
         else
         {
            document.all( " blankdiv " ).style.display = "" ;
            document.all( " blankdiv " ).sryle.height = " 100% " ;
            document.all( " outlookdiv " + i).style.display = " none " ;
            document.all( " outlookdiv " + i).style.height = " 0% " ;
            document.all( " outlooktitle " + i).style.border = " 1px none navy " ;
            document.all( " outlooktitle " + i).style.background = outlookbar.maincolor;
            document.all( " outlooktitle " + i).style.color = " #ffffff " ;
            document.all( " outlooktitle " + i).style.textalign = " center " ;
        }
    }
}
function  smoothout(id1,id2,id1b,id2b,stat)
{
     if (stat == 0 ) {
        tempinnertext1 = document.all(id1b).innerHTML;
        tempinnertext2 = document.all(id2b).innerHTML;
        document.all(id1b).innerHTML = "" ;
        document.all(id2b).innerHTML = "" ;
        outlooksmoothstat = 1 ;
        document.all(id1b).style.overflow = " hidden " ;
        document.all(id2b).style.overflow = " hidden " ;
        document.all(id1).style.height = " 0% " ;
        document.all(id1).style.display = "" ;
        setTimeout( " smoothout(' " + id1 + " ',' " + id2 + " ',' " + id1b + " ',' " + id2b + " ', " + outlookbar.inc + " ) " ,outlookbar.timedalay);
    }
     else
     {
        stat += outlookbar.inc;
         if  (stat > 100 )
            stat = 100 ;
        document.all(id1).style.height = stat + " % " ;
        document.all(id2).style.height = ( 100 - stat) + " % " ;
         if  (stat < 100 ) 
            setTimeout( " smoothout(' " + id1 + " ',' " + id2 + " ',' " + id1b + " ',' " + id2b + " ', " + stat + " ) " ,outlookbar.timedalay);
         else
         {
            document.all(id1b).innerHTML = tempinnertext1;
            document.all(id2b).innerHTML = tempinnertext2;
            outlooksmoothstat = 0 ;
            document.all(id1b).style.overflow = " auto " ;
            document.all(id2).style.display = " none " ;
        }
    }
}
function  getOutLine()
{
    outline = " <table  " + outlookbar.otherclass + " > " ;
     for  (i = 0 ;i < (outlookbar.titlelist.length);i ++ )
     {
        outline += " <tr><td name=outlooktitle " + i + "  id=outlooktitle " + i + "   " ; 
         if  (i != outlookbar.opentitle) 
            outline += "  nowrap align=center style='cursor:hand;background-color: " + outlookbar.maincolor + " ;color:#ffffff;height:20;border:1 none navy'  " ;
         else
            outline += "  nowrap align=center style='cursor:hand;background-color: " + outlookbar.maincolor + " ;color:white;height:20;border:1 none white'  " ;
        outline += outlookbar.titlelist[i].otherclass
        outline += "  onclick='switchoutlookBar( " + i + " )'><span class=smallFont> " ;
        outline += outlookbar.titlelist[i].title + " </span></td></tr> " ;
        outline += " <tr><td name=outlookdiv " + i + "  valign=top align=center id=outlookdiv " + i + "  style='width:100% "
         if  (i != outlookbar.opentitle) 
            outline += " ;display:none;height:0%; " ;
         else
            outline += " ;display:;height:100%; " ;
        outline += " '><div name=outlookdivin " + i + "  id=outlookdivin " + i + "  style='overflow:auto;width:100%;height:100%'> " ;
         for  (j = 0 ;j < outlookbar.itemlist[i].length;j ++ )
            outline += showitem(outlookbar.itemlist[i][j].key,outlookbar.itemlist[i][j].title);
        outline += " </div></td></tr> "
    }
    outline += " </table> "
     return  outline
}
function  show()
{
     var  outline;
    outline = " <div id=outLookBarDiv name=outLookBarDiv style='width=100%;height:100%'> "
    outline += outlookbar.getOutLine();
    outline += " </div> "
    document.write(outline);
}
function  theitem(intitle,instate,inkey)
{
     this .state = instate;
     this .otherclass = "  nowrap  " ;
     this .key = inkey;
     this .title = intitle;
}
function  addtitle(intitle)
{
    outlookbar.itemlist[outlookbar.titlelist.length] = new  Array();
    outlookbar.titlelist[outlookbar.titlelist.length] = new  theitem(intitle, 1 , 0 );
     return (outlookbar.titlelist.length - 1 );
}
function  additem(intitle,parentid,inkey)
{
     if  (parentid >= 0   &&  parentid <= outlookbar.titlelist.length)
     {
        outlookbar.itemlist[parentid][outlookbar.itemlist[parentid].length] = new  theitem(intitle, 2 ,inkey);
        outlookbar.itemlist[parentid][outlookbar.itemlist[parentid].length - 1 ].otherclass = "  nowrap align=left style='height:5'  " ;
         return (outlookbar.itemlist[parentid].length - 1 );
    }
     else
        additem =- 1 ;
}
function  outlook()
{
     this .titlelist = new  Array();
     this .itemlist = new  Array();
     this .divstyle = " style='height:100%;width:100%;overflow:auto' align=center " ; // 可以在这里设置对齐方式
     this .otherclass = " border=0 cellspacing='0' cellpadding='0' style='height:100%;width:100%'valign=middle align=center  " ;
     this .addtitle = addtitle;
     this .additem = additem;
     this .starttitle =- 1 ;
     this .show = show;
     this .getOutLine = getOutLine;
     this .opentitle = this .starttitle;
     this .reflesh = outreflesh;
     this .timedelay = 50 ;
     this .inc = 10 ;
     this .maincolor  =   " #336699 "
}
function  outreflesh()
{
    document.all( " outLookBarDiv " ).innerHTML = outlookbar.getOutLine();
}
function  locatefold(foldname)
{
     if  (foldname == "" )
        foldname  =  outlookbar.titlelist[ 0 ].title
     for  ( var  i = 0 ;i < outlookbar.titlelist.length;i ++ )
     {
         if (foldname == outlookbar.titlelist[i].title)
         {
            outlookbar.starttitle = i;
            outlookbar.opentitle = i;
        }
    }
}
var  outlookbar = new  outlook();
var  tempinnertext1,tempinnertext2,outlooksmoothstat
outlooksmoothstat  =   0 ;

<%= LoadVerticalMenu() %> // 从数据库产生垂直菜单

// -->
</ script >
< table  id ="mnuList"  style ="WIDTH:150px;HEIGHT: 100%"  cellspacing ="0"  cellpadding ="0"  align ="left"
    border ="0" >
     < tr >
         < td  bgcolor ="#F0F0E5"  id ="outLookBarShow"  style ="HEIGHT: 100%"  valign ="top"  align ="middle"
            name ="outLookBarShow" >
             < script  language ="JavaScript" >
             <!--
            locatefold( "" )
            outlookbar.show() 
             // -->
             </ script >
         </ td >
     </ tr >
</ table >

2.cs代码

public   class  VerticalMenu : System.Web.UI.Page
{
     protected  DataRow[] father;
     protected  DataRow[] first;
         private   void  Page_Load( object  sender, System.EventArgs e)
         {
             //  模拟QQ菜单
        }
     public   static   string  ConnectionString = System.Configuration .ConfigurationSettings .AppSettings[ " ConnectionString " ];
    
        GetDataSet #region  GetDataSet
         public   static  DataSet GetDataSet( string  sql)
         {
            SqlDataAdapter    sda  = new  SqlDataAdapter(sql,ConnectionString);
            DataSet ds = new  DataSet();
            sda.Fill(ds);
             return  ds;
        }
         #endregion
     protected   string  LoadVerticalMenu()
     {
     string  sqlFather = " select * from PowerSetting " ;
    DataSet dsFather = GetDataSet(sqlFather);
    father = dsFather.Tables[ 0 ].Select( " IsBoot=0 " , " IsBoot " );
     string  menu = "" ;            
     foreach (DataRow drfather  in  father)
     {
        menu += " var t; " ;
        menu += " t=outlookbar.addtitle(' " + drfather[ " Description " ] + " '); " ;
        first = dsFather.Tables[ 0 ].Select( " ParentID=' " + Convert.ToInt32(drfather[ " ParentID " ]) + " ' and IsBoot=1 " , " IsBoot " );
         foreach (DataRow drfirst  in  first)
         {
            menu += " outlookbar.additem(' " + drfirst[ " Description " ] + " ',t,' " + drfirst[ " Url " ] + " '); " ;
        }
    }
     return  menu;
    }
         Web Form Designer generated code #region  Web Form Designer generated code
         override   protected   void  OnInit(EventArgs e)
         {
             //
             //  CODEGEN: This call is required by the ASP.NET Web Form Designer.
             //
            InitializeComponent();
             base .OnInit(e);
        }
        
         /**/ /**/ /**/ ///   <summary>
         ///  Required method for Designer support - do not modify
         ///  the contents of this method with the code editor.
         ///   </summary>
         private   void  InitializeComponent()
         {    
             this .Load  +=   new  System.EventHandler( this .Page_Load);
        }
         #endregion
    }

3.数据库脚本

if   exists  ( select   *   from  dbo.sysobjects  where  id  =   object_id (N ' [dbo].[PowerSetting] ' )  and   OBJECTPROPERTY (id, N ' IsUserTable ' )  =   1 )
drop   table   [ dbo ] . [ PowerSetting ]
GO

CREATE   TABLE   [ dbo ] . [ PowerSetting ]  (
     [ PowerSettingID ]   [ int ]   IDENTITY  ( 1 ,  1 )  NOT   NULL  ,             -- id
     [ ParentID ]   [ int ]   NOT   NULL  ,                         -- 父节点id
     [ Description ]   [ nvarchar ]  ( 255 ) COLLATE Chinese_PRC_CI_AS  NULL  ,     -- 菜单描述内容
     [ Icon ]   [ nvarchar ]  ( 50 ) COLLATE Chinese_PRC_CI_AS  NULL  ,         -- 要显示图标
     [ Url ]   [ nvarchar ]  ( 255 ) COLLATE Chinese_PRC_CI_AS  NULL  ,         -- url
     [ Target ]   [ nvarchar ]  ( 50 ) COLLATE Chinese_PRC_CI_AS  NULL  ,         -- _self,_blank等
     [ CreateByID ]   [ nvarchar ]  ( 50 ) COLLATE Chinese_PRC_CI_AS  NULL  ,     -- 创建人id
     [ CreateON ]   [ datetime ]   NULL  ,                     -- 创建日期
     [ IsEnabled ]   [ bit ]   NULL  ,                         -- 是否可用
     [ IsBoot ]   [ int ]   NULL                           -- 是不是根节点；1是其他不是
)  ON   [ PRIMARY ]
GO