menuMDUI文件
color_lens
基於 Material Design 3 與 Web Components 的全新 mdui 2 現已發佈，前往查看 mdui 2 開發文件。

選單

選單分為簡單選單和階層選單。簡單選單適用於手機與平板電腦，階層選單適用於桌面裝置。

呼叫方式

  1. 透過自訂屬性呼叫
  2. 透過 JavaScript 呼叫

相關閱讀

Material Design 設計規範：元件 - 選單

樣式

簡單選單

在選單項目上添加 disabled 屬性可以停用一個選單項目。

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

codeplay_arrow
範例
<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>

帶圖示的簡單選單

codeplay_arrow
範例
<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"
        >remove_red_eye</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"
        >file_download</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">delete</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> 元素為選單項目添加一個向右的箭頭，用在含子選單的選單項目上。

codeplay_arrow
範例
<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"
        >format_bold</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"
        >format_italic</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"
            >check</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 選取器。

注意：為了使選單能正確地定位，選單和觸發選單的元素必須位於同一父元素下的同一層級。

codeplay_arrow
範例
<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>
codeplay_arrow
範例
<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"
        >format_bold</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"
        >format_italic</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"
            >check</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"
            >check</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);
執行

參數

參數名稱類型預設值說明
positionstringauto選單相對於觸發它的元素的位置。
  • top：選單在觸發它的元素的上方。
  • bottom：選單在觸發它的元素的下方。
  • center：選單在視窗中垂直置中。
  • auto：自動判斷位置。優先順序為：bottom > top > center。
alignstringauto選單與觸發它的元素的對齊方式。
  • left：選單與觸發它的元素左對齊。
  • right：選單與觸發它的元素右對齊。
  • center：選單在視窗中水平置中。
  • auto：自動判斷位置，優先順序為：left > right > center。
gutterint16選單與視窗邊框至少保持多少間距，單位為 px。
fixedbooleanfalse選單的定位方式
  • true：選單使用 fixed 定位。在頁面捲動時，選單將保持在視窗固定位置，不隨捲動軸捲動。
  • false：選單使用 absolute 定位。在頁面捲動時，選單將隨著頁面一起捲動。
coveredbooleanauto選單是否覆蓋在觸發它的元素的上面。
  • true：使選單覆蓋在觸發它的元素的上面。
  • false：使選單不覆蓋觸發它的元素。
  • auto：簡單選單覆蓋觸發它的元素。階層選單不覆蓋觸發它的元素。
subMenuTriggerstringhover子選單的觸發方式。
  • click：點擊時觸發子選單。
  • hover：滑鼠懸停時觸發子選單。
subMenuDelayint200子選單的觸發延遲時間（單位：毫秒），只有在 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含子選單的選單項目的向右箭頭。
arrow_backPrevious
對話框
arrow_forwardNext
進度條