動態menu導航條以及treeview樹
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
}
相關文章
- vue元件之路之menu導航選單Vue元件
- CSS 動態導航選單CSS
- BootstrapBlazor實戰 Menu 導航選單使用(1)bootBlazor
- BootstrapBlazor實戰 Menu 導航選單使用(2)bootBlazor
- asp.net TreeView動態新增ASP.NETView
- 拖動滾動條實現側欄導航定位效果
- Android 啟動引導頁(動態生成底部導航圓點)Android
- TreeView樹狀結構View
- css3實現動態導航選單CSSS3
- tpextbuilder- 左側樹形導航UI
- 根據瀏覽器的滑動條 固定導航欄瀏覽器
- 如何讓 fixed 定位的導航條可橫向滾動?
- web元件之導航條(Bootstrap navbar)Web元件boot
- Bootstrap系列 -- 43. 固定導航條boot
- 頭部導航欄也是動態的,板塊裡面的內容根據頭部導航欄動態展現資料
- css3實現動態圓形導航欄CSSS3
- 構建動態互動式H5導航欄:滑動高亮、吸頂和錨點導航技巧詳解H5
- 直播商城原始碼,去掉導航條和tabbar線條原始碼tabBar
- 實現隨著滾動條滾動,導航會自動切換的效果
- 側欄懸浮導航選單拖動滾動條可以自動定位效果
- Bootstrap系列 -- 38. 基礎導航條boot
- uni-app動態修改頂部導航欄標題APP
- 直播軟體搭建,修改狀態列、導航條顏色及文字顏色
- 高度塌陷 解決高度塌陷 導航條 清除浮動 相對定位
- 影片直播app原始碼,去掉導航條和tabbar線條APP原始碼tabBar
- 小程式 自動導航
- 全球首創雙光源固態鐳射雷達導航避障 石頭V20樹立導航避障新標準
- EntityFramework動態多條件查詢與Lambda表示式樹Framework
- 演算法導論-動態規劃-鋼條切割演算法動態規劃
- navigationController導航條的手勢NavigationController
- Bootstrap系列 -- 39. 導航條新增標題boot
- iOS:導航條滾動透明度隨著tableView的滾動而變化iOSView
- 成品直播原始碼推薦,去掉導航條和tabbar線條原始碼tabBar
- 拖動滾動條一定距離可以固定於頂部的導航欄
- 基於jquery-treeview的動態選單實現jQueryView
- javascript樹形導航選單例項程式碼JavaScript單例
- css樹形導航選單程式碼例項CSS
- 利用Easy UI生成非同步樹以及動態新增標籤頁UI非同步