|
相信大家做網(wǎng)頁(yè)的時(shí)候都會(huì)用到菜單,。最近在CSDN上答題的時(shí)候,，問(wèn)動(dòng)態(tài)菜單的還是比較多,。這次就整3個(gè)動(dòng)態(tài)菜單給同學(xué)們玩玩,。方便剛?cè)腴T的小鳥速度掌握。 正所謂天下文章大家抄,，抄來(lái)抄去有提高.去百度一個(gè)JS+CSS菜單,。CSS菜單 效果還算一般。我們把它抄襲下來(lái) 以后留用.
先來(lái)看看HTML  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www./1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>導(dǎo)航菜單</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="#">財(cái)稅首頁(yè)</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="#">政務(wù)公開(kāi)</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="#">網(wǎng)上辦事</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="#">法規(guī)中心</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="#">財(cái)稅文化</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="/">財(cái)稅簡(jiǎn)介</a> | <a href="#">機(jī)構(gòu)設(shè)置</a> | <a href="/">辦事指南</a> | <a href="/">稅種簡(jiǎn)介</a> | <a href="/">財(cái)稅動(dòng)態(tài)</a> | <a href="/">網(wǎng)頁(yè)特效</a></li> <li style="padding-left:252px;" id="s_3" class='s_li' onmouseover='mover(3);' onmouseout='mout(3);'><a href="/">下載專區(qū)</a> | <a href="/">上傳專區(qū)</a> | <a href="#">申請(qǐng)報(bào)名</a> | <a href="#">查詢系統(tǒng)</a> | <a href="#">咨詢投訴</a> | <a href="/">滿意調(diào)查</a></li> <li style="padding-left:362px;" id="s_4" class='s_li' onmouseover='mover(4);' onmouseout='mout(4);'><a href="/">最新公告</a> | <a href="/">會(huì)計(jì)通知</a></li> <li style="padding-left:474px;" id="s_5" class='s_li' onmouseover='mover(5);' onmouseout='mout(5);'><a href="/">最新政策</a> | <a href="#">政策法規(guī)查詢</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="#">文明創(chuàng)建</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="/">專題宣傳區(qū)</a></li> </ul> </div> </body> </html> 其中有定義的JS和CSS 不會(huì)不要緊,。因?yàn)槲覀兛梢猿? OK開(kāi)工。新建一個(gè)頁(yè)面.講這些代碼復(fù)制進(jìn)去 不解釋. 仔細(xì)觀察一下,。 DIV的ID為MENU的貌似是父菜單,。而下面那個(gè)DIV是加載上去的。那我們就從后臺(tái)返回兩個(gè)字符串用于頁(yè)面綁定。一個(gè)也可以搞定。 創(chuàng)建數(shù)據(jù)庫(kù) 1 USE [CSDN_Ziye] 2 GO 3 /****** 對(duì)象: 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] 其中有幾個(gè)字段不需要,。具體是干嘛的,。下一篇會(huì)用到,。。 采用拼接字符串。就像我經(jīng)常CSDN解答的那樣。 前臺(tái)<%=str %> 后臺(tái)public static string str=string.Empty;
建立個(gè)頁(yè)面開(kāi)整 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./TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 <html xmlns="http://www./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./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> 接下來(lái)是后臺(tái)代碼看注釋.  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="#">財(cái)稅首頁(yè)</a></li> 25 //<li class="m_line"><img src="http://www./jscss/demoimg/200904/line2.gif" /></li> 26 //<li id="m_2" class='m_li' onmouseover='mover(2);' onmouseout='mout(2);'><a href="#">政務(wù)公開(kāi)</a></li> 27 //<li class="m_line"><img src="http://www./jscss/demoimg/200904/line2.gif" /></li> 28 //<li id="m_3" class='m_li' onmouseover='mover(3);' onmouseout='mout(3);'><a href="#">網(wǎng)上辦事</a></li> 29 //<li class="m_line"><img src="http://www./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./jscss/demoimg/200904/line2.gif" /></li> 32 //<li id="m_5" class='m_li' onmouseover='mover(5);' onmouseout='mout(5);'><a href="#">法規(guī)中心</a></li> 33 //<li class="m_line"><img src="http://www./jscss/demoimg/200904/line2.gif" /></li> 34 //<li id="m_6" class='m_li' onmouseover='mover(6);' onmouseout='mout(6);'><a href="#">財(cái)稅文化</a></li> 35 //<li class="m_line"><img src="http://www./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./jscss/demoimg/200904/line2.gif" /></li> 38 //</ul> 39 //</div> 40 41 42 /* 43 * 這些就是用于主菜單的 我們要把“政務(wù)公開(kāi)”這些換成數(shù)據(jù)庫(kù)的名字,，<a href="#">中的#也要換成我們數(shù)據(jù)庫(kù)的鏈接 44 * 45 * 發(fā)現(xiàn)<img src="jscss/demoimg/200904/line2.gif" />在本機(jī)找不到圖片 所以在前面加上http://www./就當(dāng)引用他網(wǎng)站中的圖片了 46 * 47 * 開(kāi)抄. 48 */ 49 50 StringBuilder LeftList = new StringBuilder();//聲明一個(gè)LeftList 用于后面拼接 51 try 52 { 53 LeftList.Append("<div id=\"menu\">"); 54 LeftList.Append("<ul>"); 55 //取出所有數(shù)據(jù) (這里用的是我大一時(shí)候?qū)懙腟qlHelper請(qǐng)大家不要笑話.) 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");//取出所有啟用的父節(jié)點(diǎn) 58 DataTable LeftMenuTable = new DataTable();//構(gòu)建父節(jié)點(diǎn)的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 *觀察菜單可以看出 一個(gè)節(jié)點(diǎn)可以包含 71 *<li class="m_line"><img src="/jscss/demoimg/200904/line2.gif" /></li>-------圖片 72 *<li id="m_1" class='m_li_a'><a href="#">財(cái)稅首頁(yè)</a></li>--------鏈接和名字 73 * 這兩個(gè)那么最后應(yīng)該少一個(gè) 74 * <li class="m_line"><img src="http://www./jscss/demoimg/200904/line2.gif" /></li>---圖片 75 */ 76 LeftList.Append("<li class=\"m_line\"><img src=\"http://www./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=\"#\">首頁(yè)</a></li>"); 84 } 85 //到此循環(huán)全部搞定。然后我們不要忘記缺了最后一行 86 } 87 LeftList.Append("<li class=\"m_line\"><img src=\"http://www./jscss/demoimg/200904/line2.gif\" /></li>"); 88 LeftList.Append("</ul>"); 89 LeftList.Append("</div>"); 90 //上面的HTML 全部拼接完成 91 } 92 93 /* 94 * 到這里我們父級(jí)菜單就算綁定完了,。接下來(lái)看子菜單 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="/">財(cái)稅簡(jiǎn)介</a> | <a href="#">機(jī)構(gòu)設(shè)置</a> | <a href="/">辦事指南</a> | <a href="/">稅種簡(jiǎn)介</a> | <a href="/">財(cái)稅動(dòng)態(tài)</a> | <a href="/">網(wǎng)頁(yè)特效</a></li> 102 103 * <li id="s_3" class='s_li' onmouseover='mover(3);' onmouseout='mout(3);'><a href="/">下載專區(qū)</a> | <a href="/">上傳專區(qū)</a> | <a href="#">申請(qǐng)報(bào)名</a> | <a href="#">查詢系統(tǒng)</a> | <a href="#">咨詢投訴</a> | <a href="/">滿意調(diào)查</a></li> 104 105 * <li id="s_4" class='s_li' onmouseover='mover(4);' onmouseout='mout(4);'><a href="/">最新公告</a> | <a href="/">會(huì)計(jì)通知</a></li> 106 107 * <li id="s_5" class='s_li' onmouseover='mover(5);' onmouseout='mout(5);'><a href="/">最新政策</a> | <a href="#">政策法規(guī)查詢</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="#">文明創(chuàng)建</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="/">專題宣傳區(qū)</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 * 就看這個(gè)鏈接 120 * 121 * <a href="/">財(cái)稅簡(jiǎn)介</a> | <a href="#">機(jī)構(gòu)設(shè)置</a> | <a href="/">辦事指南</a> | <a href="/">稅種簡(jiǎn)介</a> | <a href="/">財(cái)稅動(dòng)態(tài)</a> | <a href="/">網(wǎng)頁(yè)特效</a></li> 122 * 123 * 這些鏈接是屬于一個(gè)父節(jié)點(diǎn)下的所有子節(jié)點(diǎn)拼接的,。我們依照上面一樣的改。 124 */ 125 126 127 128 //先拼接子菜單的前兩行 129 LeftList.Append("<div s6tyle=\"height:32px; background-color:#F1F1F1;\">"); 130 LeftList.Append("<ul class=\"smenu\">"); 131 132 133 //遍歷每一個(gè)父節(jié)點(diǎn) 取它下所有的子節(jié)點(diǎn),。然后拼子節(jié)點(diǎn)的HTML 134 for (int j = 0; j < LeftMenuTable.Rows.Count; j++) 135 { 136 137 /*因?yàn)?lt;li id="s_2" class='s_li' onmouseover='mover(2);' onmouseout='mout(2);'><a href="/">財(cái)稅簡(jiǎn)介</a> | <a href="#">機(jī)構(gòu)設(shè)置</a> | <a href="/">辦事指南</a> | <a href="/">稅種簡(jiǎn)介</a> | <a href="/">財(cái)稅動(dòng)態(tài)</a> | <a href="/">網(wǎng)頁(yè)特效</a></li> 138 * 139 * 所以每次遍歷的時(shí)候我們先把<li id="s_2" class='s_li' onmouseover='mover(2);' onmouseout='mout(2);'>添加上 140 * 141 * 然后在遍歷拼接子節(jié)點(diǎn) <a href="/">財(cái)稅簡(jiǎn)介</a> | <a href="#">機(jī)構(gòu)設(shè)置</a> | <a href="/">辦事指南</a> | <a href="/">稅種簡(jiǎn)介</a> | <a href="/">財(cái)稅動(dòng)態(tài)</a> | <a href="/">網(wǎng)頁(yè)特效</a> 142 * 143 * 最后加上</li> 即可 144 * 145 */ 146 147 //尋找父ID為當(dāng)前父ID的子節(jié)點(diǎn) 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)//證明此父節(jié)點(diǎn)存在子節(jié)點(diǎn) 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 //遍歷拼接子節(jié)點(diǎn)的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)//如果是最后一項(xiàng)就不加 | 了.^_^ 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 "沒(méi)菜單"; 190 } 191 } 192 } 193 }
效果 :
193行代碼 其實(shí)我們可以優(yōu)化的,。 比如在一個(gè)FOR循環(huán)中拼接父節(jié)點(diǎn)和子節(jié)點(diǎn)的HTML。 也可以寫一個(gè)遞歸的方法來(lái)用,。這里用簡(jiǎn)單的DataTable.來(lái)拼接的html.其實(shí)代碼不是最重要的,。重要的是一種思想。 有興趣的小鳥們可以練習(xí)練習(xí),。也可以去網(wǎng)上抄襲幾個(gè)留著以后用. 下篇 來(lái)個(gè)實(shí)戰(zhàn),。練練抄襲的功力. 繼續(xù)搶分了. PS:源碼在下一篇有下載.
|
|
|
