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

パーツ番号 03-02-08 ・ JavaScript使用

スピードダイヤルFAB

プラスボタンをクリックすると子アクションが上方向に順次展開し、再クリックで収納されます。WordPressの新規作成ボタンやクイックアクションに。

clickjsoverlay

プレビュー

ソースコード

HTML

<div class="d03-02-08-fab">
          <button class="d03-02-08-action" data-i="1" title="投稿">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="#fff" stroke-width="2"><path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z"/></svg>
          </button>
          <button class="d03-02-08-action" data-i="2" title="画像">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="#fff" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="M21 15l-5-5L5 21"/></svg>
          </button>
          <button class="d03-02-08-action" data-i="3" title="リンク">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="#fff" stroke-width="2"><path d="M10 13a5 5 0 0 0 7 0l3-3a5 5 0 0 0-7-7l-1 1"/><path d="M14 11a5 5 0 0 0-7 0l-3 3a5 5 0 0 0 7 7l1-1"/></svg>
          </button>
          <button class="d03-02-08-main" aria-label="メニューを開く">
            <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="#fff" stroke-width="2.4"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
          </button>
        </div>

CSS

.d03-02-08-fab{position:absolute;right:32px;bottom:32px;width:52px;height:52px}
        .d03-02-08-main,.d03-02-08-action{position:absolute;bottom:0;right:0;border:0;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(79,70,229,.35)}
        .d03-02-08-main{width:52px;height:52px;background:#4f46e5;z-index:3;transition:transform .3s}
        .d03-02-08-main svg{transition:transform .3s}
        .d03-02-08-action{width:44px;height:44px;background:#818cf8;opacity:0;transform:translateY(0) scale(.4);transition:transform .3s,opacity .3s;z-index:2}
        .d03-02-08-fab.open .d03-02-08-main svg{transform:rotate(135deg)}
        .d03-02-08-fab.open .d03-02-08-action[data-i="1"]{opacity:1;transform:translateY(-62px) scale(1)}
        .d03-02-08-fab.open .d03-02-08-action[data-i="2"]{opacity:1;transform:translateY(-118px) scale(1)}
        .d03-02-08-fab.open .d03-02-08-action[data-i="3"]{opacity:1;transform:translateY(-174px) scale(1)}
        .d03-02-08-action:hover{background:#4f46e5}

JavaScript

(function(){
        var fab=document.querySelector('#item-03-02-08 .d03-02-08-fab');
        fab.querySelector('.d03-02-08-main').addEventListener('click',function(){fab.classList.toggle('open');});
      })();

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