Volledig menupaneel met index New

<!-- Volledig menupaneel met index · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="nfi">
  <div class="nfi__bar">
    <a href="#" class="nfi__logo">Smit <i>&amp;</i> Vos<span>architecten</span></a>
    <button class="nfi__btn" type="button" aria-expanded="false" aria-controls="nfi-panel"><span class="nfi__btn-txt">Menu</span><span class="nfi__ico" aria-hidden="true"><i></i><i></i></span></button>
  </div>
  <div class="nfi__page">
    <div class="nfi__meta"><span>Project 2025/07</span><span>Bloemendaal</span><span>14 woningen</span></div>
    <p class="nfi__title">Wonen in de duinrand</p>
    <div class="nfi__img" aria-hidden="true"></div>
  </div>
  <div class="nfi__panel" id="nfi-panel" role="dialog" aria-modal="true" aria-label="Menu" aria-hidden="true">
    <ol class="nfi__list">
      <li style="--i:0"><a href="#"><span class="nfi__n">01</span><span class="nfi__t">Projecten</span><span class="nfi__c">38</span></a></li>
      <li style="--i:1"><a href="#"><span class="nfi__n">02</span><span class="nfi__t">Werkwijze</span></a></li>
      <li style="--i:2"><a href="#"><span class="nfi__n">03</span><span class="nfi__t">Bureau</span><span class="nfi__c">11</span></a></li>
      <li style="--i:3"><a href="#"><span class="nfi__n">04</span><span class="nfi__t">Vacatures</span><span class="nfi__c">2</span></a></li>
      <li style="--i:4"><a href="#"><span class="nfi__n">05</span><span class="nfi__t">Contact</span></a></li>
    </ol>
    <div class="nfi__info">
      <div class="nfi__blk"><span class="nfi__lab">Vestiging</span><p>Zijlweg 118<br>2015 BJ Haarlem</p><a href="#">Route plannen</a></div>
      <div class="nfi__blk"><span class="nfi__lab">Openingstijden</span>
        <dl class="nfi__dl"><dt>Ma t/m do</dt><dd>08:30 tot 17:30</dd><dt>Vrijdag</dt><dd>08:30 tot 16:00</dd><dt>Zaterdag</dt><dd>Op afspraak</dd></dl></div>
      <div class="nfi__blk"><span class="nfi__lab">Direct contact</span><p><a href="tel:+31231234567">023 123 4567</a><br><a href="mailto:studio@voorbeeld.nl">studio@voorbeeld.nl</a></p></div>
    </div>
  </div>
</div>
</div>

/* Volledig menupaneel met index · NedDev · eigen werk. */
.nfi{position:relative;width:100%;align-self:flex-start;flex:none;height:520px;background:#e9e6e1;color:#1c1b19;font-family:'Switzer',sans-serif;overflow:hidden;box-sizing:border-box}
.nfi *{box-sizing:border-box}
.nfi__bar{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:20px 32px;transition:color .4s ease}
.nfi__logo{font-weight:700;font-size:20px;letter-spacing:-.02em;color:inherit;text-decoration:none;display:flex;align-items:baseline;gap:6px}
.nfi__logo i{font-family:Georgia,serif;font-weight:400;color:#b5432f}
.nfi__logo span{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:400;letter-spacing:.12em;text-transform:uppercase;opacity:.7}
.nfi__btn{display:flex;align-items:center;gap:12px;background:transparent;border:1px solid currentColor;color:inherit;font:600 14px 'Switzer',sans-serif;padding:10px 16px;border-radius:999px;cursor:pointer}
.nfi__btn:hover{background:#b5432f;border-color:#b5432f;color:#fff}
.nfi__ico{position:relative;width:18px;height:10px}
.nfi__ico i{position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .35s ease,top .35s ease}
.nfi__ico i:first-child{top:0}.nfi__ico i:last-child{top:8px}
.nfi.is-open .nfi__bar{color:#f1ede6}
.nfi.is-open .nfi__ico i:first-child{top:4px;transform:rotate(45deg)}
.nfi.is-open .nfi__ico i:last-child{top:4px;transform:rotate(-45deg)}
.nfi__page{height:100%;padding:96px 32px 32px;display:grid;grid-template-columns:1fr 1.1fr;grid-template-rows:auto 1fr;gap:12px 40px}
.nfi__meta{grid-column:1;display:flex;gap:18px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#6b665e}
.nfi__title{grid-column:1;align-self:end;font-size:clamp(40px,6vw,76px);font-weight:800;line-height:.95;letter-spacing:-.035em;margin:0}
.nfi__img{grid-column:2;grid-row:1/3;border-radius:2px;background:linear-gradient(180deg,#cfd8dc 0 55%,#d9cdb3 55% 100%);position:relative;overflow:hidden}
.nfi__img::before{content:'';position:absolute;left:12%;right:18%;bottom:45%;height:38%;background:repeating-linear-gradient(90deg,#3a3732 0 6px,#8a8174 6px 34px);clip-path:polygon(0 30%,40% 0,100% 30%,100% 100%,0 100%)}
.nfi__img::after{content:'';position:absolute;left:0;right:0;bottom:0;height:45%;background:repeating-linear-gradient(170deg,#d9cdb3 0 14px,#cdbf9f 14px 18px)}
.nfi__panel{position:absolute;inset:0;z-index:4;background:#1c1b19;color:#f1ede6;padding:96px 32px 32px;display:grid;grid-template-columns:1.4fr 1fr;gap:40px;overflow:auto;clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .6s cubic-bezier(.7,0,.2,1),visibility 0s linear .6s}
.nfi.is-open .nfi__panel{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .6s cubic-bezier(.7,0,.2,1)}
.nfi__list{list-style:none;margin:0;padding:0;align-self:center}
.nfi__list li{overflow:hidden;border-top:1px solid rgba(241,237,230,.14)}
.nfi__list li:last-child{border-bottom:1px solid rgba(241,237,230,.14)}
.nfi__list a{display:flex;align-items:baseline;gap:20px;padding:8px 0;color:#f1ede6;text-decoration:none;transform:translateY(100%);transition:transform .6s cubic-bezier(.2,.8,.2,1),color .25s ease;transition-delay:calc(.25s + var(--i)*.06s),0s}
.nfi.is-open .nfi__list a{transform:none}
.nfi__n{font-family:'JetBrains Mono',monospace;font-size:12px;color:#b5432f;width:24px}
.nfi__t{font-size:clamp(30px,4.4vw,54px);font-weight:700;letter-spacing:-.03em;line-height:1.05;transition:transform .35s ease}
.nfi__c{font-family:'JetBrains Mono',monospace;font-size:11px;opacity:.5;align-self:flex-start;margin-top:8px}
.nfi__list a:hover .nfi__t,.nfi__list a:focus-visible .nfi__t{transform:translateX(12px);color:#e0745f}
.nfi__info{align-self:end;display:flex;flex-direction:column;gap:22px;font-size:14px;line-height:1.55;opacity:0;transform:translateY(12px);transition:opacity .4s ease,transform .4s ease}
.nfi.is-open .nfi__info{opacity:1;transform:none;transition-delay:.5s}
.nfi__lab{display:block;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#e0745f;margin-bottom:6px}
.nfi__blk p{margin:0}
.nfi__blk a{color:#f1ede6}
.nfi__dl{display:grid;grid-template-columns:auto 1fr;gap:2px 16px;margin:0}
.nfi__dl dt{opacity:.6}.nfi__dl dd{margin:0}
@media(max-width:760px){
.nfi__bar{padding:14px 18px}
.nfi__logo span{display:none}
.nfi__page{padding:76px 18px 18px;grid-template-columns:1fr;grid-template-rows:auto auto 1fr}
.nfi__meta{flex-wrap:wrap;gap:4px 14px}
.nfi__img{grid-column:1;grid-row:3}
.nfi__panel{grid-template-columns:1fr;padding:76px 18px 24px;gap:26px}
.nfi__list{align-self:start}}
@media(prefers-reduced-motion:reduce){.nfi__panel,.nfi__list a,.nfi__info,.nfi__ico i,.nfi__t{transition:none !important}}

// Volledig menupaneel met index · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.nfi');if(!w)return;
var b=w.querySelector('.nfi__btn'),p=w.querySelector('.nfi__panel'),txt=w.querySelector('.nfi__btn-txt');
function set(o){w.classList.toggle('is-open',o);b.setAttribute('aria-expanded',o?'true':'false');p.setAttribute('aria-hidden',o?'false':'true');txt.textContent=o?'Sluiten':'Menu';
  if(o){setTimeout(function(){var a=p.querySelector('a');if(a)a.focus({preventScroll:true});},350);}}
b.addEventListener('click',function(){set(!w.classList.contains('is-open'));});
w.addEventListener('keydown',function(e){if(e.key==='Escape'&&w.classList.contains('is-open')){set(false);b.focus({preventScroll:true});}});
p.addEventListener('click',function(e){var a=e.target.closest('.nfi__list a');if(a)set(false);});
w.addEventListener('click',function(e){var a=e.target.closest('a[href="#"]');if(a)e.preventDefault();});
}
init(document.querySelector('.jouw-container'));