目录

  1. ASP.NET MVC搭建项目后台UI框架—1、后台主框架
  2. ASP.NET MVC搭建项目后台UI框架—2、菜单特效
  3. ASP.NET MVC搭建项目后台UI框架—3、面板折叠和展开
  4. ASP.NET MVC搭建项目后台UI框架—4、tab多页签支持
  5. ASP.NET MVC搭建项目后台UI框架—5、Demo演示Controller和View的交互
  6. ASP.NET MVC搭建项目后台UI框架—6、客户管理（添加、修改、查询、分页）
  7. ASP.NET MVC搭建项目后台UI框架—7、统计报表
  8. ASP.NET MVC搭建项目后台UI框架—8、将View中选择的数据行中的部分数据传入到Controller中
  9. ASP.NET MVC搭建项目后台UI框架—9、服务器端排序

上一篇，已经把整个项目的框框给搭建好了，但是还没有任何js效果实现。这一节，我就来说下关于菜单的特效实现。我需要的效果如下：

需求总结：

  • 点击顶部菜单模块，左侧显示不同模块下面的菜单列表
  • 点击左侧菜单选项，展开下面的子菜单，并折叠其它菜单模块，菜单图标折叠显示为+，展开显示为-。

1、先看下Top视图中代码：

@{

    Layout = null;

}

<!DOCTYPE html>

<html lang="en">

<head>

    <title></title>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width,initial-scale=1.0">

    <meta charset="utf-8" />

    <link href="~/Content/sharestyle.css" rel="stylesheet" />

    <style type="text/css">

        .hightCss

        {

            color: yellow;

        }

        body

        {

            margin: 0px;

            padding: 0px;

        }

    </style>

</head>

<body>

    <div class="index_header">

        <div class="index_headertop">

            <div class="index_logo"><a href="#">

                <img src="/images/index_logo.png"></a></div>

            <div class="lgstatus">

                欢迎您，@ViewBag.UserName<i><em>20</em></i>可用余额：<span>￥@ViewBag.AvailableBalance</span>&nbsp;&nbsp;&nbsp;

      <input type="submit" value="在线充值" class="btsty2">

            </div>

        </div>

        <div class="clear"></div>

        <div class="index_headerbot">

            <div class="nav_list">

                <ul>

                    <li><a href="#">业务管理</a>

                        <div class="nav_out" style="display: none;">

                            <i></i>

                            <p><a href="#">订单管理</a></p>

                            <p><a href="#">提单管理</a></p>

                            <p><a href="#">身份证管理</a></p>

                        </div>

                    </li>

                    <li class="slctd"><a href="#">财务管理</a>

                        <div class="nav_out" style="display: none;">

                            <i></i>

                            <p><a href="#">财务流水</a></p>

                            <p><a href="#">提单对账</a></p>

                            <p><a href="#">运单对账</a></p>

                            <p><a href="#">异常费用对账</a></p>

                            <p><a href="#">充值记录</a></p>

                        </div>

                    </li>

                    <li><a href="#">系统管理</a>

                        <div class="nav_out" style="display: none;">

                            <i></i>

                            <p><a href="#">基本信息管理</a></p>

                            <p><a href="#">认证管理</a></p>

                            <p><a href="#">修改密码</a></p>

                        </div>

                    </li>

                </ul>

            </div>

            <div class="fucnbx"><span><a href="#"><i class="ilChannel"></i>运单打印客户端下载</a></span> <span><a href="#"><i class="i2"></i>API文档</a></span> <span><a href="#"><i class="i3"></i>退出</a></span> </div>

        </div>

    </div>

</body>

</html>

2、在Top视图的head中添加如下js：

    <script src="~/Scripts/jquery-1.8.3.min.js"></script>

    <script type="text/javascript">
       //控制Left视图中菜单模块的显示

        function showLeftList(divId) {

            self.parent.frames["leftFrame"].showDivMenu(divId);

        }
        //菜单点击高亮显示

        $(function () {

            $(".nav_list ul li a").click(function () {

                //$(".nav_list ul li a").css("color", "#ceebff");

                //$(this).css("color", "yellow");

                $(".nav_list ul li a").css("background-color", "");

                $(".nav_list ul li a").css("color", "#ceebff");

                $(this).css("background-color", "#66d354");

                $(this).css("color", "white");

            });

        });

    </script>

3、在Top视图中，菜单项添加js方法showLeftList，这个方法中传入了一个参数，这个参数就是Left视图中菜单层的id。

 <li><a href="#" onclick="showLeftList('divOrder')">业务管理</a>

 <li class="slctd"><a href="#" onclick="showLeftList('divFinancial')">财务管理</a>

 <li><a href="#" onclick="showLeftList('divSysManage')">系统管理</a>

4、查看Left视图代码，注意id的命名，因为这关系到js的调用：

<body>

 <div class="leftbar" id="divOrder">

  <dl>

    <dt class="head2" id="dt_ulOrder" onclick='ShowMenuList("ulOrder")'>订单管理</dt>

    <ul class="box_n" id="ulOrder">

      <li><a href="#">批量新建订单</a></li>

      <li><a href="#">手工新建订单</a></li>

      <li><a class="nav_sub" href="#">订单草稿<span>（3）</span></a></li>

      <li><a href="#">已确认订单<span>（3）</span></a></li>

      <li><a href="#">待发货订单<span>（3）</span></a></li>

      <li><a href="#">已发货订单<span>（0）</span></a></li>

      <li><a href="#">订单回收站<span>（0）</span></a></li>

      <li><a href="#">退件<span>（0）</span></a></li>

      <li><a href="#">批量修改订单</a></li>

    </ul>

  </dl>

  <dl>

    <dt class="head1" id="dt_ulLading" onclick='ShowMenuList("ulLading")'>提单管理</dt>

    <ul class="box_n" id="ulLading" style="display:none;" >

      <li><a href="#">创建托盘</a></li>

      <li><a href="#">未交货托盘<span>（6）</span></a></li>

      <li><a href="#">已交货托盘</a></li>

      <li><a href="#">创建交货单</a></li>

      <li><a href="#">交货单列表</a></li>

      <li><a href="#">待预扣提单<span>（3）</span></a></li>

      <li><a href="#">已预扣提单</a></li>

    </ul>

  </dl>

  <dl>

    <dt class="head1" id="dt_ulIdentityCard" onclick='ShowMenuList("ulIdentityCard")'>身份证管理</dt>

    <ul class="box_n" id="ulIdentityCard" style="display:none;" >

      <li><a href="#">待验证身份证<span>（3）</span></a></li>

      <li><a href="#">无需验证身份证<span>（3）</span></a></li>

      <li><a href="#">已验证身份证<span>（3）</span></a></li>

    </ul>

  </dl>

</div>

 <div class="leftbar" id="divSysManage"></div>

     <div class="leftbar" id="divFinancial">

        <dl>

            <dt id="dt_ulChannel" class="head2" onclick='ShowMenuList("ulChannel")'>渠道费用管理</dt>

            <ul class="box_n" id="ulChannel">

                <li><a href="#" onclick="goNewPage('a.html','渠道分类');">渠道分类</a></li>

                <li><a target="mainFrame" id="channelManage" onclick="goNewPage('/Channel/Index','渠道管理');">渠道管理</a></li>

                <li><a href="#">分区管理</a></li>

                <li><a href="#">价格管理</a></li>

            </ul>

        </dl>

        <dl>

            <dt id="dt_ulFinancial" class="head1" onclick='ShowMenuList("ulFinancial")'>财务管理</dt>

            <ul class="box_n" id="ulFinancial" style="display: none;">

                <li><a href="#">财务流水</a></li>

                <li><a href="#">提单对账</a></li>

                <li><a href="#">运单对账</a></li>

                <li><a href="#">异常费用对账</a></li>

                <li><a href="#">充值记录</a></li>

            </ul>

        </dl>

    </div>

</body>

5、Left视图中head部分添加如下js：

    <script src="~/Scripts/jquery-1.7.1.min.js"></script>

    <script type="text/javascript">

        //显示菜单下面的选项

        function ShowMenuList(id) {

            var objectobj = document.getElementById(id);

            var dtObj = document.getElementById("dt_" + id);

            if (objectobj.style.display == "none") {

                objectobj.style.display = "";

                dtObj.setAttribute("class", "head2");

                //其它菜单折叠

                $(dtObj).parent().parent().find("dt").not(dtObj).attr("class", "head1"); //折叠

                $(objectobj).parent().parent().find("ul").not(objectobj).css("display", "none"); //隐藏菜单子项

            }

            else {

                objectobj.style.display = "none";

                dtObj.setAttribute("class", "head1");

            }

        }

        //控制菜单模块的显示和隐藏

        function showDivMenu(divId) {

            $("#" + divId).css("visibility", "visible");

            $("#" + divId).siblings("div").css("visibility", "hidden");

        }

        $(function () {

            $(".box_n li a").click(function () {

                $(".box_n li a").removeClass("nav_sub");

                $(this).addClass("nav_sub");

            });

        });

        function goNewPage(url,name) {

            self.parent.frames["mainFrame"].addTab(url,name);

        }

    </script>

至此，菜单特效，我们就已经添加上去了，你可以按F5运行看下效果。

框架中用到的js和css：CssJsImg源码

ASP.NET MVC搭建项目后台UI框架—2、菜单特效的更多相关文章

  1. ASP.NET MVC搭建项目后台UI框架—1、后台主框架

    目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...

  2. ASP.NET MVC搭建项目后台UI框架—11、自动加载下拉框查询

    ASP.NET MVC搭建项目后台UI框架—1.后台主框架 需求:在查询记录的时候,输入第一个字,就自动把以这个字开头的相关记录查找出来,输入2个字就过滤以这两个子开头的记录,依次类推. 突然要用到这 ...

  3. ASP.NET MVC搭建项目后台UI框架—3、面板折叠和展开

    目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...

  4. ASP.NET MVC搭建项目后台UI框架—4、tab多页签支持

    目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...

  5. ASP.NET MVC搭建项目后台UI框架—5、Demo演示Controller和View的交互

    目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...

  6. ASP.NET MVC搭建项目后台UI框架—6、客户管理（添加、修改、查询、分页）

    目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...

  7. ASP.NET MVC搭建项目后台UI框架—7、统计报表

    ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NET M ...

  8. ASP.NET MVC搭建项目后台UI框架—8、将View中选择的数据行中的部分数据传入到Controller中

    目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...

  9. ASP.NET MVC搭建项目后台UI框架—9、服务器端排序

    ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NET M ...

随机推荐

  1. windows命令——explorer

    转至http://www.cnblogs.com/ymind/archive/2012/03/30/explorer-command-args.html 今天才知道,explorer原来可以这样用, ...

  2. iOS-App发布证书的申请与使用

    i开发环境:xcode5.1.1 iphonesdk:7.1 开发机器:iMac 真机部署测试:apple个人开发者ID 向导: 必备IDP证书和distribution证书(第一个证书是真机部署测试 ...

  3. iOS-iOS开发简单介绍

    概览 终于到了真正接触IOS应用程序的时刻了,之前我们花了很多时间去讨论C语言.ObjC等知识,对于很多朋友而言开发IOS第一天就想直接看到成果,看到可以运行的IOS程序.但是这里我想强调一下,前面的 ...

  4. python中协程

    在引出协成概念之前先说说python的进程和线程. 进程: 进程是正在执行程序实例.执行程序的过程中,内核会讲程序代码载入虚拟内存,为程序变量分配空间,建立 bookkeeping 数据结构,来记录与 ...

  5. IOS 消息机制(NSNotificationCenter)

    消息机制 NSNotificationCenter 一直都在频繁使用,但是却对其原理不是十分了解.今天就花些时间,把消息机制原理重头到尾好好过一遍. iOS 提供了一种 "同步的" ...

  6. EF Power Tools参数不正确的解决方法

    在Visual Studio 2010安装了EF Power Tools Beta 3之后,希望根据本地现有数据库模型来生成基于Entity Framework Code First的代码时,经常出现 ...

  7. Javaweb中解决跨越问题的拦截器代码

    public class AccessControlFilter implements Filter { @Override public void init(FilterConfig filterC ...

  8. Android数据存储之Sqlite的介绍及使用

    前言: 本来没有打算整理有关Sqlite数据库文章的,最近一直在研究ContentProvider的使用,所有觉得还是先对Sqlite进行一个简单的回顾,也方便研究学习ContentProvider. ...

  9. 准备 LVM Volume Provider - 每天5分钟玩转 OpenStack（49）

    Cinder 真正负责 Volume 管理的组件是 volume provider. Cinder 支持多种 volume provider,LVM 是默认的 volume provider.Devs ...

  10. jQuery.unique引发一个血案

    项目开发过程中,PM说系统只要在一个特定的浏览器中运行就好,但是在其他的浏览器中不能出现逻辑的错误,所以在开发过程中,前端和后台选择是Chrome浏览器,没有仔细测试Firefox和IE.但是昨天PM ...