基础菜单 - 页面元素

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

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

菜单项是由 li 元素组成的，以下将列举几种被支持的菜单项类型

其子级菜单遵循的列表类型也是一样的。需要注意的是，「可收缩菜单组」的子菜单仅需要再嵌套一层 ul 即可；而「横向父子菜单」还需要套一层 div class="layui-panel layui-menu-body-panel"，以便让子菜单层次更加分明。

在上文中，您可能已经多次注意到 lay-options="{}" 这个属性了，它正是我们所说的菜单项参数。当点击菜单列表时，回调中将会返回该属性所配置的全部参数，其中type参数是组件内部约定的，其它参数可以随意命名。如

<li lay-options="{
  id: 100
  ,title: 'menu item 1'
  ,type: '' //支持的类型有：group、parent，具体用法参见上文
  ,aaa: '任意参数'
}">内容</li>      
      

我们的dropdown组件不仅菜单的基本交互（如点击选中、菜单组展开收缩等）进行了支持，还提供了菜单的事件机制：

  var dropdown = layui.dropdown;
  
  //菜单点击事件，其中 docDemoMenu1 对应的是菜单结构上的 id 指
  dropdown.on('click(docDemoMenu1)', function(options){
    var othis = $(this); //当前菜单列表的 DOM 对象
    console.log(options); //菜单列表的 lay-options 中的参数
  });

            

<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>
  </ul>
</div>
            

本篇所讲解的是基础菜单的静态展示，其提供的是一个基础的结构，事实上它还被动态封装在诸如下拉菜单、右键菜单等场景中。