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

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

  1STYLE type="text/css">
  2    A:link {}{ COLOR: #000000; FONT-SIZE: 12px; TEXT-DECORATION: none}
  3    A:visited {}{ COLOR: #000000; FONT-SIZE: 12px; TEXT-DECORATION: none}
  4    A:hover {}{ COLOR: #006CD9; FONT-SIZE: 12px; TEXT-DECORATION: none}
  5    BODY {}{ FONT-SIZE: 12px;}
  6    TD {}{ FONT-SIZE: 12px; line-height: 150%}
  7</STYLE>
  8<script language="JavaScript">
  9<!--
 10function showitem(id,name)
 11{
 12    //打开弹出式页面
 13    //return ("<span><a href='"+id+"' target=_blank>"+name+"</a></span><br>")
 14    //在框架中打开
 15    return ("<span><a href='#' onclick=\"url('"+id+"');\">"+name+"</a></span><br>")
 16}
 17function url(id)
 18{
 19    var source = document.getElementById('fMain');
 20    source.src=id;
 21}
 22function switchoutlookBar(number)
 23{
 24    var i = outlookbar.opentitle;
 25    outlookbar.opentitle=number;
 26    var id1,id2,id1b,id2b
 27    if (number!=i && outlooksmoothstat==0){
 28        if (number!=-1)
 29        {
 30            if (i==-1){
 31                id2="blankdiv";
 32                id2b="blankdiv";
 33            }
 34            else{
 35                id2="outlookdiv"+i;
 36                id2b="outlookdivin"+i;
 37                document.all("outlooktitle"+i).style.border="1px none navy";
 38                document.all("outlooktitle"+i).style.background=outlookbar.maincolor;
 39                document.all("outlooktitle"+i).style.color="#ffffff";
 40                document.all("outlooktitle"+i).style.textalign="center";
 41            }
 42            id1="outlookdiv"+number
 43            id1b="outlookdivin"+number
 44            document.all("outlooktitle"+number).style.border="1px none white";
 45            document.all("outlooktitle"+number).style.background=outlookbar.maincolor; //title
 46            document.all("outlooktitle"+number).style.color="#ffffff";
 47            document.all("outlooktitle"+number).style.textalign="center";
 48            smoothout(id1,id2,id1b,id2b,0);
 49        }
 50        else
 51        {
 52            document.all("blankdiv").style.display="";
 53            document.all("blankdiv").sryle.height="100%";
 54            document.all("outlookdiv"+i).style.display="none";
 55            document.all("outlookdiv"+i).style.height="0%";
 56            document.all("outlooktitle"+i).style.border="1px none navy";
 57            document.all("outlooktitle"+i).style.background=outlookbar.maincolor;
 58            document.all("outlooktitle"+i).style.color="#ffffff";
 59            document.all("outlooktitle"+i).style.textalign="center";
 60        }
 61    }
 62}
 63function smoothout(id1,id2,id1b,id2b,stat)
 64{
 65    if(stat==0){
 66        tempinnertext1=document.all(id1b).innerHTML;
 67        tempinnertext2=document.all(id2b).innerHTML;
 68        document.all(id1b).innerHTML="";
 69        document.all(id2b).innerHTML="";
 70        outlooksmoothstat=1;
 71        document.all(id1b).style.overflow="hidden";
 72        document.all(id2b).style.overflow="hidden";
 73        document.all(id1).style.height="0%";
 74        document.all(id1).style.display="";
 75        setTimeout("smoothout('"+id1+"','"+id2+"','"+id1b+"','"+id2b+"',"+outlookbar.inc+")",outlookbar.timedalay);
 76    }
 77    else
 78    {
 79        stat+=outlookbar.inc;
 80        if (stat>100)
 81            stat=100;
 82        document.all(id1).style.height=stat+"%";
 83        document.all(id2).style.height=(100-stat)+"%";
 84        if (stat<100) 
 85            setTimeout("smoothout('"+id1+"','"+id2+"','"+id1b+"','"+id2b+"',"+stat+")",outlookbar.timedalay);
 86        else
 87        {
 88            document.all(id1b).innerHTML=tempinnertext1;
 89            document.all(id2b).innerHTML=tempinnertext2;
 90            outlooksmoothstat=0;
 91            document.all(id1b).style.overflow="auto";
 92            document.all(id2).style.display="none";
 93        }
 94    }
 95}
 96function getOutLine()
 97{
 98    outline="<table "+outlookbar.otherclass+">";
 99    for (i=0;i<(outlookbar.titlelist.length);i++)
100    {
101        outline+="<tr><td name=outlooktitle"+i+" id=outlooktitle"+i+" "; 
102        if (i!=outlookbar.opentitle) 
103            outline+=" nowrap align=center style='cursor:hand;background-color:"+outlookbar.maincolor+";color:#ffffff;height:20;border:1 none navy' ";
104        else
105            outline+=" nowrap align=center style='cursor:hand;background-color:"+outlookbar.maincolor+";color:white;height:20;border:1 none white' ";
106        outline+=outlookbar.titlelist[i].otherclass
107        outline+=" onclick='switchoutlookBar("+i+")'><span class=smallFont>";
108        outline+=outlookbar.titlelist[i].title+"</span></td></tr>";
109        outline+="<tr><td name=outlookdiv"+i+" valign=top align=center id=outlookdiv"+i+" style='width:100%"
110        if (i!=outlookbar.opentitle) 
111            outline+=";display:none;height:0%;";
112        else
113            outline+=";display:;height:100%;";
114        outline+="'><div name=outlookdivin"+i+" id=outlookdivin"+i+" style='overflow:auto;width:100%;height:100%'>";
115        for (j=0;j<outlookbar.itemlist[i].length;j++)
116            outline+=showitem(outlookbar.itemlist[i][j].key,outlookbar.itemlist[i][j].title);
117        outline+="</div></td></tr>"
118    }
119    outline+="</table>"
120    return outline
121}
122function show()
123{
124    var outline;
125    outline="<div id=outLookBarDiv name=outLookBarDiv style='width=100%;height:100%'>"
126    outline+=outlookbar.getOutLine();
127    outline+="</div>"
128    document.write(outline);
129}
130function theitem(intitle,instate,inkey)
131{
132    this.state=instate;
133    this.otherclass=" nowrap ";
134    this.key=inkey;
135    this.title=intitle;
136}
137function addtitle(intitle)
138{
139    outlookbar.itemlist[outlookbar.titlelist.length]=new Array();
140    outlookbar.titlelist[outlookbar.titlelist.length]=new theitem(intitle,1,0);
141    return(outlookbar.titlelist.length-1);
142}
143function additem(intitle,parentid,inkey)
144{
145    if (parentid>=0 && parentid<=outlookbar.titlelist.length)
146    {
147        outlookbar.itemlist[parentid][outlookbar.itemlist[parentid].length]=new theitem(intitle,2,inkey);
148        outlookbar.itemlist[parentid][outlookbar.itemlist[parentid].length-1].otherclass=" nowrap align=left style='height:5' ";
149        return(outlookbar.itemlist[parentid].length-1);
150    }
151    else
152        additem=-1;
153}
154function outlook()
155{
156    this.titlelist=new Array();
157    this.itemlist=new Array();
158    this.divstyle="style='height:100%;width:100%;overflow:auto' align=center";//可以在这里设置对齐方式
159    this.otherclass="border=0 cellspacing='0' cellpadding='0' style='height:100%;width:100%'valign=middle align=center ";
160    this.addtitle=addtitle;
161    this.additem=additem;
162    this.starttitle=-1;
163    this.show=show;
164    this.getOutLine=getOutLine;
165    this.opentitle=this.starttitle;
166    this.reflesh=outreflesh;
167    this.timedelay=50;
168    this.inc=10;
169    this.maincolor = "#336699"
170}
171function outreflesh()
172{
173    document.all("outLookBarDiv").innerHTML=outlookbar.getOutLine();
174}
175function locatefold(foldname)
176{
177    if (foldname=="")
178        foldname = outlookbar.titlelist[0].title
179    for (var i=0;i<outlookbar.titlelist.length;i++)
180    {
181        if(foldname==outlookbar.titlelist[i].title)
182        {
183            outlookbar.starttitle=i;
184            outlookbar.opentitle=i;
185        }
186    }
187}
188var outlookbar=new outlook();
189var tempinnertext1,tempinnertext2,outlooksmoothstat
190outlooksmoothstat = 0;
191
192<%=LoadVerticalMenu()%>//从数据库产生垂直菜单
193
194//-->
195</script>
196<table id="mnuList" style="WIDTH:150px;HEIGHT: 100%" cellspacing="0" cellpadding="0" align="left"
197    border="0">
198    <tr>
199        <td bgcolor="#F0F0E5" id="outLookBarShow" style="HEIGHT: 100%" valign="top" align="middle"
200            name="outLookBarShow">
201            <script language="JavaScript">
202            <!--
203            locatefold("")
204            outlookbar.show() 
205            //-->
206            </script>
207        </td>
208    </tr>
209</table>

2.cs代码

 1public class VerticalMenu : System.Web.UI.Page
 2{
 3    protected DataRow[] father;
 4    protected DataRow[] first;
 5        private void Page_Load(object sender, System.EventArgs e)
 6        {
 7            // 模拟QQ菜单
 8        }
 9    public static string ConnectionString=System.Configuration .ConfigurationSettings .AppSettings["ConnectionString"];
10    
11       GetDataSetGetDataSet#region GetDataSet
12        public static DataSet GetDataSet(string sql)
13        {
14            SqlDataAdapter    sda =new SqlDataAdapter(sql,ConnectionString);
15            DataSet ds=new DataSet();
16            sda.Fill(ds);
17            return ds;
18        }
19        #endregion
20    protected string LoadVerticalMenu()
21    {
22    string sqlFather="select * from PowerSetting";
23    DataSet dsFather=GetDataSet(sqlFather);
24    father=dsFather.Tables[0].Select("IsBoot=0","IsBoot");
25    string menu="";            
26    foreach(DataRow drfather in father)
27    {
28        menu+="var t;";
29        menu+="t=outlookbar.addtitle('"+drfather["Description"]+"');";
30        first=dsFather.Tables[0].Select("ParentID='"+Convert.ToInt32(drfather["ParentID"])+"' and IsBoot=1","IsBoot");
31        foreach(DataRow drfirst in first)
32        {
33            menu+="outlookbar.additem('"+drfirst["Description"]+"',t,'"+drfirst["Url"]+"');";
34        }
35    }
36    return menu;
37    }
38        Web Form Designer generated codeWeb Form Designer generated code#region Web Form Designer generated code
39        override protected void OnInit(EventArgs e)
40        {
41            //
42            // CODEGEN: This call is required by the ASP.NET Web Form Designer.
43            //
44            InitializeComponent();
45            base.OnInit(e);
46        }
47        
48        /**//**//**//**//**//**//**//// <summary>
49        /// Required method for Designer support - do not modify
50        /// the contents of this method with the code editor.
51        /// </summary>
52        private void InitializeComponent()
53        {    
54            this.Load += new System.EventHandler(this.Page_Load);
55        }
56        #endregion
57    }

3.数据库脚本

 1if exists (select * from dbo.sysobjects where id = object_id(N'[dbo].[PowerSetting]') and OBJECTPROPERTY(id, N'IsUserTable') = 1)
 2drop table [dbo].[PowerSetting]
 3GO
 4
 5CREATE TABLE [dbo].[PowerSetting] (
 6    [PowerSettingID] [int] IDENTITY (1, 1) NOT NULL ,            --id
 7    [ParentID] [int] NOT NULL ,                        --父节点id
 8    [Description] [nvarchar] (255) COLLATE Chinese_PRC_CI_AS NULL ,    --菜单描述内容
 9    [Icon] [nvarchar] (50) COLLATE Chinese_PRC_CI_AS NULL ,        --要显示图标
10    [Url] [nvarchar] (255) COLLATE Chinese_PRC_CI_AS NULL ,        --url
11    [Target] [nvarchar] (50) COLLATE Chinese_PRC_CI_AS NULL ,        --_self,_blank等
12    [CreateByID] [nvarchar] (50) COLLATE Chinese_PRC_CI_AS NULL ,    --创建人id
13    [CreateON] [datetime] NULL ,                    --创建日期
14    [IsEnabled] [bit] NULL ,                        --是否可用
15    [IsBoot] [int] NULL                         --是不是根节点；1是其他不是
16) ON [PRIMARY]
17GO