相信大家做网页的时候都会用到菜单。最近在CSDN上答题的时候,问动态菜单的还是比较多。这次就整3个动态菜单给同学们玩玩。方便刚入门的小鸟速度掌握。 正所谓天下文章大家抄,抄来抄去有提高.去百度一个JS+CSS菜单。CSS菜单 效果还算一般。我们把它抄袭下来 以后留用.
先来看看HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www./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./TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 <html xmlns="http://www./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./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./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./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./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./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./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./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./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./就当引用他网站中的图片了 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./jscss/demoimg/200904/line2.gif" /></li>---图片 75 */ 76 LeftList.Append("<li class=\"m_line\"><img src=\"http://www./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./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.其实代码不是最重要的。重要的是一种思想。 有兴趣的小鸟们可以练习练习。也可以去网上抄袭几个留着以后用. 下篇 来个实战。练练抄袭的功力. 继续抢分了. PS:源码在下一篇有下载.
|
|