Layui框架使用小结(3)

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

已经总结了两次 Layui 框架的使用，今天继续简单对这两天学习 Layui 框架的感受进行一个总结。前面也解释过，可能 Layui 这个框架已经太过时了，但我仍然想学习总结一下这个框架的原因是，我在自己的毕设项目中使用到了这个框架，不过都是一些简单的套用，而自己的前端知识也很薄弱，所以想借着这个机会巩固一下前端知识，也更熟练一下毕设...........

菜单结构

通常基础菜单是搭配面板（layui-panel）使用的，但这并不是必须的。基础菜单有它独有的样式结构，

<div class="layui-panel">
    <ul class="layui-menu" id="docDemoMenu1">
        <li lay-options="{id: 100}">
            <div class="layui-menu-body-title">menu item 1</div>
        </li>
        <li lay-options="{id: 101}">
            <div class="layui-menu-body-title">
                <a href="#">menu item 2 <span class="layui-badge-dot"></span></a>
            </div>
        </li>
        <li class="layui-menu-item-divider"></li>
        <li class="layui-menu-item-group layui-menu-item-down" lay-options="{type: 'group'}">
            <div class="layui-menu-body-title">
                menu item 3 group <i class="layui-icon layui-icon-up"></i>
            </div>
            <ul>
                <li lay-options="{id: 1031}">menu item 3-1</li>
                <li lay-options="{id: 1032}">
                    <div class="layui-menu-body-title">menu item 3-2</div>
                </li>
            </ul>
        </li>
        <li class="layui-menu-item-divider"></li>
        <li lay-options="{id: 104}">
            <div class="layui-menu-body-title">menu item 4</div>
        </li>
        <li class="layui-menu-item-parent" lay-options="{type: 'parent'}">
            <div class="layui-menu-body-title">
                menu item 5
                <i class="layui-icon layui-icon-right"></i>
            </div>
            <div class="layui-panel layui-menu-body-panel">
                <ul>
                    <li lay-options="{id: 1051}">
                        <div class="layui-menu-body-title">menu item 5-1</div>
                    </li>
                    <li lay-options="{id: 1051}">
                        <div class="layui-menu-body-title">menu item 5-2</div>
                    </li>
                </ul>
            </div>
        </li>
        <li lay-options="{id: 106}">
            <div class="layui-menu-body-title">menu item 6</div>
        </li>
    </ul>
</div>

可以看出实则是一个 ul li 的层级嵌套，当需要出现「菜单组」和「子级菜单」时，只需要添加相对应的 class 类名即可。

菜单项类型

类型	html	说明
常规菜单项	<li></li>	无需添加特定 class
可收缩菜单组	<li class="layui-menu-item-group layui-menu-item-down" lay-options="{type: 'group'}"></li>	其中layui-menu-item-down为初始展开；layui-menu-item-up为初始收缩。
横向父子菜单	<li class="layui-menu-item-parent" lay-options="{type: 'parent'}"></li>	其子级菜单的结构参照上文的「菜单结构」，主要是需包含一层面板元素。
分割线	<li class="layui-menu-item-divider"></li>	一条横线，用于更好地划分菜单区域

今天主要总结一下基础菜单的布置，如何使用菜单，怎样做到菜单效果。原理都是参考 Layui 官方文档的，也有自己的想法，如果自己的想法有不对的地方请指正
我向你敬礼啊，Salute！