metisMenu.js动态侧边导航的实现（ajax动态渲染部分导航）

 

使用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"}]}
]