メニュー

メニューコンポーネントは、モバイルアプリではあまり見かけません。しかし、地図や画像、テキスト/コードエディタなどの上にコントロールが必要な場合には、非常に便利であることが証明されています。

メニューのレイアウト

まず最初に、メニューのHTMLレイアウトを見てみましょう。

<!-- メニューコンテナ -->
<div class="menu">
  <div class="menu-inner">
    <!-- 単一のメニューアイテム -->
    <a href="#" class="menu-item">
      <div class="menu-item-content">Item 1</div>
    </a>
    <a href="#" class="menu-item">
      <div class="menu-item-content">Item 2</div>
    </a>
    <!-- アイコンのみのメニューアイテム -->
    <a href="#" class="menu-item icon-only">
      <div class="menu-item-content">
        <i class="f7-icons">pencil</i>
      </div>
    </a>

    <!-- ドロップダウン付きのメニューアイテム -->
    <div class="menu-item menu-item-dropdown">
      <div class="menu-item-content">Left</div>
      <!-- ドロップダウン・コンテナ -->
      <div class="menu-dropdown menu-dropdown-left">
        <!-- ドロップダウンのコンテンツ -->
        <div class="menu-dropdown-content">
          <!-- ドロップダウンリンク -->
          <a href="#" class="menu-dropdown-link menu-close">Menu Item 1</a>
          <a href="#" class="menu-dropdown-link menu-close">Menu Item 2</a>
          <a href="#" class="menu-dropdown-link menu-close">Menu Item 3</a>
          <a href="#" class="menu-dropdown-link menu-close">Menu Item 4</a>
          <!-- ドロップダウンディバイダー -->
          <div class="menu-dropdown-divider"></div>
          <a href="#" class="menu-dropdown-link menu-close">Menu Item 5</a>
          <a href="#" class="menu-dropdown-link menu-close">Menu Item 6</a>
        </div>
      </div>
    </div>
  </div>
</div>

構造

menu - メインのメニューコンテナ
- menu-inner - 追加の内部ラッパー
  - menu-item - 単一のメニューアイテム要素です。link (<a>) と div の両方が使用できます。
    - menu-item-content - テキスト、アイコン、その他必要に応じたメニューアイテムのコンテンツです。
  - menu-item-dropdown - ドロップダウンを含むときに、menu-item に設定される追加クラスです。
    - menu-dropdown - メニューアイテムのドロップダウンコンテナです。
    - menu-dropdown-left - メニューアイテムに対するドロップダウンの相対的な位置を示す追加クラスです。menu-dropddown-center や menu-dropddown-right` にもできます。

メニューアプリのメソッド

メニューを扱うアプリの関連メソッドを見てみましょう。

app.menu.open(el)- メニューのドロップダウンを開く

el - HTMLElementまたはstring（CSS Selectorを使用）を指定します。ドロップダウンを開いた状態のメニュー項目

app.menu.close(el)- メニューのドロップダウンを閉じる

el - HTMLElement または string (with CSS Selector)。ドロップダウンで閉じるメニュー項目です。

リンクによるメニュー制御

メニューのドロップダウンは、特別なクラスを使って閉じることができます（DOMにドロップダウンがある場合）。

メニュードロップダウンを閉じるには、"menu-close"クラスを任意のHTML要素（リンクよりも望ましい）に追加する必要があります。

メニューのイベント

メニューは、メニュードロップダウン要素のDOMイベントと、アプリのインスタンスのイベントを実行します。

DOMイベント

Event	Target	Description
menu:opened	Menu Dropdown Item<div class="menu-item-dropdown">	メニューのドロップダウンが開かれた直後にイベントが発生します。
menu:closed	Menu Dropdown Item<div class="menu-item-dropdown">	メニューのドロップダウンが閉じられた直後にイベントが発生します。

アプリ・インスタンスのイベント

Event	Arguments	Description
menuOpened	(el)	メニュードロップダウンが開かれた直後にイベントが発生します。イベントハンドラは、引数としてメニュードロップダウンアイテム要素を受け取ります。
menuClosed	(el)	メニュードロップダウンが閉じられた直後にイベントが発生します。引数のイベントハンドラがメニュードロップダウンのアイテム要素を受け取ると

CSS Variables

Below is the list of related CSS variables (CSS custom properties).

Note that commented variables are not specified by default and their values is what they fallback to in this case.

:root {
  --f7-menu-text-color: #fff;
  --f7-menu-font-size: 16px;
  --f7-menu-font-weight: 500;
  --f7-menu-line-height: 1.2;
  --f7-menu-bg-color: rgba(0, 0, 0, 0.9);
  --f7-menu-item-pressed-bg-color: rgba(20, 20, 20, 0.9);
  --f7-menu-item-padding-horizontal: 12px;
  --f7-menu-item-spacing: 6px;
  --f7-menu-item-height: 40px;
  --f7-menu-item-dropdown-icon-color: rgba(255, 255, 255, 0.4);
  --f7-menu-item-border-radius: 8px;
  /*
  --f7-menu-dropdown-pressed-bg-color: var(--f7-theme-color);
  */
  --f7-menu-dropdown-item-height: 32px;
  --f7-menu-dropdown-divider-color: rgba(255, 255, 255, 0.2);
  --f7-menu-dropdown-padding-vertical: 6px;
  /*
  --f7-menu-dropdown-border-radius: var(--f7-menu-item-border-radius);
  */
}
.aurora {
  /*
  --f7-menu-dropdown-hover-bg-color: rgba(255, 255, 255, 0.15);
  */
}

Examples

<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="title">Menu</div>
    </div>
  </div>
  <div class="page-content">
    <div class="block-title">Plain Links</div>
    <div class="menu">
      <div class="menu-inner">
        <a href="#" class="menu-item">
          <div class="menu-item-content">Item 1</div>
        </a>
        <a href="#" class="menu-item">
          <div class="menu-item-content">Item 2</div>
        </a>
        <a href="#" class="menu-item icon-only">
          <div class="menu-item-content">
            <i class="f7-icons">pencil</i>
          </div>
        </a>
        <a href="#" class="menu-item icon-only">
          <div class="menu-item-content">
            <i class="f7-icons">square_arrow_up</i>
          </div>
        </a>
      </div>
    </div>

    <div class="block-title">Dropdowns</div>
    <div class="menu">
      <div class="menu-inner">
        <div class="menu-item menu-item-dropdown">
          <div class="menu-item-content">Left</div>
          <div class="menu-dropdown menu-dropdown-left">
            <div class="menu-dropdown-content">
              <a href="#" class="menu-dropdown-link menu-close">Menu Item 1</a>
              <a href="#" class="menu-dropdown-link menu-close">Menu Item 2</a>
              <a href="#" class="menu-dropdown-link menu-close">Menu Item 3</a>
              <a href="#" class="menu-dropdown-link menu-close">Menu Item 4</a>
              <div class="menu-dropdown-divider"></div>
              <a href="#" class="menu-dropdown-link menu-close">Menu Item 5</a>
              <a href="#" class="menu-dropdown-link menu-close">Menu Item 6</a>
            </div>
          </div>
        </div>
        <div class="menu-item menu-item-dropdown">
          <div class="menu-item-content">Center</div>
          <div class="menu-dropdown menu-dropdown-center">
            <div class="menu-dropdown-content" style="height: 200px">
              <a href="#" class="menu-dropdown-link menu-close">Menu Item 1</a>
              <a href="#" class="menu-dropdown-link menu-close">Menu Item 2</a>
              <a href="#" class="menu-dropdown-link menu-close">Menu Item 3</a>
              <a href="#" class="menu-dropdown-link menu-close">Menu Item 4</a>
              <div class="menu-dropdown-divider"></div>
              <a href="#" class="menu-dropdown-link menu-close">Menu Item 5</a>
              <a href="#" class="menu-dropdown-link menu-close">Menu Item 6</a>
              <a href="#" class="menu-dropdown-link menu-close">Menu Item 7</a>
              <div class="menu-dropdown-divider"></div>
              <a href="#" class="menu-dropdown-link menu-close">Menu Item 8</a>
              <a href="#" class="menu-dropdown-link menu-close">Menu Item 9</a>
              <a href="#" class="menu-dropdown-link menu-close">Menu Item 10</a>
            </div>
          </div>
        </div>
        <div class="menu-item menu-item-dropdown">
          <div class="menu-item-content">Right</div>
          <div class="menu-dropdown menu-dropdown-right">
            <div class="menu-dropdown-content">
              <a href="#" class="menu-dropdown-link menu-close">Menu Item 1</a>
              <a href="#" class="menu-dropdown-link menu-close">Menu Item 2</a>
              <a href="#" class="menu-dropdown-link menu-close">Menu Item 3</a>
              <a href="#" class="menu-dropdown-link menu-close">Menu Item 4</a>
              <div class="menu-dropdown-divider"></div>
              <a href="#" class="menu-dropdown-link menu-close">Menu Item 5</a>
              <a href="#" class="menu-dropdown-link menu-close">Menu Item 6</a>
            </div>
          </div>
        </div>
        <div style="margin-left: auto" class="menu-item menu-item-dropdown">
          <div class="menu-item-content icon-only">
            <div class="menu-item-content">
              <i class="f7-icons">square_arrow_up</i>
            </div>
          </div>
          <div class="menu-dropdown menu-dropdown-right">
            <div class="menu-dropdown-content">
              <a href="#" class="menu-dropdown-link menu-close">
                <span>Share on Facebook</span>
                <i class="f7-icons margin-left">logo_facebook</i>
              </a>
              <a href="#" class="menu-dropdown-link menu-close">
                <span>Share on Twitter</span>
                <i class="f7-icons margin-left">logo_twitter</i>
              </a>
            </div>
          </div>
        </div>
        <a href="#" class="menu-item icon-only">
          <div class="menu-item-content">
            <i class="f7-icons">pencil</i>
          </div>
        </a>
      </div>
    </div>
  </div>
</div>