通知・オーバーレイ
ポップオーバー
ボタン横に矢印付きの小パネル(メニュー)がフェードイン。外側クリックで閉じる。コンテキストメニューの基本形。
プレビュー
クリック
操作クリック/タップで動きます。
コード(コピーして使えます)
<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>