菜单
相信大家做网页的时候都会用到菜单。最近在CSDN上答题的时候，问动态菜单的还是比较多。这次就整3个动态菜单给同学们玩玩。方便刚入门的小鸟速度掌握。
正所谓天下文章大家抄，抄来抄去有提高.去百度一个JS+CSS菜单。 CSS菜单
效果还算一般。我们把它抄袭下来 以后留用.
先来看看HTML
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" />
< title > 导航菜单 </ title >
< style >
body,td,th {
font-family : Tahoma, Verdana, Arial, sans-serif ;
font-size : 12px ;
color : #333333 ;
}
body {
margin-left : 0px ;
margin-top : 0px ;
margin-right : 0px ;
margin-bottom : 0px ;
}
a {
color : #333333 ;
text-decoration : none ;
}
a:hover {
color : #FF0000 ;
text-decoration : none ;
}
a:active {
color : #FF0000 ;
text-decoration : none ;
}
#menu {
height : 32px ;
margin-top : 8px ; background-color : #990000 ;
}
#menu ul {
margin : auto ; width : 778px ; height : 32px ;
list-style-type : none ; padding : 0px ; margin-top : 0px ; margin-bottom : 0px ;
}
.m_li {
float : left ; width : 114px ; line-height : 32px ; text-align : center ; margin-right : -2px ; margin-left : -2px ;
}
.m_li a {
display : block ; color : #FFFFFF ; width : 114px ;
}
.m_line {
float : left ; width : 1px ; height : 32px ;
line-height : 32px ; /* ff下有效(图片垂直居中) */
}
.m_line img {
margin-top : expression(( 32 - this.height ) / 2) ; /* ie下有效(图片垂直居中) */
}
.m_li_a {
float : left ; width : 114px ; line-height : 32px ; text-align : center ; padding-top : 3px ; font-weight : bold ;
background-image : url(/jscss/demoimg/200904/menu_bg2.jpg) ; position : relative ; height : 32px ; margin-top : -3px ; margin-right : -2px ; margin-left : -2px ;
}
.m_li_a a {
display : block ; color : #FF0000 ; width : 114px ;
}
.smenu {
width : 774px ; margin : 0px auto 0px auto ; padding : 0px ; list-style-type : none ; height : 32px ;
}
.s_li {
line-height : 32px ; width : auto ; display : none ; height : 32px ;
}
.s_li_a {
line-height : 32px ; width : auto ; display : block ; height : 32px ;
}
</ style >
< script >
// 初始化
var def = " 1 " ;
function mover(object){
// 主菜单
var mm = document.getElementById( " m_ " + object);
mm.className = " m_li_a " ;
// 初始主菜单隐藏效果
if (def != 0 ){
var mdef = document.getElementById( " m_ " + def);
mdef.className = " m_li " ;
}
// 子菜单
var ss = document.getElementById( " s_ " + object);
ss.style.display = " block " ;
// 初始子菜单隐藏效果
if (def != 0 ){
var sdef = document.getElementById( " s_ " + def);
sdef.style.display = " none " ;
}
}
function mout(object){
// 主菜单
var mm = document.getElementById( " m_ " + object);
mm.className = " m_li " ;
// 初始主菜单
if (def != 0 ){
var mdef = document.getElementById( " m_ " + def);
mdef.className = " m_li_a " ;
}
// 子菜单
var ss = document.getElementById( " s_ " + object);
ss.style.display = " none " ;
// 初始子菜单
if (def != 0 ){
var sdef = document.getElementById( " s_ " + def);
sdef.style.display = " block " ;
}
}
</ script >
</ head >
< body >
< div id ="menu" >
< ul >
< li class ="m_line" >< img src ="/jscss/demoimg/200904/line2.gif" /></ li >
< li id ="m_1" class ='m_li_a' >< a href ="#" > 财税首页 </ a ></ li >
< li class ="m_line" >< img src ="/jscss/demoimg/200904/line2.gif" /></ li >
< li id ="m_2" class ='m_li' onmouseover ='mover(2);' onmouseout ='mout(2);' >< a href ="#" > 政务公开 </ a ></ li >
< li class ="m_line" >< img src ="/jscss/demoimg/200904/line2.gif" /></ li >
< li id ="m_3" class ='m_li' onmouseover ='mover(3);' onmouseout ='mout(3);' >< a href ="#" > 网上办事 </ a ></ li >
< li class ="m_line" >< img src ="/jscss/demoimg/200904/line2.gif" /></ li >
< li id ="m_4" class ='m_li' onmouseover ='mover(4);' onmouseout ='mout(4);' >< a href ="#" > 公告中心 </ a ></ li >
< li class ="m_line" >< img src ="/jscss/demoimg/200904/line2.gif" /></ li >
< li id ="m_5" class ='m_li' onmouseover ='mover(5);' onmouseout ='mout(5);' >< a href ="#" > 法规中心 </ a ></ li >
< li class ="m_line" >< img src ="/jscss/demoimg/200904/line2.gif" /></ li >
< li id ="m_6" class ='m_li' onmouseover ='mover(6);' onmouseout ='mout(6);' >< a href ="#" > 财税文化 </ a ></ li >
< li class ="m_line" >< img src ="/jscss/demoimg/200904/line2.gif" /></ li >
< li id ="m_7" class ='m_li' onmouseover ='mover(7);' onmouseout ='mout(7);' >< a href ="#" > 专题宣传 </ a ></ li >
< li class ="m_line" >< img src ="/jscss/demoimg/200904/line2.gif" /></ li >
</ ul >
</ div >
< div style ="height:32px; background-color:#F1F1F1;" >
< ul class ="smenu" >
< li style ="padding-left:29px;" id ="s_1" class ='s_li_a' > 您是本站第13122842位访客！ </ li >
< li style ="padding-left:141px;" id ="s_2" class ='s_li' onmouseover ='mover(2);' onmouseout ='mout(2);' >< a href ="/" > 财税简介 </ a > | < a href ="#" > 机构设置 </ a > | < a href ="/" > 办事指南 </ a > | < a href ="/" > 税种简介 </ a > | < a href ="/" > 财税动态 </ a > | < a href ="/" > 网页特效 </ a ></ li >
< li style ="padding-left:252px;" id ="s_3" class ='s_li' onmouseover ='mover(3);' onmouseout ='mout(3);' >< a href ="/" > 下载专区 </ a > | < a href ="/" > 上传专区 </ a > | < a href ="#" > 申请报名 </ a > | < a href ="#" > 查询系统 </ a > | < a href ="#" > 咨询投诉 </ a > | < a href ="/" > 满意调查 </ a ></ li >
< li style ="padding-left:362px;" id ="s_4" class ='s_li' onmouseover ='mover(4);' onmouseout ='mout(4);' >< a href ="/" > 最新公告 </ a > | < a href ="/" > 会计通知 </ a ></ li >
< li style ="padding-left:474px;" id ="s_5" class ='s_li' onmouseover ='mover(5);' onmouseout ='mout(5);' >< a href ="/" > 最新政策 </ a > | < a href ="#" > 政策法规查询 </ a ></ li >
< li style ="padding-left:447px;" id ="s_6" class ='s_li' onmouseover ='mover(6);' onmouseout ='mout(6);' >< a href ="/" > 税收宣传 </ a > | < a href ="/" > 最新更新 </ a > | < a href ="#" > 文明创建 </ a > | < a href ="#" target ="_blank" > 青年论坛 </ a > | < a href ="#" > 廉政课堂 </ a ></ li >
< li style ="padding-left:696px;" id ="s_7" class ='s_li' onmouseover ='mover(7);' onmouseout ='mout(7);' >< a href ="/" > 专题宣传区 </ a ></ li >
</ ul >
</ div >
</ body >
</ html >
其中有定义的JS和CSS 不会不要紧。因为我们可以抄. OK开工。新建一个页面.讲这些代码复制进去 不解释.
仔细观察一下。 DIV的ID为MENU的貌似是父菜单。而下面那个DIV是加载上去的。那我们就从后台返回两个字符串用于页面绑定。一个也可以搞定。
创建数据库
1 USE [ CSDN_Ziye ]
2 GO
3 /* ***** 对象: Table [dbo].[Ziye_Menu] 脚本日期: 04/24/2011 20:13:53 ***** */
4 SET ANSI_NULLS ON
5 GO
6 SET QUOTED_IDENTIFIER ON
7 GO
8 CREATE TABLE [ dbo ] . [ Ziye_Menu ] (
9 [ Menu_ID ] [ int ] NULL ,
10 [ Menu_Fid ] [ int ] NULL ,
11 [ Menu_Name ] [ nvarchar ] ( 50 ) COLLATE SQL_Latin1_General_CP1_CI_AS NULL ,
12 [ Menu_Url ] [ nvarchar ] ( 50 ) COLLATE SQL_Latin1_General_CP1_CI_AS NULL ,
13 [ Menu_able ] [ int ] NULL ,
14 [ Menu_Rel ] [ nvarchar ] ( 50 ) COLLATE SQL_Latin1_General_CP1_CI_AS NULL ,
15 [ Menu_Type ] [ int ] NULL
16 ) ON [ PRIMARY ]
其中有几个字段不需要。具体是干嘛的。下一篇会用到。。
采用拼接字符串。就像我经常CSDN解答的那样。
前台<%=str %>
后台public static string str=string.Empty;
建立个页面开整
1 <% @ Page Language = " C# " AutoEventWireup = " true " CodeBehind = " Default.aspx.cs " Inherits = " Ziye_Menu1._Default " %>
2
3 <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
4 < html xmlns ="http://www.w3.org/1999/xhtml" >
5 < head runat ="server" >
6 < meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
7 < title > 子夜菜单(一) </ title >
8 < meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" />
9 < style >
10 body, td, th
11 {
12 font-family : Tahoma, Verdana, Arial, sans-serif ;
13 font-size : 12px ;
14 color : #333333 ;
15 }
16 body
17 {
18 margin-left : 0px ;
19 margin-top : 0px ;
20 margin-right : 0px ;
21 margin-bottom : 0px ;
22 }
23 a
24 {
25 color : #333333 ;
26 text-decoration : none ;
27 }
28 a:hover
29 {
30 color : #FF0000 ;
31 text-decoration : none ;
32 }
33 a:active
34 {
35 color : #FF0000 ;
36 text-decoration : none ;
37 }
38 #menu
39 {
40 height : 32px ;
41 margin-top : 8px ;
42 background-color : #990000 ;
43 }
44 #menu ul
45 {
46 margin : auto ;
47 width : 778px ;
48 height : 32px ;
49 list-style-type : none ;
50 padding : 0px ;
51 margin-top : 0px ;
52 margin-bottom : 0px ;
53 }
54 .m_li
55 {
56 float : left ;
57 width : 114px ;
58 line-height : 32px ;
59 text-align : center ;
60 margin-right : -2px ;
61 margin-left : -2px ;
62 }
63 .m_li a
64 {
65 display : block ;
66 color : #FFFFFF ;
67 width : 114px ;
68 }
69 .m_line
70 {
71 float : left ;
72 width : 1px ;
73 height : 32px ;
74 line-height : 32px ; /* ff下有效(图片垂直居中) */
75 }
76 .m_line img
77 {
78 margin-top : expression(( 32 - this.height ) / 2) ; /* ie下有效(图片垂直居中) */
79 }
80 .m_li_a
81 {
82 float : left ;
83 width : 114px ;
84 line-height : 32px ;
85 text-align : center ;
86 padding-top : 3px ;
87 font-weight : bold ;
88 background-image : url(http://www.codefans.net/jscss/demoimg/200904/menu_bg2.jpg) ;
89 position : relative ;
90 height : 32px ;
91 margin-top : -3px ;
92 margin-right : -2px ;
93 margin-left : -2px ;
94 }
95 .m_li_a a
96 {
97 display : block ;
98 color : #FF0000 ;
99 width : 114px ;
100 }
101 .smenu
102 {
103 width : 774px ;
104 margin : 0px auto 0px auto ;
105 padding : 0px ;
106 list-style-type : none ;
107 height : 32px ;
108 }
109 .s_li
110 {
111 line-height : 32px ;
112 width : auto ;
113 display : none ;
114 height : 32px ;
115 }
116 .s_li_a
117 {
118 line-height : 32px ;
119 width : auto ;
120 display : block ;
121 height : 32px ;
122 }
123 </ style >
124
125 < script >
126 // 初始化
127 var def = " 1 " ;
128 function mover(object) {
129 // 主菜单
130 var mm = document.getElementById( " m_ " + object);
131 mm.className = " m_li_a " ;
132 // 初始主菜单隐藏效果
133 if (def != 0 ) {
134 var mdef = document.getElementById( " m_ " + def);
135 mdef.className = " m_li " ;
136 }
137 // 子菜单
138 var ss = document.getElementById( " s_ " + object);
139 ss.style.display = " block " ;
140 // 初始子菜单隐藏效果
141 if (def != 0 ) {
142 var sdef = document.getElementById( " s_ " + def);
143 sdef.style.display = " none " ;
144 }
145 }
146
147 function mout(object) {
148 // 主菜单
149 var mm = document.getElementById( " m_ " + object);
150 mm.className = " m_li " ;
151 // 初始主菜单
152 if (def != 0 ) {
153 var mdef = document.getElementById( " m_ " + def);
154 mdef.className = " m_li_a " ;
155 }
156 // 子菜单
157 var ss = document.getElementById( " s_ " + object);
158 ss.style.display = " none " ;
159 // 初始子菜单
160 if (def != 0 ) {
161 var sdef = document.getElementById( " s_ " + def);
162 sdef.style.display = " block " ;
163 }
164 }
165 </ script >
166
167 </ head >
168 < body >
169 <% = GetMenu() %>
170 </ body >
171 </ html >
接下来是后台代码看注释.
1 using System;
2 using System.Collections.Generic;
3 using System.Linq;
4 using System.Web;
5 using System.Web.UI;
6 using System.Web.UI.WebControls;
7 using System.Text;
8 using System.Data;
9
10 namespace Ziye_Menu1
11 {
12 public partial class _Default : System.Web.UI.Page
13 {
14 protected void Page_Load( object sender, EventArgs e)
15 {
16
17 }
18
19 public string GetMenu()
20 {
21 // <div id="menu">
22 // <ul>
23 // <li class="m_line"><img src="/jscss/demoimg/200904/line2.gif" /></li>
24 // <li id="m_1" class='m_li_a'><a href="#">财税首页</a></li>
25 // <li class="m_line"><img src=" http://www.codefans.net/jscss/demoimg/200904/line2.gif " /></li>
26 // <li id="m_2" class='m_li' onmouseover='mover(2);' onmouseout='mout(2);'><a href="#">政务公开</a></li>
27 // <li class="m_line"><img src=" http://www.codefans.net/jscss/demoimg/200904/line2.gif " /></li>
28 // <li id="m_3" class='m_li' onmouseover='mover(3);' onmouseout='mout(3);'><a href="#">网上办事</a></li>
29 // <li class="m_line"><img src=" http://www.codefans.net/jscss/demoimg/200904/line2.gif " /></li>
30 // <li id="m_4" class='m_li' onmouseover='mover(4);' onmouseout='mout(4);'><a href="#">公告中心</a></li>
31 // <li class="m_line"><img src=" http://www.codefans.net/jscss/demoimg/200904/line2.gif " /></li>
32 // <li id="m_5" class='m_li' onmouseover='mover(5);' onmouseout='mout(5);'><a href="#">法规中心</a></li>
33 // <li class="m_line"><img src=" http://www.codefans.net/jscss/demoimg/200904/line2.gif " /></li>
34 // <li id="m_6" class='m_li' onmouseover='mover(6);' onmouseout='mout(6);'><a href="#">财税文化</a></li>
35 // <li class="m_line"><img src=" http://www.codefans.net/jscss/demoimg/200904/line2.gif " /></li>
36 // <li id="m_7" class='m_li' onmouseover='mover(7);' onmouseout='mout(7);'><a href="#">专题宣传</a></li>
37 // <li class="m_line"><img src=" http://www.codefans.net/jscss/demoimg/200904/line2.gif " /></li>
38 // </ul>
39 // </div>
40
41
42 /*
43 * 这些就是用于主菜单的 我们要把“政务公开”这些换成数据库的名字，<a href="#">中的#也要换成我们数据库的链接
44 *
45 * 发现<img src="jscss/demoimg/200904/line2.gif" />在本机找不到图片 所以在前面加上http://www.codefans.net/就当引用他网站中的图片了
46 *
47 * 开抄.
48 */
49
50 StringBuilder LeftList = new StringBuilder(); // 声明一个LeftList 用于后面拼接
51 try
52 {
53 LeftList.Append( " <div id=\"menu\"> " );
54 LeftList.Append( " <ul> " );
55 // 取出所有数据 (这里用的是我大一时候写的SqlHelper请大家不要笑话.)
56 DataTable Dt_TotleMenu = SqlHelper.ReturnDataTable( " select * from Ziye_Menu " , CommandType.Text);
57 DataRow[] drMenu = Dt_TotleMenu.Select( " Menu_Fid=0 and Menu_able=1 " ); // 取出所有启用的父节点
58 DataTable LeftMenuTable = new DataTable(); // 构建父节点的table
59 LeftMenuTable = drMenu[ 0 ].Table.Clone();
60 foreach (DataRow dr in drMenu)
61 {
62 LeftMenuTable.ImportRow(dr);
63 }
64
65 if (LeftMenuTable.Rows.Count != 0 )
66 {
67 for ( int i = 0 ; i < LeftMenuTable.Rows.Count; i ++ )
68 {
69 /*
70 *观察菜单可以看出 一个节点可以包含
71 *<li class="m_line"><img src="/jscss/demoimg/200904/line2.gif" /></li>-------图片
72 *<li id="m_1" class='m_li_a'><a href="#">财税首页</a></li>--------链接和名字
73 * 这两个那么最后应该少一个
74 * <li class="m_line"><img src=" http://www.codefans.net/jscss/demoimg/200904/line2.gif " /></li>---图片
75 */
76 LeftList.Append( " <li class=\"m_line\"><img src=\"http://www.codefans.net/jscss/demoimg/200904/line2.gif\" /></li> " ); // 添加图片
77 if (i != 0 )
78 {
79 LeftList.Append( " <li id=\"m_ " + (i + 1 ) + " \" class='m_li' onmouseover='mover( " + (i + 1 ) + " );' onmouseout='mout( " + (i + 1 ) + " );'><a href= " + LeftMenuTable.Rows[i][ " Menu_Url " ].ToString() + " > " + LeftMenuTable.Rows[i][ " Menu_Name " ].ToString() + " </a></li> " );
80 }
81 else
82 {
83 LeftList.Append( " <li id=\"m_1\" class='m_li_a'><a href=\"#\">首页</a></li> " );
84 }
85 // 到此循环全部搞定。然后我们不要忘记缺了最后一行
86 }
87 LeftList.Append( " <li class=\"m_line\"><img src=\"http://www.codefans.net/jscss/demoimg/200904/line2.gif\" /></li> " );
88 LeftList.Append( " </ul> " );
89 LeftList.Append( " </div> " );
90 // 上面的HTML 全部拼接完成
91 }
92
93 /*
94 * 到这里我们父级菜单就算绑定完了。接下来看子菜单
95 * <div s6tyle="height:32px; background-color:#F1F1F1;">
96
97 * <ul class="smenu">
98
99 * <li id="s_1" class='s_li_a'>大家好我是子夜</li>
100
101 * <li id="s_2" class='s_li' onmouseover='mover(2);' onmouseout='mout(2);'><a href="/">财税简介</a> | <a href="#">机构设置</a> | <a href="/">办事指南</a> | <a href="/">税种简介</a> | <a href="/">财税动态</a> | <a href="/">网页特效</a></li>
102
103 * <li id="s_3" class='s_li' onmouseover='mover(3);' onmouseout='mout(3);'><a href="/">下载专区</a> | <a href="/">上传专区</a> | <a href="#">申请报名</a> | <a href="#">查询系统</a> | <a href="#">咨询投诉</a> | <a href="/">满意调查</a></li>
104
105 * <li id="s_4" class='s_li' onmouseover='mover(4);' onmouseout='mout(4);'><a href="/">最新公告</a> | <a href="/">会计通知</a></li>
106
107 * <li id="s_5" class='s_li' onmouseover='mover(5);' onmouseout='mout(5);'><a href="/">最新政策</a> | <a href="#">政策法规查询</a></li>
108
109 * <li id="s_6" class='s_li' onmouseover='mover(6);' onmouseout='mout(6);'><a href="/">税收宣传</a> | <a href="/">最新更新</a> | <a href="#">文明创建</a> | <a href="#" target="_blank">青年论坛</a> | <a href="#">廉政课堂</a></li>
110
111 * <li id="s_7" class='s_li' onmouseover='mover(7);' onmouseout='mout(7);'><a href="/">专题宣传区</a></li>
112
113 * </ul>
114
115 *</div>
116 *
117 * 前面那些不看 （<li style="padding-left:141px;" id="s_2" class='s_li' onmouseover='mover(2);' onmouseout='mout(2);'>）
118 *
119 * 就看这个链接
120 *
121 * <a href="/">财税简介</a> | <a href="#">机构设置</a> | <a href="/">办事指南</a> | <a href="/">税种简介</a> | <a href="/">财税动态</a> | <a href="/">网页特效</a></li>
122 *
123 * 这些链接是属于一个父节点下的所有子节点拼接的。我们依照上面一样的改。
124 */
125
126
127
128 // 先拼接子菜单的前两行
129 LeftList.Append( " <div s6tyle=\"height:32px; background-color:#F1F1F1;\"> " );
130 LeftList.Append( " <ul class=\"smenu\"> " );
131
132
133 // 遍历每一个父节点 取它下所有的子节点。然后拼子节点的HTML
134 for ( int j = 0 ; j < LeftMenuTable.Rows.Count; j ++ )
135 {
136
137 /* 因为<li id="s_2" class='s_li' onmouseover='mover(2);' onmouseout='mout(2);'><a href="/">财税简介</a> | <a href="#">机构设置</a> | <a href="/">办事指南</a> | <a href="/">税种简介</a> | <a href="/">财税动态</a> | <a href="/">网页特效</a></li>
138 *
139 * 所以每次遍历的时候我们先把<li id="s_2" class='s_li' onmouseover='mover(2);' onmouseout='mout(2);'>添加上
140 *
141 * 然后在遍历拼接子节点 <a href="/">财税简介</a> | <a href="#">机构设置</a> | <a href="/">办事指南</a> | <a href="/">税种简介</a> | <a href="/">财税动态</a> | <a href="/">网页特效</a>
142 *
143 * 最后加上</li> 即可
144 *
145 */
146
147 // 寻找父ID为当前父ID的子节点
148 DataRow[] drSencondMenu = Dt_TotleMenu.Select( " Menu_Fid=' " + LeftMenuTable.Rows[j][ " Menu_ID " ] + " ' and Menu_able=1 " );
149 DataTable SecondTable = new DataTable();
150 SecondTable = drSencondMenu[ 0 ].Table.Clone();
151 foreach (DataRow dr in drSencondMenu)
152 {
153 SecondTable.ImportRow(dr);
154 }
155
156
157 if (SecondTable.Rows.Count != 0 ) // 证明此父节点存在子节点
158 {
159 if (j == 0 )
160 {
161 LeftList.Append( " <li id=\"s_1\" class='s_li_a'>大家好我是子夜</li> " );
162 }
163 else
164 {
165 LeftList.Append( " <li id=\"s_ " + (j + 1 ) + " \" class='s_li' onmouseover='mover( " + (j + 1 ) + " );' onmouseout='mout( " + (j + 1 ) + " );'> " );
166 // 遍历拼接子节点的HTML
167 for ( int k = 0 ; k < SecondTable.Rows.Count; k ++ )
168 {
169
170 LeftList.Append( " <a href= " + SecondTable.Rows[k][ " Menu_Url " ].ToString() + " > " + SecondTable.Rows[k][ " Menu_Name " ].ToString() + " </a> " );
171
172 if (k != SecondTable.Rows.Count - 1 ) // 如果是最后一项就不加 | 了.^_^
173 {
174 LeftList.Append( " | " );
175 }
176 }
177 }
178 LeftList.Append( " </li> " );
179
180 }
181 }
182 LeftList.Append( " </ul> " );
183 LeftList.Append( " </div> " );
184 return LeftList.ToString();
185
186 }
187 catch (Exception err)
188 {
189 return " 没菜单 " ;
190 }
191 }
192 }
193 }
效果 :
193行代码 其实我们可以优化的。
比如在一个FOR循环中拼接父节点和子节点的HTML。
也可以写一个递归的方法来用。这里用简单的DataTable.来拼接的html.其实代码不是最重要的。重要的是一种思想。
有兴趣的小鸟们可以练习练习。也可以去网上抄袭几个留着以后用.
下篇 来个实战。练练抄袭的功力.
http://www.cnblogs.com/Gavinzhao/archive/2011/05/08/2026542.html
作者： Leo_wl
出处： http://www.cnblogs.com/Leo_wl/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
版权信息