ちいつる

通知・オーバーレイ

ポップオーバー

ボタン横に矢印付きの小パネル(メニュー)がフェードイン。外側クリックで閉じる。コンテキストメニューの基本形。

ENGLISH

Popover Menu

  • JS
216通知・オーバーレイ の一覧 →

プレビュー

クリック

操作クリック/タップで動きます。

コード(コピーして使えます)

<div class="stage" id="stage">
  <div class="anchor-wrap">
    <button class="anchor-btn" id="popoverAnchor" aria-haspopup="true" aria-expanded="false">
      オプション
      <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
        <polyline points="2,4 6,8 10,4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
    </button>

    <div class="popover" id="popover" role="menu" aria-hidden="true">
      <div class="popover-arrow" aria-hidden="true"></div>
      <button class="pop-item" role="menuitem">
        <svg width="13" height="13" viewBox="0 0 13 13" fill="none">
          <path d="M2 10.5h9M8.5 2.5l2 2-6 6-2.5.5.5-2.5 6-6z" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        編集する
      </button>
      <button class="pop-item" role="menuitem">
        <svg width="13" height="13" viewBox="0 0 13 13" fill="none">
          <rect x="2" y="4" width="9" height="7" rx="1.5" stroke="currentColor" stroke-width="1.4"/>
          <path d="M4.5 4V3a2 2 0 014 0v1" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>
        </svg>
        コピーする
      </button>
      <hr class="pop-divider"/>
      <button class="pop-item pop-item--danger" role="menuitem">
        <svg width="13" height="13" viewBox="0 0 13 13" fill="none">
          <path d="M2 3.5h9M5 3.5V2.5a.5.5 0 01.5-.5h2a.5.5 0 01.5.5v1M4.5 3.5l.5 7M8.5 3.5l-.5 7" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        削除する
      </button>
    </div>
  </div>
</div>

タグ

関連パーツ