layui/docs/menu/index.md

title	toc
基础菜单 menu	true

基础菜单

基础菜单 menu 是垂直导航菜单的另一个替代方案，它是基于 dropdown 组件驱动的静态元素结构。

示例

  {{- d.include("/menu/examples/demo.md") }}
  

结构

基础菜单层级与样式结构如下：

• 通过 <ul class="layui-menu"></ul> 命名基础菜单容器
  • 追加 className 为 layui-menu-lg 可设置基础菜单的大尺寸风格
  • 追加 lay-accordion 属性可设置手风琴效果 ^2.8.18+
  • 通过 <li></li> 放置菜单列表项
    • 属性：
      • 追加 className 为　layui-menu-item-group 可设置当前菜单为菜单组，即子菜单为纵向层级。
      • 或追加 className 为 layui-menu-item-parent 可设置当前菜单为父级菜单，即子菜单为横向层级。
      • 追加 className 为 layui-menu-item-divider 可设置分隔线。
      • 追加 className 为 layui-menu-item-up 或 layui-menu-item-down 可设置子菜单默认收缩或展开。
      • 追加 className 为 layui-menu-item-checked 可设置当前菜单为选中状态
      • 添加 lay-options="{}" 可设置对应菜单列表的基础属性
    • 内容：
      • 通过 <div class="layui-menu-body-title"></div> 放置菜单标题容器
      • 通过 <div class="layui-panel layui-menu-body-panel"></div> 放置横向子菜单外层面板
      • 通过 <ul><li></li></ul> 放置子菜单列表，其中 <li> 中的规则同父级。
• 再将基础菜单放置在一个面板容器中，以更好地定义尺寸、边框或阴影等外观，详细可参考上述示例。

属性

属性即命名在基础菜单列表元素 <li></li> 中的 lay-options 属性值，如：<li lay-options="{type: 'parent'}"></li>，其支持的属性如下：

属性	描述
title	设置菜单标题。默认读取标题容器内容中的文本。
type	设置菜单类型。可选值如下： 若不设定，则表示为常规菜单项 type:'group' 菜单组，子菜单为纵向层级 type:'parent' 父级菜单，子菜单为横向层级
isAllowSpread	子菜单是否允许展开收缩操作。默认 true

事件

dropdown.on('click(filter)', callback)

• 参数 click(filter) 是一个特定结构。
  • click 为基础菜单项点击事件固定值；
  • filter 为基础菜单容器属性 lay-filter 对应的值。
• 参数 callback 为事件执行时的回调函数，并返回一个 object 类型的参数。

点击菜单列表项时触发。用法：#详见示例

贴士

基础菜单相当于是 dropdown 组件的一种静态化呈现，因此在事件等动态操作上需借助 dropdown 组件的 API 来完成。