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

随机推荐

Win自带mastc远程Cenots7桌面
1.Centos7安装桌面 yum -y groups install "GNOME Desktop" startx 2.安装xrdp 操作需要root用户权限,所以,我们先切换为 ...
SVN_03绿色版
1.首先备份当前安装visualSVN文件的bin目录,万一出错还能反个水.一般默认安装路径是C:\Program Files(x86)VisualSVN\bin 2.然后运行ildasm,Windo ...
TensorFlow实现Softmax Regression识别手写数字
本章已机器学习领域的Hello World任务----MNIST手写识别做为TensorFlow的开始.MNIST是一个非常简单的机器视觉数据集,是由几万张28像素*28像素的手写数字组成,这些图片只 ...
【postman】postman使用教程
postman基础功能一.变量设置编写的API往往需要在多个环境下执行,而Postman 提供了两种类型的变量:环境变量和全局变量,从而很好的解决了这个问题.同时变量还常用于关联接口间的参数传递. ...
Harbor高可用理论及实践（汇聚篇）
目录一.理论概述什么是harbor harbor要解决的问题有了docker自带的registry为什么还要用harbor harbor的架构组件 Harbor工作原理二.部署harbor及其 ...
c# 值传递
【问题】man手册如何查看区分printf命令和printf函数
参考:UNIX / Linux Man Command Example to View Man Pages 今天再看别人博客的时候,先仔细看看printf命令是怎么玩的,于是man手册查了下.结果搜出 ...
windows 数据备份
xcopy 数据目录备份目录 /e /c /q /h /r /y at 00:00 /every:M,T,W,Th,F,S,Su d:\批处理文件名
js中的forEach和map的区别
我们先来看两者之间的相同之处 var arr = ['a','b','c','d']; arr.forEach(function(item,index,arr){ //item表示数组中的每一项,in ...
Springboot分别使用乐观锁和分布式锁（基于redisson）完成高并发防超卖
原文 :https://blog.csdn.net/tianyaleixiaowu/article/details/90036180 乐观锁乐观锁就是在修改时,带上version版本号.这样如果试图 ...

动态menu导航条以及treeview树

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

随机推荐

热门专题