zoukankan html css js c++ java

动态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); 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;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
}

查看全文

相关阅读:
WIN10 UBUNTU 异常：sleep: cannot read realtime clock: Invalid argument
Mysql表名大小写忽略
 Spring boot自定义配置文件并映射到指定类中
 list addAll产生异常java.lang.UnsupportedOperationException
Oracle extract函数提取时分秒的问题
 JOOQ默认schema
Druid数据库连接失败，无限尝试问题
 Mysql安装后root无法登陆(Access denied for user 'root'@'localhost')
JavaSE第17篇：集合之Map集合
 JavaSE第16篇：集合之Collection集合下篇

原文地址：https://www.cnblogs.com/sui84/p/6777193.html