zoukankan      html  css  js  c++  java

  • 动态菜单(一)

    相信大家做网页的时候都会用到菜单。最近在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; 778px; height:32px;  
    36.     list-style-type:none; padding:0px; margin-top:0px; margin-bottom:0px;  
    37. }  
    38. .m_li{  
    39.     float:left; 114px; line-height:32px;  text-align:center; margin-right:-2px; margin-left:-2px;  
    40. }  
    41. .m_li a{  
    42.     display:block; color:#FFFFFF; 114px;  
    43. }  
    44. .m_line{  
    45.     float:left; 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; 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; 114px;  
    57. }  
    58.   
    59. .smenu{  
    60.     774px; margin:0px auto 0px auto; padding:0px; list-style-type:none; height:32px;  
    61. }  
    62. .s_li{  
    63.     line-height:32px; auto; display:none; height:32px;   
    64. }  
    65. .s_li_a{  
    66.     line-height:32px; 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.              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.              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.              114px;  
    68.         }  
    69.         .m_line  
    70.         {  
    71.             float: left;  
    72.              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.              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.              114px;  
    100.         }  
    101.         .smenu  
    102.         {  
    103.              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.              auto;  
    113.             display: none;  
    114.             height: 32px;  
    115.         }  
    116.         .s_li_a  
    117.         {  
    118.             line-height: 32px;  
    119.              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:源码在下一篇有下载.
  • 相关阅读:
    使用 Spring data redis 结合 Spring cache 缓存数据配置
    Spring Web Flow 笔记
    Linux 定时实行一次任务命令
    css js 优化工具
    arch Failed to load module "intel"
    go 冒泡排序
    go (break goto continue)
    VirtualBox，Kernel driver not installed (rc=-1908)
    go运算符
    go iota
  • 原文地址：https://www.cnblogs.com/weihengblogs/p/2790353.html
Copyright © 2011-2022 走看看