動態menu導航條以及treeview樹

白馬酒涼發表於2013-08-02

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

動態menu導航條以及treeview樹

相關文章