菜單分為簡單菜單和級聯(lián)菜單。簡單菜單適用在手機和平板上，級聯(lián)菜單適用在桌面設備。

調用方式

• 通過自定義屬性調用
  
• 通過 JavaScript 調用
  

相關資料

Material Design 菜單設計規(guī)范

樣式

簡單菜單

在菜單項上添加 disabled 屬性可以禁用一個菜單項。

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

在線運行

帶圖標的簡單菜單

在線運行

級聯(lián)菜單

在 <ul class="mdui-menu"> 元素上添加類 .mdui-menu-cascade 即可使菜單變?yōu)檫m用于桌面設備的級聯(lián)菜單。

通過在 <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 選擇器。

注意：為了使菜單能正確地定位，菜單和觸發(fā)菜單的元素必須位于同一父元素下的同一級。

在線運行：簡單菜單

在線運行：級聯(lián)菜單

通過 JavaScript 調用

實例化組件：

// anchorSelector 表示觸發(fā)菜單的元素的 CSS 選擇器或 DOM 元素
// menuSelector 表示菜單的 CSS 選擇器或 DOM 元素
// options 表示組件的配置參數，見下面的參數列表
var inst = new mdui.Menu(anchorSelector, menuSelector, options);

在線運行

參數

方法

事件

CSS 類名列表