パーツ番号 03-08-02 ・ JavaScript使用
円形に展開するフルスクリーンメニュー
ハンバーガーボタンを起点に円がじわっと広がり、画面全体をメニューで覆う演出。WordPressのECサイトやコーポレートサイトのインパクトあるモバイルナビに。
プレビュー
ソースコード
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 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。