← 静的パーツギャラリーへ戻る

パーツ番号 03-13-03 ・ CSSのみ

円形展開FABメニュー(静止状態)

中央のメインボタンから円弧状にサブアイコンが展開した状態を静止表示したFAB風メニューです。WordPressの投稿編集画面のクイック操作UIの見本になります。

staticcss

プレビュー

ソースコード

HTML

<div class="d03-13-03-stage">
          <a href="#" onclick="return false" class="d03-13-03-main" aria-label="メニューを開く">
            <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="#fff" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg>
          </a>
          <a href="#" onclick="return false" class="d03-13-03-item d03-13-03-p1" aria-label="編集">
            <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 013 3L7 19l-4 1 1-4z"/></svg>
          </a>
          <a href="#" onclick="return false" class="d03-13-03-item d03-13-03-p2" aria-label="共有">
            <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><path d="M8.6 10.6l6.8-3.8M8.6 13.4l6.8 3.8"/></svg>
          </a>
          <a href="#" onclick="return false" class="d03-13-03-item d03-13-03-p3" aria-label="削除">
            <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13"/></svg>
          </a>
        </div>

CSS

.d03-13-03-stage{position:relative;width:180px;height:180px}
        .d03-13-03-main{
          position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
          display:flex;align-items:center;justify-content:center;
          width:52px;height:52px;border-radius:50%;
          background:#2563eb;box-shadow:0 4px 14px rgba(37,99,235,.4);
        }
        .d03-13-03-item{
          position:absolute;
          display:flex;align-items:center;justify-content:center;
          width:36px;height:36px;border-radius:50%;
          background:#fff;color:#334155;
          box-shadow:0 2px 8px rgba(0,0,0,.15);
        }
        .d03-13-03-p1{left:50%;top:6px;transform:translateX(-50%)}
        .d03-13-03-p2{right:6px;top:50%;transform:translateY(-50%)}
        .d03-13-03-p3{left:6px;top:50%;transform:translateY(-50%)}

クラス名 .d03-13-03 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。