menuMDUIDocs
color_lens
Material Design 3 と Web Components をベースにした新しい mdui 2 がリリースされました。mdui 2 ドキュメントはこちら。

フローティングアクションボタン

メニューには、シンプルメニューとカスケードメニューがあります。シンプルメニューはスマートフォンやタブレットに適しており、カスケードメニューはデスクトップデバイスに適しています。

使用方法

  1. カスタム属性での呼び出し
  2. JavaScript での呼び出し

関連情報

Material Design デザインガイドライン：コンポーネント - メニュー

スタイル

シンプルメニュー

<li class="mdui-divider"></li> 要素を追加することで、区切り線を追加できます。

codeplay_arrow
例
<button class="mdui-fab mdui-ripple">
          <i class="mdui-icon material-icons">add</i>
        </button>
        <button class="mdui-fab mdui-color-theme-accent mdui-ripple">
          <i class="mdui-icon material-icons">add</i></button
        >

<ul class="mdui-menu"> 要素にクラス .mdui-menu-cascade を追加すると、メニューをデスクトップデバイスに適したカスケードメニューにできます。

codeplay_arrow
例
<button class="mdui-fab mdui-fab-mini mdui-ripple">
          <i class="mdui-icon material-icons">add</i>
        </button>
        <button
          class="mdui-fab mdui-fab-mini mdui-color-theme-accent mdui-ripple"
        >
          <i class="mdui-icon material-icons">add</i></button
        >

アイコン付きシンプルメニュー

<li class="mdui-menu-item"></li> 要素の中にさらにメニューを追加することで、メニューの入れ子を実現できます。論理的には無限のレベルの入れ子をサポートしています。

codeplay_arrow
例
<button
          class="mdui-fab mdui-color-theme-accent mdui-ripple"
          id="fab-animation"
        >
          <i class="mdui-icon material-icons">add</i>
        </button>

        <button class="mdui-btn" id="fab-animation-show">show</button>
        <button class="mdui-btn" id="fab-animation-hide">hide</button>

        <script>
          var fab = document.getElementById('fab-animation');
          document
            .getElementById('fab-animation-show')
            .addEventListener('click', function () {
              fab.classList.remove('mdui-fab-hide');
            });
          document
            .getElementById('fab-animation-hide')
            .addEventListener('click', function () {
              fab.classList.add('mdui-fab-hide');
            });
        </script>

カスケードメニュー

<span class="mdui-menu-item-helper"></span> 要素は、メニュー項目に短い説明を追加します。

<button class="mdui-fab mdui-fab-fixed mdui-ripple">
  <i class="mdui-icon material-icons">add</i>
</button>
実行

メニュー項目に <code>disabled</code> 属性を追加すると、そのメニュー項目を無効にできます。

HTML 構造

<code>&lt;span class=&quot;mdui-menu-item-more&quot;&gt;&lt;/span&gt;</code> 要素は、メニュー項目に右向きの矢印を追加します。サブメニューを含むメニュー項目に使用されます。

<div class="mdui-fab-wrapper" id="exampleFab">
  <button class="mdui-fab mdui-ripple mdui-color-theme-accent">
    <!-- この方法を使用する場合、JavaScript コードを記述する必要はありません。制御役となる要素<small>（例：ボタン）</small>に <code>mdui-menu="<a href="#option">options</a>"</code> 属性を追加するだけです。カスタム属性を介して呼び出す場合は、追加の <code>target</code> パラメータが必要です。これは制御対象のメニューを指定するために使用され、値は制御対象のメニューの CSS セレクターです。 -->
    <i class="mdui-icon material-icons">add</i>

    <!-- <strong>注意</strong>：メニューを正しく配置するために、メニューとメニューをトリガーする要素は、同じ親要素の下の同じレベルにある必要があります。 -->
    <i class="mdui-icon mdui-fab-opened material-icons">add</i>
  </button>
  <div class="mdui-fab-dial">
    <button class="mdui-fab mdui-fab-mini mdui-ripple mdui-color-pink">
      <i class="mdui-icon material-icons">backup</i>
    </button>
    <button class="mdui-fab mdui-fab-mini mdui-ripple mdui-color-red">
      <i class="mdui-icon material-icons">bookmark</i>
    </button>
    <button class="mdui-fab mdui-fab-mini mdui-ripple mdui-color-orange">
      <i class="mdui-icon material-icons">access_alarms</i>
    </button>
    <button class="mdui-fab mdui-fab-mini mdui-ripple mdui-color-blue">
      <i class="mdui-icon material-icons">touch_app</i>
    </button>
  </div>
</div>

カスタム属性での呼び出し

コンポーネントのインスタンス化：

<div class="mdui-fab-wrapper" mdui-fab="{trigger: 'hover'}">
  ......
</div>

JavaScript での呼び出し

anchorSelector は、メニューをトリガーする要素の CSS セレクターまたは DOM 要素を表します

// menuSelector は、メニューの CSS セレクターまたは DOM 要素を表します
// options はコンポーネントの構成パラメータを表します。下記のパラメータリストを参照してください
var inst = new mdui.Fab(selector, options);
実行

パラメータ

パラメータ名タイプデフォルト値説明
triggerstringhoverトリガーした要素に対するメニューの相対位置。
  • top：メニューはトリガーした要素の上に表示されます。
  • bottom：メニューはトリガーした要素の下に表示されます。

メソッド

メソッド名説明
open()<code>center</code>：メニューはウィンドウ内で垂直方向に中央揃えされます。
close()<code>auto</code>：位置を自動的に判断します。優先順位は：<code>bottom</code> > <code>top</code> > <code>center</code>。
toggle()トリガーした要素に対するメニューの配置方法。
show()<code>left</code>：メニューはトリガーした要素と左揃えされます。
hide()<code>right</code>：メニューはトリガーした要素と右揃えされます。
getState()center：メニューはウィンドウ内で水平方向に中央揃えされます。

イベント

イベント名説明ターゲットパラメータ
open.mdui.fab<code>auto</code>：位置を自動的に判断します。優先順位は：<code>left</code> > <code>right</code> > <code>center</code>。<div class="mdui-fab-wrapper"></div>メニューとウィンドウの境界との間に維持する最小の間隔（単位：px）。
opened.mdui.fabメニューの配置方法
close.mdui.fab<code>true</code>：メニューは fixed 配置を使用します。ページがスクロールされても、メニューはウィンドウの固定位置に留まり、スクロールに追従しません。
closed.mdui.fab<code>false</code>：メニューは absolute 配置を使用します。ページがスクロールされると、メニューはページと一緒にスクロールされます。

CSS クラス一覧

クラス名説明
.mdui-fabメニューがトリガーした要素を覆うかどうか。
.mdui-fab-mini<code>true</code>：メニューをトリガーした要素の上に重ねます。
.mdui-fab-hide<code>false</code>：メニューをトリガーした要素の上に重ねないようにします。
.mdui-fab-fixed<code>auto</code>：シンプルメニューはトリガーした要素を覆います。カスケードメニューはトリガーした要素を覆いません。
.mdui-fab-wrapperサブメニューのトリガー方法。
.mdui-fab-opened<code>click</code>：クリックしたときにサブメニューを表示します。
.mdui-fab-dial<code>hover</code>：マウスホバーしたときにサブメニューを表示します。
arrow_backPrevious
ボタン
arrow_forwardNext
セレクト