动态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

}

动态menu导航条以及treeview树的更多相关文章

基于jQuery滑动分步式进度导航条代码
分享一款基于jQuery滑动分步式进度导航条代码.这是一款基于jquery实现的网站注册动态步骤导航条代码.效果图如下: 在线预览源码下载实现的代码. html代码: <div id=& ...
vuejs导航条动态切换active状态
用一个数组存导航条,用v-for循环它,这样可以减少代码,二可以使用它的下标来判断高亮,三还可以获取后端的导航信息来遍历重点是在:routerLink(index, path)函数,传入当前点击的下 ...
css制作漂亮彩带导航条菜单
点击这里查看效果:http://keleyi.com/keleyi/phtml/divcss/17.htm 效果图: 以下是源代码: <!DOCTYPE html PUBLIC "-/ ...
纯CSS实现下拉菜单及下拉容器等（纯CSS实现导航条及导航下拉容器）
虽然网上类似甚至相同的案例有很多,但是我还是写下,以记下笔记,也可供大家参考希望大家可以指导批评~~ 首先我们以列表ul li 来开始我们菜单也可以说导航条的制作: 在页面中我们首先构建以下XHTM ...
Qt qml treeview 树控件
qml并没有提供树控件,只能自己写了.model仍然用ListModel对象,弄成层级的就行.delegate必须用loader动态的增加子控件,如此而已. [先看效果] [下载] http://do ...
【转】一个DIV+CSS代码布局的简单导航条
原文地址:http://www.divcss5.com/shili/s731.shtml 简单的DIV CSS代码布局实现导航条一个蓝色主题的导航条布局案例,本CSS小实例,采用DIV CSS实现. ...
浅谈Bootstrap——导航条起步
不多说,直接上代码. <div class="navbar navbar-default"> <div class="container"&g ...
分享一个导航条哈(⊙o⊙)…
原文:http://www.sharejs.com/js/menu/1601 CSS样式表: <!--[if lt IE 9]> <script src="http://h ...
7、网页制作Dreamweaver（悬浮动态分层导航）
悬浮动态分层导航的制作: 1.首先在<head>里面引用一个JQUERY的文件以用来制作鼠标点击动画效果(从网站上下载即可) <script language="javas ...

随机推荐

十八、Nand Flash驱动和Nor Flash驱动
在读者学习本章之前,最好了解Nand Flash读写过程和操作,可以参考:Nand Flash裸机操作. 一开始想在本章写eMMC框架和设备驱动,但是没有找到关于eMMC设备驱动具体写法,所以本章仍继 ...
go select 使得一个 goroutine 在多个通讯操作上等待。
select 语句使得一个 goroutine 在多个通讯操作上等待. select 会阻塞,直到条件分支中的某个可以继续执行,这时就会执行那个条件分支.当多个都准备好的时候,会随机选择一个. pac ...
windows下使用linux terminal
windows下使用linux terminal 1.下载安装包 2.安装 3.解决乱码 0.前言其实,写这个的目的是怕自己忘了,方便以后配置和分享 1.下载安装包安装包下载地址: http:// ...
[转载] jmeter Bean Shell的使用
Jmeter有哪些Bean Shell 定时器: BeanShell Timer 前置处理器:BeanShell PreProcessor 采样器: BeanShell Sampler 后置处理器:B ...
Powershell学习笔记：(一）、初识Powershell
什么是Powershell? MSDN上的说明是:PowerShell 是构建于 .NET 上基于任务的命令行 shell 和脚本语言. PowerShell 可帮助系统管理员和高级用户快速自动执行用 ...
查询慢SQL
可以查看当前时间访问库的所有请求SQL SELECT COUNT(*) AS c,state,info FROM `information_schema`.processlist GROUP B ...
OpenSSL 1.1.1 国密算法支持
OpenSSL 1.1.1 国密算法支持 https://www.openssl.org/ https://github.com/openssl/openssl OpenSSL 1.1.1 新特性: ...
写在NOIP2018后
退役学了一周文化课,感觉还行吧在周四就有学弟跟我说用我的源代码测329,当时还是出乎意料的. 本来期望是100+50+55+100+50+44=399,结果测得是100+55+50+100+20+4 ...
netcat瑞士军刀实现电脑远程控制termux
关于nc实现远程控制termux 1.首先termux安装namp pkg install namp 2.windows系统安装netcat 此为netcat下载连接下载得到zip压缩包,解压得到里 ...
win10如何安装mariadb
一.下载.安装 1.下载mariadb(https://downloads.mariadb.org/),解压 2.进入bin目录下执行(管理员模型-powershell) .\mysqld.exe - ...

动态menu导航条以及treeview树

动态menu导航条以及treeview树的更多相关文章

随机推荐

热门专题