menuMDUIDocs
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
プログレス