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

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

円形に展開するフルスクリーンメニュー

ハンバーガーボタンを起点に円がじわっと広がり、画面全体をメニューで覆う演出。WordPressのECサイトやコーポレートサイトのインパクトあるモバイルナビに。

mobilejs

プレビュー

ソースコード

HTML

<div class="d03-08-02-frame">
          <div class="d03-08-02-bar">
            <span class="d03-08-02-logo">Store</span>
            <button class="d03-08-02-burger" type="button" aria-label="メニューを開く" aria-expanded="false">
              <span></span><span></span><span></span>
            </button>
          </div>
          <div class="d03-08-02-menu">
            <a href="#">ホーム</a>
            <a href="#">コレクション</a>
            <a href="#">セール</a>
            <a href="#">マイページ</a>
          </div>
        </div>

CSS

.d03-08-02-frame{position:relative;width:100%;max-width:260px;height:210px;margin:0 auto;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 10px 26px rgba(30,41,59,.14);border:1px solid #e5e7eb}
        .d03-08-02-bar{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:14px 16px}
        .d03-08-02-logo{font-weight:800;font-size:13px;color:#334155;letter-spacing:.02em;transition:color .3s}
        .d03-08-02-frame.open .d03-08-02-logo{color:#fff}
        .d03-08-02-burger{position:relative;width:28px;height:28px;border:0;background:transparent;cursor:pointer;padding:0}
        .d03-08-02-burger span{position:absolute;left:4px;width:20px;height:2.4px;background:#1f2937;border-radius:2px;transition:transform .3s,opacity .3s,background .3s}
        .d03-08-02-burger span:nth-child(1){top:8px}
        .d03-08-02-burger span:nth-child(2){top:14px}
        .d03-08-02-burger span:nth-child(3){top:20px}
        .d03-08-02-frame.open .d03-08-02-burger span{background:#fff}
        .d03-08-02-frame.open .d03-08-02-burger span:nth-child(1){top:14px;transform:rotate(45deg)}
        .d03-08-02-frame.open .d03-08-02-burger span:nth-child(2){opacity:0}
        .d03-08-02-frame.open .d03-08-02-burger span:nth-child(3){top:14px;transform:rotate(-45deg)}
        .d03-08-02-menu{position:absolute;inset:0;z-index:2;background:linear-gradient(135deg,#4f46e5,#7c3aed);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;clip-path:circle(4% at 88% 8%);transition:clip-path .55s cubic-bezier(.65,0,.35,1)}
        .d03-08-02-frame.open .d03-08-02-menu{clip-path:circle(150% at 88% 8%)}
        .d03-08-02-menu a{color:#fff;text-decoration:none;font-size:14px;font-weight:600;opacity:.92}
        .d03-08-02-menu a:hover{opacity:1;text-decoration:underline}

JavaScript

(function(){
        var root=document.getElementById('item-03-08-02');
        var burger=root.querySelector('.d03-08-02-burger');
        var frame=root.querySelector('.d03-08-02-frame');
        burger.addEventListener('click',function(){
          var isOpen=frame.classList.toggle('open');
          burger.setAttribute('aria-expanded',isOpen?'true':'false');
        });
      })();

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