MDUI 菜单
开始使用
获取 MDUI 兼容性 规范 JavaScript 工具库
样式
颜色与主题 字体 网格布局 排版 图标 媒体 辅助类 阴影
组件
涟漪动画效果 按钮 浮动操作按钮 分隔线 可扩展面板 文本框 选择控件 滑块 列表 列表控制 网格列表 Tab 选项卡 工具栏 应用栏 抽屉式导航 底部导航栏 卡片 纸片 工具提示 Snackbar 表格 对话框 菜单 进度指示器
JavaScript 插件
Collapse Headroom
资源
Material 图标

菜单

菜单分为简单菜单和级联菜单。简单菜单适用在手机和平板上，级联菜单适用在桌面设备。

调用方式

  1. 通过自定义属性调用
  2. 通过 JavaScript 调用

相关阅读

Material Design 设计指南：组件 - 菜单

样式

简单菜单

在菜单项上添加 disabled 属性可以禁用一个菜单项。

添加 <li class="mdui-divider"></li> 元素可以添加分隔线。

Example
<ul class="mdui-menu">
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">Refresh</a>
  </li>
  <li class="mdui-menu-item" disabled>
    <a href="javascript:;">Help & feedback</a>
  </li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">Settings</a>
  </li>
  <li class="mdui-divider"></li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">Sign out</a>
  </li>
</ul>

带图标的简单菜单

Example
<ul class="mdui-menu">
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      <i class="mdui-menu-item-icon mdui-icon material-icons">&#xe417;</i>Preview
    </a>
  </li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      <i class="mdui-menu-item-icon mdui-icon material-icons">&#xe2c4;</i>Download
    </a>
  </li>
  <li class="mdui-divider"></li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      <i class="mdui-menu-item-icon mdui-icon material-icons">&#xe872;</i>Remove
    </a>
  </li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      <i class="mdui-menu-item-icon"></i>Empty
    </a>
  </li>
</ul>

级联菜单

在 <ul class="mdui-menu"> 元素上添加类 .mdui-menu-cascade 即可使菜单变为适用于桌面设备的级联菜单。

通过在 <li class="mdui-menu-item"></li> 元素内再添加菜单的方式可以实现菜单的嵌套，理论上可以支持无限级嵌套。

<span class="mdui-menu-item-helper"></span> 元素为菜单项添加简短说明。

<span class="mdui-menu-item-more"></span> 元素为菜单项添加一个向右的箭头，用在含子菜单的菜单项上。

Example
<ul class="mdui-menu mdui-menu-cascade">
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      <i class="mdui-menu-item-icon mdui-icon material-icons">&#xe238;</i>
      Bold
      <span class="mdui-menu-item-helper">Ctrl+B</span>
    </a>
  </li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      <i class="mdui-menu-item-icon mdui-icon material-icons">&#xe23f;</i>
      Italic
    </a>
  </li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      <i class="mdui-menu-item-icon"></i>
      Superscript
      <span class="mdui-menu-item-helper">Ctrl+.</span>
    </a>
  </li>
  <li class="mdui-divider"></li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      Paragraph style
      <span class="mdui-menu-item-more"></span>
    </a>
    <ul class="mdui-menu mdui-menu-cascade">
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon"></i>Single
        </a>
      </li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon mdui-icon material-icons">&#xe5ca;</i>1.15
        </a>
      </li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon"></i>Double
        </a>
      </li>
    </ul>
  </li>
</ul>

调用方式

通过自定义属性调用

使用该方式无需编写 JavaScript 代码。只需在一个起控制作用的元素（例如：按钮）上添加 mdui-menu="options" 属性即可。通过自定义属性调用时，需要额外添加一个 target 参数，用于指定被控制的菜单，它的值为被控制的菜单的 CSS 选择器。

注意：为了使菜单能正确地定位，菜单和触发菜单的元素必须位于同一父元素下的同一级。

Example
<button class="mdui-btn mdui-color-theme-accent" mdui-menu="{target: '#example-attr'}">open</button>

<ul class="mdui-menu" id="example-attr">
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">Refresh</a>
  </li>
  <li class="mdui-menu-item" disabled>
    <a href="javascript:;">Help & feedback</a>
  </li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">Settings</a>
  </li>
  <li class="mdui-divider"></li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">Sign out</a>
  </li>
</ul>
Example
<button class="mdui-btn mdui-color-theme-accent" mdui-menu="{target: '#demo-attr-cascade'}">cascade menu</button>

<ul class="mdui-menu mdui-menu-cascade" id="demo-attr-cascade">
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      <i class="mdui-menu-item-icon mdui-icon material-icons">&#xe238;</i>
      Bold
      <span class="mdui-menu-item-helper">Ctrl+B</span>
    </a>
  </li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      <i class="mdui-menu-item-icon mdui-icon material-icons">&#xe23f;</i>
      Italic
      <span class="mdui-menu-item-helper">Ctrl+I</span>
    </a>
  </li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      <i class="mdui-menu-item-icon"></i>
      Superscript
      <span class="mdui-menu-item-helper">Ctrl+.</span>
    </a>
  </li>
  <li class="mdui-divider"></li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      Paragraph style
      <span class="mdui-menu-item-more"></span>
    </a>
    <ul class="mdui-menu mdui-menu-cascade">
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon"></i>Single
        </a>
      </li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon"></i>1.15
        </a>
      </li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon"></i>Double
        </a>
      </li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon mdui-icon material-icons">&#xe5ca;</i>Custom: 1.2
        </a>
      </li>
      <li class="mdui-divider"></li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">Add space before paragraph</a>
      </li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">Add space after paragraph</a>
      </li>
      <li class="mdui-divider"></li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">Custom spacing...</a>
      </li>
    </ul>
  </li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      Line spacing
      <span class="mdui-menu-item-more"></span>
    </a>
    <ul class="mdui-menu mdui-menu-cascade">
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon"></i>
          Single
        </a>
      </li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon"></i>
          1.15
        </a>
      </li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon"></i>
          Double
        </a>
      </li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon mdui-icon material-icons">&#xe5ca;</i>
          Custom: 1.2
          <span class="mdui-menu-item-more"></span>
        </a>
        <ul class="mdui-menu mdui-menu-cascade">
          <li class="mdui-menu-item">
            <a href="javascript:;" class="mdui-ripple">
              Line spacing
              <span class="mdui-menu-item-helper">1.2</span>
            </a>
          </li>
          <li class="mdui-menu-item">
            <a href="javascript:;" class="mdui-ripple">
              Paragraph spacing before
              <span class="mdui-menu-item-helper">1.2</span>
            </a>
          </li>
          <li class="mdui-menu-item">
            <a href="javascript:;" class="mdui-ripple">
              Paragraph spacing after
              <span class="mdui-menu-item-helper">1.5</span>
            </a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

通过 JavaScript 调用

实例化组件：

// anchorSelector 表示触发菜单的元素的 CSS 选择器或 DOM 元素
// menuSelector 表示菜单的 CSS 选择器或 DOM 元素
// options 表示组件的配置参数，见下面的参数列表
var inst = new mdui.Menu(anchorSelector, menuSelector, options);
运行

参数

参数名 类型 默认值 描述
position string auto 菜单相对于触发它的元素的位置。
  • top：菜单在触发它的元素的上方。
  • bottom：菜单在触发它的元素的下方。
  • center：菜单在窗口中垂直居中。
  • auto：自动判断位置。优先级为：bottom > top > center。
align string auto 菜单与触发它的元素的对其方式。
  • left：菜单与触发它的元素左对齐。
  • right：菜单与触发它的元素右对齐。
  • center：菜单在窗口中水平居中。
  • auto：自动判断位置：优先级为：left > right > center
gutter int 16 菜单与窗口边框至少保持多少间距，单位为 px。
fixed boolean false 菜单的定位方式
  • true：菜单使用 fixed 定位。在页面滚动时，菜单将保持在窗口固定位置，不随滚动条滚动。
  • false：菜单使用 absolute 定位。在页面滚动时，菜单将随着页面一起滚动。
covered boolean auto 菜单是否覆盖在触发它的元素的上面。
  • true：使菜单覆盖在触发它的元素的上面。
  • false：使菜单不覆盖触发它的元素。
  • auto：简单菜单覆盖触发它的元素。级联菜单不覆盖触发它的元素。
subMenuTrigger string hover 子菜单的触发方式。
  • click：点击时触发子菜单。
  • hover：鼠标悬浮时触发子菜单。
subMenuDelay int 200 子菜单的触发延迟时间（单位：毫秒），只有在 subMenuTrigger: hover 时，这个参数才有效。

方法

方法名 描述
open() 打开菜单。
close() 关闭菜单。
toggle() 切换菜单的打开状态。

事件

事件 描述 目标 事件
open.mdui.menu 菜单开始打开动画时，事件将被触发。 <ul class="mdui-menu"></ul> event.detail.inst：实例
opened.mdui.menu 菜单结束打开动画时，事件将被触发。
close.mdui.menu 菜单开始关闭动画时，事件将被触发。
closed.mdui.menu 菜单结束关闭动画时，事件将被触发。

CSS 类名列表

类名 效果
.mdui-menu 定义一个菜单组件。
.mdui-menu-cascade 定义级联菜单。
.mdui-menu-item 定义菜单项。
.mdui-menu-item-icon 定义菜单图标。
.mdui-menu-item-helper 定义菜单的帮助文本。
.mdui-menu-item-more 含子菜单的菜单项的向右箭头。
Previous
对话框
Next
进度指示器
设置文档主题

主题色

主色

强调色