ASP.NET MVC搭建項目背景UI架構—2、菜單特效

ASP.NET MVC搭建項目背景UI架構—1、背景主架構
ASP.NET MVC搭建項目背景UI架構—2、菜單特效
ASP.NET MVC搭建項目背景UI架構—3、面闆折疊和展開
ASP.NET MVC搭建項目背景UI架構—4、tab多頁簽支援
ASP.NET MVC搭建項目背景UI架構—5、Demo示範Controller和View的互動
ASP.NET MVC搭建項目背景UI架構—6、客戶管理（添加、修改、查詢、分頁）
ASP.NET MVC搭建項目背景UI架構—7、統計報表
ASP.NET MVC搭建項目背景UI架構—8、将View中選擇的資料行中的部分資料傳入到Controller中
ASP.NET MVC搭建項目背景UI架構—9、伺服器端排序

上一篇，已經把整個項目的框框給搭建好了，但是還沒有任何js效果實作。這一節，我就來說下關于菜單的特效實作。我需要的效果如下：

需求總結：

點選頂部菜單子產品，左側顯示不同子產品下面的菜單清單
點選左側菜單選項，展開下面的子菜單，并折疊其它菜單子產品，菜單圖示折疊顯示為+，展開顯示為-。

1、先看下Top視圖中代碼：

ASP.NET MVC搭建項目背景UI架構—2、菜單特效

@{
    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>

View Code

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的調用：

ASP.NET MVC搭建項目背景UI架構—2、菜單特效

<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源碼

部落格位址：

http://www.cnblogs.com/jiekzou/

部落格版權：

本文以學習、研究和分享為主，歡迎轉載，但必須在文章頁面明顯位置給出原文連接配接。

如果文中有不妥或者錯誤的地方還望高手的你指出，以免誤人子弟。如果覺得本文對你有所幫助不如【推薦】一下！如果你有更好的建議，不如留言一起讨論，共同進步！

再次感謝您耐心的讀完本篇文章。

其它：

.net-QQ群4：612347965

java-QQ群：805741535

H5-QQ群：773766020

我的拙作《ASP.NET MVC企業級實戰》《H5+移動應用實戰開發》

《Vue.js 2.x實踐指南》

《JavaScript實用教程》

《Node+MongoDB+React 項目實戰開發》

已經出版，希望大家多多支援！

ASP.NET MVC搭建項目背景UI架構—2、菜單特效

目錄