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

随机推荐

20191125：Python中的上下文管理机制with
20191125:with上下文管理 with是一个上下文管理器,用于执行代码块所需要的运行的时候的上下文入口和出口.上下文管理器的典型用法包括保存和还原各种全局状态,锁定和解锁资源,关闭打开的文件等 ...
AVR单片机教程——随机点亮LED
之前我们做的闪烁LED和流水灯,灯效都是循环的.这次我们来尝试一些不一样的——每一次随机选择一个LED并点亮. 要实现随机的效果,我们要用C语言标准库中的相关设施: #define RAND_MAX ...
【HC89S003F4开发板】 7ASM&C混合编程
HC89S003F4开发板ASM&C混合编程一.前言在配套资料里有实现ASM&C混合编程的说明文档,这里来实现这个功能. 二.实现ASM&C混合编程 1.打开 Keil 工 ...
HTML5从入门到精通（千锋教育）免费电子版+PDF下载
本书是HTML5初学者极好的入门教材之一,内容通俗易懂.由浅入深.循序渐进.本书内容覆盖全面.讲解详细,其中包括标签语义化.标签使用规范.选择器类型.盒模型.标签分类.样式重置.CSS优化.Photo ...
mininet安装配置
mininet安装配置安装mininet mininet使用在VM中运行mininet 安装VMware,在VMware中打开下载好的mininet虚拟机映像启动虚拟机,虚拟机的初始账号密码均为 ...
Istio流量管理能力介绍
1 Istio是什么? Istio 1.0版本于8月1号凌晨准点发布,核心特性已支持上生产环境,各大微信公众号.博客纷纷发文转载.那么Istio到底是什么?能解决问题什么? 1. Istio ...
git 修改注释
原文:https://www.jianshu.com/p/098d85a58bf1 修改最后一条注释: git commit --amend 如果已经推送到远程,强制push到远程仓库: git pu ...
sublime text3上设置 python 环境
1. 打开Sublime text 3 安装package control 2. 安装 SublimeREPL Preferences -> package control 或者Ctrl+shi ...
JS权威指南读书笔记（二）
第四章表达式和运算符 1 new调用构造函数的过程 a 创建一个新的空对象 b 设置空对象的_proto_指向构造函数原型prototype c 将这个新对象当做this的值 ...
CSS之选择器相关
一.选择器的作用选择器就是用来选择标签的,要使用css对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器. HTML页面中的元素就是通过CSS选择器进行控制的.每一条 ...

动态menu导航条以及treeview树

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

随机推荐

热门专题