Layui官网—基础菜单 - 页面元素

菜单是页面必不可少的元素，我们希望它是通用的，所以在结构上，它的组成极其灵活。而事实上，在基础菜单还没有正式推出之前，垂直导航（layui-nav-tree）曾顶替了它的角色，尤其是在管理系统中发挥了举足轻重的作用。尽管它们本质上都属于「菜单」的范畴，但我们姑且约定将水平的称之为「导航」，垂直的称之为正统的「基础菜单」。它将十分有用，许多业务场景都能看到它的存在。

菜单结构

通常基础菜单是搭配面板（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 类名即可。