侧栏菜单插件---metismenu #实现左侧菜单

metismenu的使用使用参考网址：https://mm.onokumus.com/

使用

1、加入metisMenu所有样式

<!--    加载metisMenu所用样式-->
<link rel="stylesheet" th:href="@{/bootstrap4/assets/metismenu/metisMenu.min.css}"/>
<link rel="stylesheet" th:href="@{/site/css/mm-vertical.css}"/>

2、加入metisMenu所有的js文件

<script th:src="@{/bootstrap4/assets/metismenu/metisMenu.js}"></script>
<script th:src="@{/site/js/utils.js}"></script>
<script th:fragment="metismenu">
    $(function () {
        $('#menu').metisMenu();
    })
</script>

3、html代码

<!--    侧边导航栏-->
        <aside class="col-md-2 my-aside" th:fragment="side_menu">
            <nav class="sidebar-nav">
                <ul id="menu">
                    <li class="">
                        <a href="#" aria-expanded="false">
                            <i class="fa fa-home fa-fw fa-lg"></i>主页</a>
                    </li>
                    <li class="mm-active">
                        <a class="has-arrow" href="#" aria-expanded="false">
                            <i class="fa fa-ticket fa-fw fa-lg"></i>票据管理</a>
                        <ul>
                            <li><a href="#">添加票据</a></li>
                            <li><a href="#">票据列表</a></li>
                            <li><a href="#">票据查询</a></li>
                        </ul>
                    </li>
                </ul>
            </nav>
        </aside>

4、菜单的效果图

 

源码：

链接：https://pan.baidu.com/s/15Ui8KycZErGtZZGrbNkqcw
提取码：ikgj