使用metisMenu.js實現後臺管理系統的導航，通過點選導航，切換不同的頁面內容。有些時候。我們需要動態新增頁面的內容，即通過ajax請求後臺來渲染部分導航的內容。

第一部分是靜態導航的實現，即通過點選導航切換右側頁面的實現。第二部分是動態渲染導航的實現。（demo例子來說明，樣式大家自己定義，核心程式碼部分）

metisMenu官網，大家可以自行下載：https://mm.onokumus.com/index.html（提示：需要在前面引入bootstrap和jquery）

一：靜態導航的實現。

1）html部分(css樣式自己根據需求定義)

  <div class="navbar-default sidebar" role="navigation">
       <div class="sidebar-nav navbar-collapse">         
            <ul class="nav" id="side-menu"> 
                <li> <a href="side.html" class="waves-effect">nochild</a></li>
                <li>
                     <a href="#" class="waves-effect">導航管理  
                         <span class="nav-caret">  <!-- 字型圖示 --> 
                            <i class="fa fa-caret-down"></i>
                         </span></a>
                      <ul class="nav nav-second-level"> <!-- 二級導航 --> 
                          <li><a href="side1.html">side1</a></li>
                          <li><a href="side2.html">side2</a></li>
                            
                      </ul>
                 </li>
             </ul>
         </div>
    </div>
 

2）js部分

$(function() {

    $('#side-menu').metisMenu();
    urlchange()
})

function urlchange() {       //側邊欄根據url切換右邊內容頁面，根據自己的html來做修改
    var url = window.location;
    var element = $('ul.nav a').filter(function () {
        return this.href == url || url.href.indexOf(this.href) == 0;
    }).addClass('active').parent().parent().addClass('in show').parent();
    if (element.is('li')) {
        element.addClass('active');
    }
}
 

二：動態導航

html部分同上

js部分：（下面有json結構，可以根據自己的後臺返回資料格式更改ajax新增導航部分程式碼）

$(function () {
    $('#side-menu').metisMenu();
    urlchange()
    $.ajax({
        type: "get",
        url: './nav.json',
        success: function (data) {
            console.log(data)
            var sedlevel = ''
            var nav = '';
            for (var i = 0; i < data.length; i++) {
                var sedlevel = '';
                if (data[i].content) {
                    for (var j = 0; j < data[i].content.length; j++) {

                        sedlevel += `<li>
                                        <a dataId=${data[i].content[j].id} href="${data[i].content[j].url}">${data[i].content[j].name}</a>
                                    </li>`
                    }
                }

                nav += `<li>
                    <a href="javascript:void(0);" class="waves-effect">
                        <span class="nav-icon">
                          <i class="material-icons">&#xe3fc;
                            <span ui-include="'../assets/images/i_0.svg'"></span>
                          </i>
                        </span>
                       ${data[i].name}
                        <span class="nav-caret">
                            <i class="fa fa-caret-down"></i>
                          </span>
                   
                      </a>
        
                    <ul class="nav nav-second-level">
                      ${sedlevel}
                    </ul>
                  </li>`

            }
            $('#side-menu').metisMenu('dispose'); //參考https://mm.onokumus.com/mm-ajax.html，可以自己研究一下
            $('#side-menu').append(nav);
            $('#side-menu').metisMenu();
            urlchange()
        }
    })


})

function urlchange() {  //側邊欄點選導航切換右側頁面，根據自己的html結構來修改
    var url = window.location;
    var element = $('ul.nav a').filter(function () {
        return this.href == url || url.href.indexOf(this.href) == 0;
    }).addClass('active').parent().parent().addClass('in show').parent();
    if (element.is('li')) {
        element.addClass('active');
    }


}

 

 id作用不大，可以不返回。根據自己的需求定義（此處只是個demo小例子，具體還要看自己的需求是怎樣的）

[
    {"id":1,"name":"內容管理","content":[{"id":"11","name":"內容頁面3","url":"side3.html"},{"id":"12","name":"內容頁面4","url":"side4.html"}]},
    {"id":2,"name":"配置管理","content":[{"id":"13","name":"內容頁面5","url":"side5.html"},{"id":"14","name":"內容頁面5","url":"side6.html"}]}
]