Menu メニュー · `kf-menu`

ボタンを押すと出る操作の一覧。details で開閉するので JS は要らない。

クラスkf-btnkf-dropdownkf-menukf-menu-itemkf-menu-sep

HTML

<details class="kf-dropdown" open>
  <summary class="kf-btn">操作 ▾</summary>
  <div class="kf-menu" role="menu">
    <button class="kf-menu-item" role="menuitem">開く<kbd>⏎</kbd></button>
    <button class="kf-menu-item" role="menuitem">複製<kbd>⌘D</kbd></button>
    <button class="kf-menu-item" role="menuitem">名前を変える</button>
    <div class="kf-menu-sep"></div>
    <button class="kf-menu-item is-danger" role="menuitem">削除する</button>
  </div>
</details>

<details class="kf-dropdown"><summary class="kf-btn">…</summary><div class="kf-menu">…</div></details>。右寄せは kf-menu is-right。
項目は kf-menu-item(button か a)。区切りは kf-menu-sep。ショートカットは kbd で右端に。
取り消し・削除は is-danger にして一番下、区切りの下に置く。押した先で確認を挟む。
項目は 7 つまで。それ以上は画面を分ける。文字は動詞か名詞で短く。
影は shadow-pop。浮いているものにだけ影を付ける、の例外的な使い所。
開いたまま別の所を押しても閉じないのが details の性質。閉じたいなら summary をもう一度押すか、Kafune.closeMenus() を呼ぶ。

Menu メニュー · kf-menu

Menu メニュー · `kf-menu`