側欄菜單插件---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