目录

  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. jQuery AJAX 网页无刷新上传示例

    新年礼,提供简单.易套用的 jQuery AJAX 上传示例及代码下载.后台对文件的上传及检查,以 C#/.NET Handler 处理 (可视需要改写成 Java 或 PHP). 有时做一个网站项目 ...

  2. SqlServer英文单词全字匹配

    环境:Vs2013+Sql Server2012 问题:现在数据库记录如下: Sentence列保存的是英文的句子,我现在想找出所有包含“I”(单词)的句子,如果我用 Sentence like '% ...

  3. php的函数和数组

    //php函数//1.简单函数//四要素:返回类型,函数名,参数列表,函数体/*function Show(){    echo "hello";}Show();*///2.有返回 ...

  4. salesforce 零基础学习（四十九）自定义列表分页之使用Pagination实现分页效果 ※※※

    上篇内容为Pagination基类的封装,此篇接上篇内容描述如何调用Pagination基类. 首先先创建一个sObject,起名Company info,此object字段信息如下: 为了国际化考虑 ...

  5. jquery插件的两种形式

    这里总结一下jquery插件的两种形式,一种是通过字面量的形式组织代码,另一种是通过构造函数的方式.下面就两种形式来分析俩个例子. 例子1: ;(function ($,window,document ...

  6. 【Win10 应用开发】自适应Toast通知的XML文档结构

    老规矩,在开始之前老周先讲个故事. 话说公元2015年7月20日,VS 2015发布.于是,肯定有人会问老周了,C#6有啥新特性,我学不来啊.学不来的话你应该检讨.老周比较保守地计算一下,学会C# 6 ...

  7. OpenCASCADE Conic to BSpline Curves-Hyperbola

    OpenCASCADE Conic to BSpline Curves-Hyperbola eryar@163.com Abstract. Rational Bezier Curve can repr ...

  8. OpenCascade Primitives BRep-Cone

    OpenCascade Primitives BRep-Cone eryar@163.com Abstract. BRep is short for Boundary Representation. ...

  9. 1Z0-053 争议题目解析510

    1Z0-053 争议题目解析510 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 510.You executed the following command in Recover ...

  10. 给ubuntu中的软件设置desktop快捷方式（以android studio为例）

    ubuntu的快捷方式都在/usr/share/applications/路径下有很多*.desktop(eclipse的快捷方式也可以类似设置) 下面就建立我们的studio sudo gedit ...