1.menu表数据
2.在后台生成html内容后,前台利用nav-h.css生成menu导航条,利用Jquery的treeview插件生成menu树
前台coding:
<!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 runat="server">
<link href="Scripts/jquery.treeview.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript" src="Scripts/jquery-1.8.2.js"></script>
<script language="javascript" type="text/javascript" src="Scripts/jquery.treeview.js"></script>
<link href="Scripts/nav-h.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.menu{ margin:10px 0 0px; position:absolute; right:20px; z-index:99;}
.menu ul{ list-style:none;}
.menu ul li{ float:left;}
.menu ul li a{ border:1px solid #bbb; background-color:#cdcdcd; }
</style>
</head>
<body>
<div runat="server" id="menu" class="menu"></div>
<div runat="server" id="tree" style="border: 1px solid rgb(221, 221, 221);width: 250px;margin-right: 2px;top: 5px;left: 0;"></div>
<script type="text/javascript">
$(document).ready(function () {
$("#menuTree").treeview();
});
</script>
</body>
</html>
后台coding:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
string menuHtml = string.Empty;
menuHtml = BuildMenuWithRoot(null, string.Empty, "Tree");
tree.InnerHtml = menuHtml;
menuHtml = BuildMenuWithRoot(null, string.Empty, "Menu");
menu.InnerHtml = menuHtml;
}
}
public string BuildMenuWithRoot(int? parentId, string str, string type)
{
IEnumerable<menu> menus = GetMenuByParentId(parentId);
foreach (menu m in menus)
{
try
{
str += "<li><a id=\"" + m.Id.ToString() + "\" href=\"" + m.PageUrl + "\"><span>" + m.Description + "</span></a>";
str += BuildMenuWithRoot(m.Id, string.Empty, type);
str += "</li>";
}
catch
{
}
}
string idstr = string.Empty;
if (type == "Menu") idstr = " id=\"nav\"";
else if (type == "Tree") idstr = " id=\"menuTree\"";
if (menus.Count() > 0) str = "<ul"+idstr+ ">" + str+"</ul>";
return str;
}
public IEnumerable<menu> GetMenuByParentId(int? parentId)
{
WorkPermitDataContext db = new WorkPermitDataContext();
var query = from m in db.menus
where (parentId != null && m.ParentId == parentId) || (parentId == null && m.ParentId == null)
orderby m.OrderNumber
select m;
return query.AsEnumerable();
}
生成的menu树html:
<ul id="menuTree">
<li><a id="1" href="~/Home.aspx"><span>Home</span></a>
<ul id="menuTree">
<li><a id="2" href="~/Menu1.aspx"><span>Menu1</span></a>
<ul id="menuTree">
<li><a id="3" href="~/Menu11.aspx"><span>Menu1.1</span></a>
<ul id="menuTree">
<li><a id="5" href="~/Menu111.aspx"><span>Menu1.1.1</span></a></li>
<li><a id="75" href="~/Menu112.aspx"><span>Menu1.1.2</span></a></li>
</ul>
</li>
<li><a id="4" href="~/Menu12.aspx"><span>Menu1.2</span></a></li>
<li><a id="9" href="~/Menu13.aspx"><span>Menu1.3</span></a>
<ul id="menuTree">
<li><a id="10" href="~/Menu131"><span>Menu1.3.1</span></a></li>
</ul>
</li>
<li><a id="12" href="~/Menu14.aspx"><span>Menu1.4</span></a></li>
</ul>
</li>
<li><a id="76" href="~/Menu2.aspx"><span>Menu2</span></a></li>
<li><a id="78" href="~/Menu3.aspx"><span>Menu3</span></a></li>
</ul>
</li>
</ul>
menu树的浏览器效果:
生成的menu导航条html:
<ul id="nav">
<li><a id="1" href="~/Home.aspx"><span>Home</span></a>
<ul id="nav">
<li><a id="2" href="~/Menu1.aspx"><span>Menu1</span></a>
<ul id="nav">
<li><a id="3" href="~/Menu11.aspx"><span>Menu1.1</span></a>
<ul id="nav">
<li><a id="5" href="~/Menu111.aspx"><span>Menu1.1.1</span></a></li>
<li><a id="75" href="~/Menu112.aspx"><span>Menu1.1.2</span></a></li>
</ul>
</li>
<li><a id="4" href="~/Menu12.aspx"><span>Menu1.2</span></a></li>
<li><a id="9" href="~/Menu13.aspx"><span>Menu1.3</span></a>
<ul id="nav">
<li><a id="10" href="~/Menu131"><span>Menu1.3.1</span></a></li>
</ul>
</li>
<li><a id="12" href="~/Menu14.aspx"><span>Menu1.4</span></a></li>
</ul>
</li>
<li><a id="76" href="~/Menu2.aspx"><span>Menu2</span></a></li>
<li><a id="78" href="~/Menu3.aspx"><span>Menu3</span></a></li>
</ul>
</li>
</ul>
menu导航的浏览器效果:
3.从上面可以看出,由于其它所有menu都是由root根节点生成,所以显示的树状结构并不符合我们的使用习惯,加以改进
后台coding:
public string BuildMenu(int? parentId, string str, string type)
{
IEnumerable<menu> menus = GetMenuByParentId(parentId);
foreach (menu m in menus)
{
try
{
if (parentId != null) str += "<li><a id=\"" + m.Id.ToString() + "\" href=\"" + m.PageUrl + "\"><span>" + m.Description + "</span></a>";
str += BuildMenu(m.Id, string.Empty, type);
if (parentId != null) str += "</li>";
}
catch
{
}
}
string idstr = string.Empty;
if (menus.Count() > 0)
{
if (parentId == null)
{
if (type == "Menu") idstr = "<ul id=\"nav\">";
if (type == "Tree") idstr = "<ul id=\"menuTree\">";
str = idstr + "<li><a href=\"~/Home.aspx\"><span>Home</span></a></li>" + str.Substring(4, str.Length - 9) + "</ul>";
}
else str = "<ul>" + str + "</ul>";
}
return str;
}
生成的menu树html
<ul id="menuTree">
<li><a href="~/Home.aspx"><span>Home</span></a></li>
<li><a id="2" href="~/Menu1.aspx"><span>Menu1</span></a>
<ul>
<li><a id="3" href="~/Menu11.aspx"><span>Menu1.1</span></a>
<ul>
<li><a id="5" href="~/Menu111.aspx"><span>Menu1.1.1</span></a></li>
<li><a id="75" href="~/Menu112.aspx"><span>Menu1.1.2</span></a></li>
</ul>
</li>
<li><a id="4" href="~/Menu12.aspx"><span>Menu1.2</span></a></li>
<li><a id="9" href="~/Menu13.aspx"><span>Menu1.3</span></a>
<ul>
<li><a id="10" href="~/Menu131"><span>Menu1.3.1</span></a></li>
</ul>
</li>
<li><a id="12" href="~/Menu14.aspx"><span>Menu1.4</span></a></li>
</ul>
</li>
<li><a id="76" href="~/Menu2.aspx"><span>Menu2</span></a></li>
<li><a id="78" href="~/Menu3.aspx"><span>Menu3</span></a></li>
</ul>
menu树浏览器效果
生成的menu导航条html
<ul id="nav">
<li><a href="~/Home.aspx"><span>Home</span></a></li>
<li><a id="2" href="~/Menu1.aspx"><span>Menu1</span></a>
<ul>
<li><a id="3" href="~/Menu11.aspx"><span>Menu1.1</span></a>
<ul>
<li><a id="5" href="~/Menu111.aspx"><span>Menu1.1.1</span></a></li>
<li><a id="75" href="~/Menu112.aspx"><span>Menu1.1.2</span></a></li>
</ul>
</li>
<li><a id="4" href="~/Menu12.aspx"><span>Menu1.2</span></a></li>
<li><a id="9" href="~/Menu13.aspx"><span>Menu1.3</span></a>
<ul>
<li><a id="10" href="~/Menu131"><span>Menu1.3.1</span></a></li>
</ul>
</li>
<li><a id="12" href="~/Menu14.aspx"><span>Menu1.4</span></a></li>
</ul>
</li>
<li><a id="76" href="~/Menu2.aspx"><span>Menu2</span></a></li>
<li><a id="78" href="~/Menu3.aspx"><span>Menu3</span></a></li>
</ul>
menu导航条浏览器效果
4.使用到的treeview插件可从官网下载
http://jquery.bassistance.de/treeview/demo/
nav-h.css内容如下
li:hover ul, li.over ul{ display:block;}
ul#nav {
position: relative;
}
ul#nav ul {
position: absolute; display: none; TOP: 100%; right: 0px;
}
ul#nav ul ul {
TOP: 0px; right: 100%
}
ul#nav ul ul ul {
TOP: 0px; right: 100%
}
ul#nav LI {
position: relative; display: inline; FLOAT: left;
}
ul#nav ul LI {
display: block;width:250px
}
ul#nav A {
display: block; background: #ddd; FLOAT: left; HEIGHT: 1%; COLOR: #666; BORDER-TOP: #fff 1px solid; BORDER-RIGHT: #fff 1px solid; TEXT-DECORATION: none; padding:3px 20px
}
ul#nav A:hover {
background: #bbb; COLOR: #fff
}
ul#nav LI:hover A {
background: #bbb; COLOR: #fff;
}
ul#nav LI:hover LI A {
background: #bbb; FLOAT: none ;padding:3px 6px;
}
ul#nav LI:hover LI A:hover {
background: #999
}
ul#nav LI:hover LI:hover A {
background: #999
}
ul#nav LI:hover LI:hover LI A {
background: #999
}
ul#nav LI:hover LI:hover LI A:hover {
background: #666
}
ul#nav LI:hover LI:hover LI:hover A {
background: #666
}
ul#nav LI:hover LI:hover LI:hover LI A {
background: #666
}
ul#nav LI:hover LI:hover LI:hover LI A:hover {
background: #333
}
ul#nav LI:hover ul ul {
display: none
}
ul#nav LI:hover ul ul ul {
display: none
}
ul#nav LI:hover ul {
display: block
}
ul#nav ul LI:hover ul {
display: block
}
ul#nav ul ul LI:hover ul {
display: block
}