动态menu导航条以及treeview树

白馬酒涼

于 2013-08-02 18:46:00 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS VS Jquery

本文链接：https://blog.youkuaiyun.com/sui84/article/details/9720147

VS 同时被 3 个专栏收录

87 篇文章

订阅专栏

Jquery

17 篇文章

订阅专栏

CSS

10 篇文章

订阅专栏

本文详细介绍了如何通过后台生成HTML内容，并利用jQuery的treeview插件将菜单数据转化为树形结构和导航条。重点阐述了如何优化菜单显示方式，使其更符合使用习惯，同时提供了生成树形结构和导航条的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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
}