パーツ番号 03-08-06 ・ JavaScript使用
項目が時間差で現れるスタガーメニュー
メニューを開くと項目が上から順番にふわっと現れるスタガーアニメーション。WordPressのブログ・ジャーナル系サイトのメニュー開閉に軽やかな印象を与えます。
プレビュー
ソースコード
HTML
<div class="d03-08-06-frame">
<div class="d03-08-06-bar">
<span class="d03-08-06-logo">Journal</span>
<button class="d03-08-06-burger" type="button" aria-label="メニューを開く" aria-expanded="false">
<span></span><span></span><span></span>
</button>
</div>
<nav class="d03-08-06-menu">
<a href="#">トップ</a>
<a href="#">カテゴリー</a>
<a href="#">人気記事</a>
<a href="#">お問い合わせ</a>
</nav>
</div>CSS
.d03-08-06-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-06-bar{position:relative;z-index:4;display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid #eef2f7}
.d03-08-06-logo{font-weight:800;font-size:13px;color:#1d4ed8;letter-spacing:.02em}
.d03-08-06-burger{position:relative;width:28px;height:28px;border:0;background:transparent;cursor:pointer;padding:0}
.d03-08-06-burger span{position:absolute;left:4px;width:20px;height:2.4px;background:#1f2937;border-radius:2px;transition:transform .3s,opacity .3s,top .3s}
.d03-08-06-burger span:nth-child(1){top:8px}
.d03-08-06-burger span:nth-child(2){top:14px}
.d03-08-06-burger span:nth-child(3){top:20px}
.d03-08-06-burger.open span:nth-child(1){top:14px;transform:rotate(45deg)}
.d03-08-06-burger.open span:nth-child(2){opacity:0}
.d03-08-06-burger.open span:nth-child(3){top:14px;transform:rotate(-45deg)}
.d03-08-06-menu{position:absolute;left:0;right:0;top:57px;bottom:0;z-index:2;display:flex;flex-direction:column;gap:2px;padding:10px 16px;background:#fff}
.d03-08-06-menu a{padding:10px 8px;color:#374151;text-decoration:none;font-size:13.5px;border-radius:8px;opacity:0;transform:translateY(-10px);transition:opacity .35s,transform .35s,background .15s,color .15s}
.d03-08-06-menu a:nth-child(1){transition-delay:.05s}
.d03-08-06-menu a:nth-child(2){transition-delay:.12s}
.d03-08-06-menu a:nth-child(3){transition-delay:.19s}
.d03-08-06-menu a:nth-child(4){transition-delay:.26s}
.d03-08-06-frame.open .d03-08-06-menu a{opacity:1;transform:translateY(0)}
.d03-08-06-menu a:hover{background:#eff6ff;color:#1d4ed8}JavaScript
(function(){
var root=document.getElementById('item-03-08-06');
var burger=root.querySelector('.d03-08-06-burger');
var frame=root.querySelector('.d03-08-06-frame');
burger.addEventListener('click',function(){
var isOpen=frame.classList.toggle('open');
burger.classList.toggle('open',isOpen);
burger.setAttribute('aria-expanded',isOpen?'true':'false');
});
})();クラス名 .d03-08-06 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。