Menu met gestaffelde regels Nieuw

<!-- Menu met gestaffelde regels · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="msd"><div class="msd__page"><span class="msd__kk">Architectenbureau · Leiden</span><p class="msd__hh">Wonen aan het water, ontworpen voor honderd jaar.</p></div>
<div class="msd__panel" id="msd-panel"><ul class="msd__ul">
<li style="--i:0"><a class="msd__a" href="#"><span class="msd__n">01</span><span class="msd__m"><span class="msd__t">Projecten</span></span><span class="msd__c">24</span></a></li>
<li style="--i:1"><a class="msd__a" href="#"><span class="msd__n">02</span><span class="msd__m"><span class="msd__t">Werkwijze</span></span><span class="msd__c">5 stappen</span></a></li>
<li style="--i:2"><a class="msd__a" href="#"><span class="msd__n">03</span><span class="msd__m"><span class="msd__t">Studio</span></span><span class="msd__c">9 mensen</span></a></li>
<li style="--i:3"><a class="msd__a" href="#"><span class="msd__n">04</span><span class="msd__m"><span class="msd__t">Journaal</span></span><span class="msd__c">12 okt</span></a></li>
<li style="--i:4"><a class="msd__a" href="#"><span class="msd__n">05</span><span class="msd__m"><span class="msd__t">Contact</span></span><span class="msd__c">071 123 4567</span></a></li>
</ul><p class="msd__foot"><span>Kade 14, Leiden</span><span>studio@voorbeeld.nl</span></p></div>
<div class="msd__bar"><span class="msd__logo">Kade<b>/</b>Studio</span><button class="msd__btn" type="button" aria-expanded="false" aria-controls="msd-panel"><span class="msd__bl"><span>Menu</span><span>Sluit</span></span><span class="msd__ic"><i></i><i></i></span></button></div></div>
</div>

/* Menu met gestaffelde regels · NedDev · eigen werk. */
.msd{position:absolute;inset:0;background:#f4f3f1;color:#0a0a0a;font-family:'Switzer',system-ui,sans-serif;overflow:hidden;container-type:size}
.msd__bar{position:absolute;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:center;padding:10px 14px;z-index:3;transition:color .3s .1s}
.msd.is-open .msd__bar{color:#fff;transition-delay:0s}
.msd__logo{font-weight:800;font-size:14px;letter-spacing:-.02em}.msd__logo b{color:#F5480F;font-weight:500;margin:0 1px}
.msd__btn{appearance:none;border:1px solid currentColor;background:none;color:inherit;border-radius:999px;padding:5px 10px 5px 12px;display:flex;align-items:center;gap:8px;cursor:pointer;font:600 11px 'Switzer',sans-serif}
.msd__btn:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
.msd__bl{display:grid;height:1.3em;overflow:hidden;line-height:1.3}
.msd__bl span{transition:transform .4s cubic-bezier(.7,0,.2,1)}
.msd.is-open .msd__bl span{transform:translateY(-100%)}
.msd__ic{position:relative;width:14px;height:8px}
.msd__ic i{position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .4s cubic-bezier(.7,0,.2,1),top .4s}
.msd__ic i:first-child{top:0}.msd__ic i:last-child{top:6.5px}
.msd.is-open .msd__ic i:first-child{top:3.25px;transform:rotate(45deg)}.msd.is-open .msd__ic i:last-child{top:3.25px;transform:rotate(-45deg)}
.msd__page{position:absolute;left:14px;right:14px;bottom:16px}
.msd__kk{font:500 10px 'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:#F5480F}
.msd__hh{margin:6px 0 0;font:700 clamp(18px,7cqw,28px)/1.06 'Switzer',sans-serif;letter-spacing:-.03em;max-width:13em}
.msd__panel{position:absolute;inset:0;background:#0a0a0a;color:#fff;padding:42px 14px 10px;display:flex;flex-direction:column;justify-content:space-between;clip-path:inset(0 0 100% 0);transition:clip-path .5s cubic-bezier(.7,0,.2,1) .22s;z-index:2}
.msd.is-open .msd__panel{clip-path:inset(0 0 0 0);transition-delay:0s}
.msd__ul{list-style:none;margin:0;padding:0}
.msd__a{display:grid;grid-template-columns:26px 1fr auto;align-items:baseline;gap:6px;color:#fff;text-decoration:none;border-top:1px solid rgba(255,255,255,.12);padding:1px 0;transition:opacity .25s}
.msd__n,.msd__c{font:500 10px 'JetBrains Mono',monospace;color:#8f8a84;font-variant-numeric:tabular-nums;transition:color .25s}
.msd__m{display:block;overflow:hidden}
.msd__t{display:block;font:700 clamp(15px,8.2cqh,26px)/1.12 'Switzer',sans-serif;letter-spacing:-.03em;transform:translateY(110%);transition:transform .35s cubic-bezier(.7,0,.2,1) calc((4 - var(--i)) * .03s)}
.msd.is-open .msd__t{transform:none;transition:transform .7s cubic-bezier(.2,.8,.2,1) calc(.2s + var(--i) * .06s)}
.msd__ul:hover .msd__a{opacity:.35}.msd__ul .msd__a:hover,.msd__ul .msd__a:focus-visible{opacity:1;outline:none}
.msd__a:hover .msd__c,.msd__a:focus-visible .msd__c{color:#F5480F}
.msd__a:hover .msd__t{transform:translateX(5px);transition:transform .3s}
.msd__foot{display:flex;justify-content:space-between;margin:0;font:500 10px 'JetBrains Mono',monospace;color:#8f8a84;opacity:0;transition:opacity .2s}
.msd.is-open .msd__foot{opacity:1;transition:opacity .4s .6s}
@container (max-height:225px){.msd__c{display:none}.msd__panel{padding-top:38px}}
@media (prefers-reduced-motion:reduce){.msd *{transition:none!important}}

// Menu met gestaffelde regels · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.msd')||root;var btn=root.querySelector('.msd__btn'),touched=false;
function set(o){root.classList.toggle('is-open',o);btn.setAttribute('aria-expanded',o?'true':'false');}
btn.addEventListener('click',function(){touched=true;set(!root.classList.contains('is-open'));});
[].forEach.call(root.querySelectorAll('.msd__a'),function(a){a.addEventListener('click',function(e){e.preventDefault();touched=true;set(false);});});
root.addEventListener('keydown',function(e){if(e.key==='Escape'){set(false);btn.focus();}});
setTimeout(function(){if(!touched)set(true);},700);
}
init(document.querySelector('.jouw-container'));