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:源码在下一篇有下载.
  • 相关阅读:
    下拉选择框，允许手动输入和过滤
    MVC数据绑定
    一个页面多个ng-app注意事项
    modal 多层弹窗 Maximum call stack size exceeded 解决方法
    VS10x CodeMap 注册码（key）：
    VS2015卸载再安装
    VS2015无法创建工程
    解决VS2015版本key required问题手动方案
    猪猪公寓—事后诸葛亮
    猪猪公寓——测试总结
  • 原文地址：https://www.cnblogs.com/weihengblogs/p/2790353.html
Copyright © 2011-2022 走看看