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

随机推荐

机器学习之Adaboost与XGBoost笔记
提升的概念提升是一个机器学习技术,可以用于回归和分类问题,它每一步产生一个弱预测模型(如决策树),并加权累加到总模型中:如果每一步的弱预测模型生成都是依据损失函数的梯度方向,则称之为梯度提升(Gra ...
Map、FlatMap 和 Reduce
Map 作用是生成一个新数组,遍历原数组,将每个元素拿出来做一些变换然后 append 到新的数组中. [1, 2, 3].map((v) => v + 1) // -> [2, 3, 4 ...
关于memset的赋值（最大值最小值的选择）
memset赋值赋的是ASSCII码转为二进制赋值比如 memset(,0xff,sizeof()),0xff转为二进制11111111,int为4字节所以最后为111111111111111111 ...
在论坛中出现的比较难的sql问题：19(row_number函数行转列、sql语句记流水)
原文:在论坛中出现的比较难的sql问题:19(row_number函数行转列.sql语句记流水) 最近,在论坛中,遇到了不少比较难的sql问题,虽然自己都能解决,但发现过几天后,就记不起来了,也忘记 ...
ribbon的理解
什么是ribbon? Ribbo是一个基于HTTP和TCP的客户端负载均衡器什么是客户端负载均衡? 客户端负载均衡和服务端负载均衡最大的区别在于服务清单所存储的位置. 在客户端负载均衡中,所有的客户 ...
js循环修改数组属性key值
var keyMap = { deviceUid: "id", deviceType: "typeName", deviceCode: "code&q ...
css 居中父子元素
居中:是子元素相对于在父元素里面居中.父子宽度都固定. A:水平居中: ①给子元素设置一个宽度后.在给其水平方向的margin设置auto,子元素会在父元素水平方向的剩余空间,左右两边平均分配,也就左 ...
Vue路由规则中定义参数
Vue使用routerLinke定义参数的时候路由规则中不需要更改任何属性. 路由其实就是我们在html中定义的锚点,点击这个连接跳转一个锚点.vue中的路由也是这个原理, 前提是路由必须创建在实 ...
html的基础知识点
小编为大家带来html的基础知识Web 标准的好处让Web的发展前景更广阔内容能被更广泛的设备访问更容易被搜寻引擎搜索降低网站流量费用使网站更易于维护提高页面浏览速度Web 标准构成Web标准不是某 ...
使用Ponysay，在Linux终端显示彩虹小马
Ponysay类似于Cowsay,可以在终端打印所有小马的像素画.还有个ponythink,这个是小马想,那个是小马说,效果如下: 安装: sudo apt-get install ponysay 使 ...

动态menu导航条以及treeview树

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

随机推荐

热门专题