// html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<title>動態綁定menu</title>
<script src="scripts/jquery-1.7.min.js" type="text/javascript"></script>
<link href="css/Menu.css" rel="stylesheet" type="text/css" />
<script src="scripts/menu.js" type="text/javascript"></script>
</head>
<body >
<div id="menu">
<ul id="MenuCategory">
</ul>
</div>
</body>
</html>
//ashx
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data;
using System.Data.SqlClient;
using Sql;
using System.Text;
namespace Menu
{
/// <summary>
/// MenuItem 的摘要說明
/// </summary>
public class MenuItem : IHttpHandler
{
SqlDataReader dr = null; SqlDataReader subdr=null;
StringBuilder builder = new StringBuilder();
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
context.Response.Charset = "utf-8";
BindMenu(context);
}
public void BindMenu(HttpContext context)
{
string sql = "select * from MenuItem where ParentId=0";
dr = SqlHelper.GetReader(sql, null, CommandType.Text);
while (dr.Read())
{
builder.Append("<li class='mainlevel' id='" + dr.GetInt32(0).ToString() + "'><a href=#>" + dr.GetString(1) + "</a>");
BindSubMenu(dr.GetInt32(0));
}
string returnMenu = builder.ToString();
context.Response.Write(returnMenu);
dr.Close();
}
public void BindSubMenu(int parentid)
{
string subsql ="select * from MenuItem where ParentId='" + parentid + "'";
builder.Append("<ul>");
subdr=SqlHelper.GetReader(subsql, null, CommandType.Text);
while(subdr.Read())
{
string href = subdr.GetString(4);
builder.Append("<li id='" + subdr.GetInt32(0).ToString() + "'><a href='" + href + "'>" + subdr.GetString(1) + "</a></li>");
}
builder.Append("</ul></li>");
subdr.Close();
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
//css
ul, li{padding:0; margin:0;}
#menu{ margin:1% 10% 0}
#MenuCategory {display:block;text-align:center; color:#fff;font:18px "微軟雅黑"; }
#MenuCategory .mainlevel {background:#84bbe9; float:left; border-right:1px solid #fff; width:140px; list-style:none}
#MenuCategory .mainlevel a {color:#000; text-decoration:none; line-height:32px; display:block; width:140px;}
#MenuCategory .mainlevel a:hover {color:#fff; text-decoration:none; background:#062723 url(../images/nav_bg.jpg) 0 0}
#MenuCategory .mainlevel ul {display:none; position:absolute;}
#MenuCategory .mainlevel li {border-top:1px solid #fff; background:#84bbe9; width:140px; list-style:none}
//js
$(function () {
$("#MenuCategory").load("MenuItem.ashx", function (data) {
//the first way
// $('li.mainlevel').mousemove(function () {
// $(this).find('ul').slideDown();
// });
// $('li.mainlevel').mouseleave(function () {
// $(this).find('ul').slideUp();
// });
//the second way
$(".mainlevel").mouseover(function () {
$(this).children("ul").show();
});
$(".mainlevel").mouseleave(function () {
$(this).children("ul").hide();
});
});
});
