菜单

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

调用方式

• 通过自定义属性调用
  
• 通过 JavaScript 调用
  

相关资料

Material Design 菜单设计规范

样式

简单菜单

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

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

在线运行

带图标的简单菜单

在线运行

级联菜单

在 <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> 元素为菜单项添加一个向右的箭头，用在含子菜单的菜单项上。

在线运行

通过自定义属性调用

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

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

在线运行：简单菜单

在线运行：级联菜单

通过 JavaScript 调用

实例化组件：

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

在线运行

参数

方法

事件

CSS 类名列表