菜单

 相信大家做网页的时候都会用到菜单。最近在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