动态菜单(一)

相信大家做网页的时候都会用到菜单。最近在CSDN上答题的时候，问动态菜单的还是比较多。这次就整3个动态菜单给同学们玩玩。方便刚入门的小鸟速度掌握。

    正所谓天下文章大家抄，抄来抄去有提高.去百度一个JS+CSS菜单。CSS菜单

    效果还算一般。我们把它抄袭下来 以后留用.

  

 

  先来看看HTML

 

[html] view plaincopy
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5. <title>导航菜单</title>  
  6. <style>  
  7. body,td,th {  
  8.     font-family: Tahoma, Verdana, Arial, sans-serif;  
  9.     font-size: 12px;  
  10.     color: #333333;  
  11. }  
  12. body {  
  13.     margin-left: 0px;  
  14.     margin-top: 0px;  
  15.     margin-right: 0px;  
  16.     margin-bottom: 0px;  
  17. }  
  18. a {  
  19.     color: #333333;  
  20.     text-decoration: none;  
  21. }  
  22. a:hover {  
  23.     color: #FF0000;  
  24.     text-decoration: none;  
  25. }  
  26. a:active{  
  27.     color: #FF0000;  
  28.     text-decoration: none;  
  29. }  
  30. #menu{  
  31.     height:32px;  
  32.     margin-top:8px; background-color:#990000;  
  33. }  
  34. #menu ul{  
  35.     margin:auto; width:778px; height:32px;  
  36.     list-style-type:none; padding:0px; margin-top:0px; margin-bottom:0px;  
  37. }  
  38. .m_li{  
  39.     float:left; width:114px; line-height:32px;  text-align:center; margin-right:-2px; margin-left:-2px;  
  40. }  
  41. .m_li a{  
  42.     display:block; color:#FFFFFF; width:114px;  
  43. }  
  44. .m_line{  
  45.     float:left; width:1px; height:32px;  
  46.     line-height:32px;   /*ff下有效(图片垂直居中)*/  
  47. }  
  48. .m_line img{  
  49.     margin-top:expression(( 32 - this.height ) / 2);   /*ie下有效(图片垂直居中)*/  
  50. }  
  51. .m_li_a{  
  52.     float:left; width:114px; line-height:32px; text-align:center; padding-top:3px; font-weight:bold;  
  53.     background-image:url(/jscss/demoimg/200904/menu_bg2.jpg); position:relative; height:32px; margin-top:-3px; margin-right:-2px; margin-left:-2px;  
  54. }  
  55. .m_li_a a{  
  56.     display:block; color:#FF0000; width:114px;  
  57. }  
  58.   
  59. .smenu{  
  60.     width:774px; margin:0px auto 0px auto; padding:0px; list-style-type:none; height:32px;  
  61. }  
  62. .s_li{  
  63.     line-height:32px; width:auto; display:none; height:32px;   
  64. }  
  65. .s_li_a{  
  66.     line-height:32px; width:auto; display:block; height:32px;   
  67. }  
  68. </style>  
  69. <script>  
  70. //初始化  
  71. var def="1";  
  72. function mover(object){  
  73.   //主菜单  
  74.   var mm=document.getElementById("m_"+object);  
  75.   mm.className="m_li_a";  
  76.   //初始主菜单隐藏效果  
  77.   if(def!=0){  
  78.     var mdef=document.getElementById("m_"+def);  
  79.     mdef.className="m_li";  
  80.   }  
  81.   //子菜单  
  82.   var ss=document.getElementById("s_"+object);  
  83.   ss.style.display="block";  
  84.   //初始子菜单隐藏效果  
  85.   if(def!=0){  
  86.     var sdef=document.getElementById("s_"+def);  
  87.     sdef.style.display="none";  
  88.   }  
  89. }  
  90.   
  91. function mout(object){  
  92.   //主菜单  
  93.   var mm=document.getElementById("m_"+object);  
  94.   mm.className="m_li";  
  95.   //初始主菜单  
  96.   if(def!=0){  
  97.     var mdef=document.getElementById("m_"+def);  
  98.     mdef.className="m_li_a";  
  99.   }  
  100.   //子菜单  
  101.   var ss=document.getElementById("s_"+object);  
  102.   ss.style.display="none";  
  103.   //初始子菜单  
  104.   if(def!=0){  
  105.     var sdef=document.getElementById("s_"+def);  
  106.     sdef.style.display="block";  
  107.   }  
  108. }  
  109. </script>  
  110. </head>  
  111. <body>  
  112. <div id="menu">  
  113.   <ul>  
  114.     <li class="m_line"><img src="/jscss/demoimg/200904/line2.gif" /></li>  
  115.     <li id="m_1" class='m_li_a'><a href="#">财税首页</a></li>  
  116.     <li class="m_line"><img src="/jscss/demoimg/200904/line2.gif" /></li>  
  117.     <li id="m_2" class='m_li' onmouseover='mover(2);' onmouseout='mout(2);'><a href="#">政务公开</a></li>  
  118.     <li class="m_line"><img src="/jscss/demoimg/200904/line2.gif" /></li>  
  119.     <li id="m_3" class='m_li' onmouseover='mover(3);' onmouseout='mout(3);'><a href="#">网上办事</a></li>  
  120.     <li class="m_line"><img src="/jscss/demoimg/200904/line2.gif" /></li>  
  121.     <li id="m_4" class='m_li' onmouseover='mover(4);' onmouseout='mout(4);'><a href="#">公告中心</a></li>  
  122.     <li class="m_line"><img src="/jscss/demoimg/200904/line2.gif" /></li>  
  123.     <li id="m_5" class='m_li' onmouseover='mover(5);' onmouseout='mout(5);'><a href="#">法规中心</a></li>  
  124.     <li class="m_line"><img src="/jscss/demoimg/200904/line2.gif" /></li>  
  125.     <li id="m_6" class='m_li' onmouseover='mover(6);' onmouseout='mout(6);'><a href="#">财税文化</a></li>  
  126.     <li class="m_line"><img src="/jscss/demoimg/200904/line2.gif" /></li>  
  127.     <li id="m_7" class='m_li' onmouseover='mover(7);' onmouseout='mout(7);'><a href="#">专题宣传</a></li>  
  128.     <li class="m_line"><img src="/jscss/demoimg/200904/line2.gif" /></li>  
  129.   </ul>  
  130. </div>  
  131. <div style="height:32px; background-color:#F1F1F1;">  
  132.    <ul class="smenu">  
  133.      <li style="padding-left:29px;" id="s_1" class='s_li_a'>您是本站第13122842位访客！</li>  
  134.      <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>  
  135.      <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>  
  136.      <li style="padding-left:362px;" id="s_4" class='s_li' onmouseover='mover(4);' onmouseout='mout(4);'><a href="/">最新公告</a>  |  <a href="/">会计通知</a></li>  
  137.      <li style="padding-left:474px;" id="s_5" class='s_li' onmouseover='mover(5);' onmouseout='mout(5);'><a href="/">最新政策</a>  |  <a href="#">政策法规查询</a></li>  
  138.      <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>  
  139.      <li style="padding-left:696px;" id="s_7" class='s_li' onmouseover='mover(7);' onmouseout='mout(7);'><a href="/">专题宣传区</a></li>  
  140.    </ul>  
  141. </div>  
  142. </body>  
  143. </html>  


其中有定义的JS和CSS 不会不要紧。因为我们可以抄. OK开工。新建一个页面.讲这些代码复制进去 不解释.

仔细观察一下。 DIV的ID为MENU的貌似是父菜单。而下面那个DIV是加载上去的。那我们就从后台返回两个字符串用于页面绑定。一个也可以搞定。

创建数据库

[sql] view plaincopy
  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;

 

建立个页面开整

 

  
[html] view plaincopy
  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 id="Head1" 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>  

 接下来是后台代码看注释.

  
[csharp] view plaincopy
  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"& gt;<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>  |  & lt;a href="/">税种简介</a>  |  <a href="/">财税动态</a& gt;  |  <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>  |  & lt;a href="#">查询系统</a>  |  <a href="#">咨询投诉</a& gt;  |  <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>  |  & lt;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="/"& gt;财税简介</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>  |  & lt;a href="/">税种简介</a>  |  <a href="/">财税动态</a& gt;  |  <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="#">机构设置& lt;/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.其实代码不是最重要的。重要的是一种思想。

有兴趣的小鸟们可以练习练习。也可以去网上抄袭几个留着以后用.

下篇 来个实战。练练抄袭的功力.

继续抢分了.

PS:源码在下一篇有下载.

posted @ 2012-11-27 10:50  盛开的雨季  阅读(299)  评论(0)  编辑  收藏  举报