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

随机推荐

Quartz入门以及相关表达式使用
目的: 1.Quartz简介及应用场景 2.Quartz简单触发器 SimpleTrigger介绍 3.Quartz表达式触发器CronTirgger介绍 4.Quartz中参数传递 5.Spring ...
MacBook Pro 安装composer及Yii2.0
最近想看看Yii的一些东西,需要安装一下composer curl -sS https://getcomposer.org/installer | php 此操作会下载最新版本到当前的目录下然后将下 ...
无法解析的外部符号 ___argc nafxcw.lib(appcore.obj)
参考 https://blog.csdn.net/wfree/article/details/44171157 MFC的使用: 由"在静态库中使用 MFC" 改成 "在共 ...
Django Rest framework序列化流程
目录一什么是序列化二 Django REST framework配置流程之Serializer 三 Django REST framework配置流程之ModelSerializer 一什么是 ...
gcc 编译的四大过程
gcc 编译的四大过程(预处理-编译-汇编-链接 ) 我们来编译一个hello world 程序. #include <stdio.h> int main(int argc,const c ...
SQL SERVER-LinkServer搬迁
选中linkserver,按F7打开对象游览器, 选中linkserver,生成脚本. 把密码填入脚本运行即可 USE [master] GO /****** Object: LinkedServer ...
一份数据分析学习清单.xls
今天给大家整理一份数据分析的学习清单,打算了解学习这方面的同学可以看看,基本上大的需要学习的点都有涉及:具体细节知识的学习建议大家亲自去动手制作思维导图,自己动手梳理知识脉络. 上期入口:18个堪称神 ...
rhel7下安装EPEL源
1.rhel7安装aliyun下的epel源 wget -O /etc/yum.repos.d/epel.repo http://mirrors.aliyun.com/repo/epel-7.repo
git命令——git rm、git mv
git rm git rm命令官方解释删除的本质在git中删除一个文件,本质上是从tracked files中移除对这些文件的跟踪.更具体地说,就是将这些文件从staging area移除.然后c ...
JS与小程序页面生命周期
Page({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, /** * 生命周 ...

动态menu导航条以及treeview树

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

随机推荐

热门专题