菜单 - W3CAPI 在线教程

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