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

パーツ番号 11-03-05 ・ JavaScript使用

フローティングアクションボタン

右下の＋ボタンをタップすると子メニューが上に展開し、＋が×に回転。WordPressのモバイル投稿・追加操作に。タップで開閉します。

mobileclickjs3doverlay

プレビュー

ソースコード

HTML

<div class="d11-03-05-phone">
          <div class="d11-03-05-screen">
            <div class="d11-03-05-content">投稿一覧</div>
            <div class="d11-03-05-fabwrap">
              <button class="d11-03-05-child" data-t="1" aria-label="写真"><svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M4 5h16v14H4z" opacity=".2"/><path fill="none" stroke="currentColor" stroke-width="2" d="M4 5h16v14H4zM8 13l3-3 5 5"/></svg></button>
              <button class="d11-03-05-child" data-t="2" aria-label="メモ"><svg viewBox="0 0 24 24" width="16" height="16"><path fill="none" stroke="currentColor" stroke-width="2" d="M6 4h9l3 3v13H6zM9 9h6M9 13h6"/></svg></button>
              <button class="d11-03-05-child" data-t="3" aria-label="リンク"><svg viewBox="0 0 24 24" width="16" height="16"><path fill="none" stroke="currentColor" stroke-width="2" d="M9 15l6-6M8 12l-2 2a3 3 0 004 4l2-2M16 12l2-2a3 3 0 00-4-4l-2 2"/></svg></button>
              <button class="d11-03-05-fab" id="d11-03-05-fab" aria-label="追加"><span class="d11-03-05-plus">+</span></button>
            </div>
          </div>
        </div>

CSS

.d11-03-05-phone{width:190px;height:240px;border-radius:24px;border:6px solid #1f2937;background:#fff;position:relative;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.15)}
        .d11-03-05-screen{position:absolute;inset:0;background:#f8fafc}
        .d11-03-05-content{position:absolute;top:16px;left:0;right:0;text-align:center;color:#94a3b8;font-size:13px;font-weight:600}
        .d11-03-05-fabwrap{position:absolute;right:14px;bottom:14px;display:flex;flex-direction:column-reverse;align-items:center;gap:10px}
        .d11-03-05-fab{width:44px;height:44px;border-radius:50%;border:0;background:#4f46e5;color:#fff;cursor:pointer;box-shadow:0 6px 16px rgba(79,70,229,.4);z-index:2}
        .d11-03-05-plus{font-size:24px;line-height:1;display:inline-block;transition:transform .3s}
        .d11-03-05-fabwrap.d11-03-05-open .d11-03-05-plus{transform:rotate(135deg)}
        .d11-03-05-child{width:34px;height:34px;border-radius:50%;border:0;background:#fff;color:#4f46e5;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.18);opacity:0;transform:translateY(14px) scale(.6);transition:all .28s}
        .d11-03-05-fabwrap.d11-03-05-open .d11-03-05-child{opacity:1;transform:translateY(0) scale(1)}
        .d11-03-05-fabwrap.d11-03-05-open .d11-03-05-child[data-t="2"]{transition-delay:.05s}
        .d11-03-05-fabwrap.d11-03-05-open .d11-03-05-child[data-t="3"]{transition-delay:.1s}

JavaScript

(function(){
        var root=document.getElementById('item-11-03-05');if(!root)return;
        var wrap=root.querySelector('.d11-03-05-fabwrap'),fab=root.querySelector('#d11-03-05-fab');
        fab.addEventListener('click',function(){wrap.classList.toggle('d11-03-05-open');});
      })();

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