ツールバー

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

使用方法

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

シンプルメニュー

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

スタイル

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

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

<span class="mdui-menu-item-helper"></span> 要素は、メニュー項目に短い説明を追加します。
<span class="mdui-menu-item-more"></span> 要素は、メニュー項目に右向きの矢印を追加します。サブメニューを含むメニュー項目に使用されます。
この方法を使用する場合、JavaScript コードを記述する必要はありません。制御役となる要素（例：ボタン）に mdui-menu="options" 属性を追加するだけです。カスタム属性を介して呼び出す場合は、追加の target パラメータが必要です。これは制御対象のメニューを指定するために使用され、値は制御対象のメニューの CSS セレクターです。
注意：メニューを正しく配置するために、メニューとメニューをトリガーする要素は、同じ親要素の下の同じレベルにある必要があります。
コンポーネントのインスタンス化：

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

例

<div class="mdui-toolbar">
  <a href="javascript:;" class="mdui-btn mdui-btn-icon">
    <i class="mdui-icon material-icons">menu</i>
  </a>
  <span class="mdui-typo-title">Title</span>
  <div class="mdui-toolbar-spacer"></div>
  <a href="javascript:;" class="mdui-btn mdui-btn-icon">
    <i class="mdui-icon material-icons">search</i>
  </a>
  <a href="javascript:;" class="mdui-btn mdui-btn-icon">
    <i class="mdui-icon material-icons">refresh</i>
  </a>
  <a href="javascript:;" class="mdui-btn mdui-btn-icon">
    <i class="mdui-icon material-icons">more_vert</i>
  </a>
</div>

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

例

<div class="mdui-toolbar mdui-color-theme">
  <a href="javascript:;" class="mdui-btn mdui-btn-icon">
    <i class="mdui-icon material-icons">menu</i>
  </a>
  <span class="mdui-typo-title">Title</span>
  <div class="mdui-toolbar-spacer"></div>
  <a href="javascript:;" class="mdui-btn mdui-btn-icon">
    <i class="mdui-icon material-icons">search</i>
  </a>
  <a href="javascript:;" class="mdui-btn mdui-btn-icon">
    <i class="mdui-icon material-icons">refresh</i>
  </a>
  <a href="javascript:;" class="mdui-btn mdui-btn-icon">
    <i class="mdui-icon material-icons">more_vert</i>
  </a>
</div>

CSS クラス一覧

クラス名	説明
`.mdui-toolbar`	menuSelector は、メニューの CSS セレクターまたは DOM 要素を表します
`.mdui-toolbar-spacer`	options はコンポーネントの構成パラメータを表します。下記のパラメータリストを参照してください

タブ

アプリバー