Zoeken dat uit het menu openklapt Nieuw

<!-- Zoeken dat uit het menu openklapt · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="zvm">
<header class="zvm__head">
<a class="zvm__logo" href="#zvm">Kozijnenhuis Delft</a>
<nav class="zvm__nav" aria-label="Hoofdmenu"><a href="#zvm-k">Kozijnen</a><a href="#zvm-d">Deuren</a><a href="#zvm-s">Showroom</a></nav>
<form class="zvm__form" role="search" action="#zvm"><label class="zvm__vh" for="zvm-q">Zoek op de site</label><svg class="zvm__ic" viewBox="0 0 16 16" aria-hidden="true"><circle cx="7" cy="7" r="4.5"/><path d="M10.5 10.5L14 14"/></svg><input class="zvm__in" id="zvm-q" type="search" autocomplete="off" placeholder="Zoek kozijnen, deuren, onderhoud" aria-controls="zvm-panel" tabindex="-1"></form>
<button class="zvm__btn" type="button" aria-expanded="false" aria-controls="zvm-panel" aria-label="Zoeken openen"><svg class="zvm__o" viewBox="0 0 16 16" aria-hidden="true"><circle cx="7" cy="7" r="4.5"/><path d="M10.5 10.5L14 14"/></svg><svg class="zvm__x" viewBox="0 0 16 16" aria-hidden="true"><path d="M4 4l8 8M12 4l-8 8"/></svg></button>
</header>
<div class="zvm__panel" id="zvm-panel" hidden>
<p class="zvm__ph">Veel gezocht</p>
<ul class="zvm__res"></ul>
<p class="zvm__none" hidden></p>
<p class="zvm__vh zvm__live" aria-live="polite"></p>
</div>
<div class="zvm__page">
<h3 class="zvm__h">Kunststof kozijnen op maat, in een dag geplaatst</h3>
<p class="zvm__p">Gratis inmeten in Delft, Den Haag en Rijswijk. Vanaf &euro; 495 per kozijn inclusief HR++ glas.</p>
</div>
<div class="zvm__dim" aria-hidden="true"></div>
</div>
</div>

/* Zoeken dat uit het menu openklapt · NedDev · eigen werk. */
.zvm{position:absolute;inset:0;background:#f4f3f1;color:#0a0a0a;font-family:'Switzer',sans-serif;text-align:left;overflow:hidden;container-type:inline-size}
.zvm *,.zvm *::before,.zvm *::after{box-sizing:border-box}
.zvm__vh{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.zvm__head{position:relative;z-index:3;display:flex;align-items:center;gap:12px;height:54px;padding:0 10px 0 16px;background:#fff;border-bottom:1px solid rgba(10,10,10,.1)}
.zvm__logo{font:700 15px/1 'Switzer',sans-serif;color:#0a0a0a;text-decoration:none;white-space:nowrap;padding:5px 0;transition:opacity .2s}
.zvm__nav{display:flex;gap:2px;margin-left:auto;transition:opacity .18s,transform .22s}
.zvm__nav a{padding:6px 8px;border-radius:4px;color:#3a3733;text-decoration:none;font:500 13px/1.1 'Switzer',sans-serif}
.zvm__nav a:hover{background:#f4f3f1;color:#0a0a0a}
.zvm a:focus-visible,.zvm__btn:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
.zvm__form{position:absolute;left:12px;right:56px;top:9px;height:36px;margin:0;display:flex;align-items:center;clip-path:inset(0 0 0 100% round 4px);opacity:0;visibility:hidden;transition:clip-path .3s cubic-bezier(.3,.7,.2,1),opacity .15s,visibility 0s .3s}
.zvm__ic{position:absolute;left:10px;width:16px;height:16px;fill:none;stroke:#57534e;stroke-width:1.6;stroke-linecap:round}
.zvm__in{width:100%;height:100%;padding:0 10px 0 34px;border:1px solid #0a0a0a;border-radius:4px;background:#fff;color:#0a0a0a;font:400 14px/1 'Switzer',sans-serif;outline:none;-webkit-appearance:none}
.zvm__in:focus-visible{box-shadow:0 0 0 2px #fde3d9}
.zvm__btn{flex:none;display:grid;place-items:center;width:36px;height:36px;margin:0;padding:0;border:0;border-radius:4px;background:#0a0a0a;color:#fff;cursor:pointer}
.zvm__btn svg{grid-area:1/1;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;transition:opacity .15s,transform .2s}
.zvm__x{opacity:0;transform:rotate(-45deg)}
.zvm.is-open .zvm__o{opacity:0;transform:rotate(45deg)}
.zvm.is-open .zvm__x{opacity:1;transform:none}
.zvm.is-open .zvm__btn{background:#F5480F;color:#0a0a0a}
.zvm.is-open .zvm__nav{opacity:0;transform:translateX(-12px);pointer-events:none;visibility:hidden}
.zvm.is-open .zvm__logo{opacity:0;visibility:hidden}
.zvm.is-open .zvm__form{clip-path:inset(0 0 0 0 round 4px);opacity:1;visibility:visible;transition:clip-path .3s cubic-bezier(.3,.7,.2,1),opacity .1s,visibility 0s}
.zvm__panel{position:absolute;z-index:2;left:0;right:0;top:54px;max-height:calc(100% - 54px);overflow:auto;padding:10px 16px 12px;background:#fff;border-bottom:1px solid rgba(10,10,10,.12);box-shadow:0 16px 28px -18px rgba(10,10,10,.5);animation:zvmIn .22s ease-out}
.zvm__panel[hidden]{display:none}
@keyframes zvmIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.zvm__ph{margin:0 0 4px;font:600 13px/1.2 'Switzer',sans-serif;color:#57534e}
.zvm__res{list-style:none;margin:0;padding:0}
.zvm__res a{display:flex;justify-content:space-between;gap:10px;min-height:30px;align-items:center;padding:4px 6px;margin:0 -6px;border-radius:4px;color:#0a0a0a;text-decoration:none;font:400 14px/1.2 'Switzer',sans-serif}
.zvm__res a:hover,.zvm__res a:focus{background:#f4f3f1;outline:none}
.zvm__res a:focus-visible{box-shadow:inset 0 0 0 2px #F5480F}
.zvm__res small{flex:none;font:400 12px/1 'Switzer',sans-serif;color:#57534e}
.zvm__res mark{background:#fde3d9;color:inherit;border-radius:2px}
.zvm__none{margin:4px 0 0;font:400 14px/1.4 'Switzer',sans-serif}
.zvm__page{padding:18px 16px}
.zvm__h{margin:0 0 6px;font:600 20px/1.15 'Switzer',sans-serif;letter-spacing:-.02em;max-width:18em;text-wrap:balance}
.zvm__p{margin:0;font:400 14px/1.45 'Switzer',sans-serif;color:#3a3733;max-width:34em}
.zvm__dim{position:absolute;inset:54px 0 0;z-index:1;background:rgba(10,10,10,.28);opacity:0;visibility:hidden;transition:opacity .2s,visibility 0s .2s}
.zvm.is-open .zvm__dim{opacity:1;visibility:visible;transition:opacity .2s}
@container (max-width:400px){.zvm__nav{display:none}.zvm__btn{margin-left:auto}.zvm__h{font-size:18px}}
@media (prefers-reduced-motion:reduce){.zvm__form,.zvm.is-open .zvm__form,.zvm__nav,.zvm__btn svg,.zvm__dim,.zvm__logo{transition:none}.zvm__panel{animation:none}}

// Zoeken dat uit het menu openklapt · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.zvm');if(!w)return;
var btn=w.querySelector('.zvm__btn'),inp=w.querySelector('.zvm__in'),panel=w.querySelector('.zvm__panel'),res=w.querySelector('.zvm__res'),none=w.querySelector('.zvm__none'),live=w.querySelector('.zvm__live'),ph=w.querySelector('.zvm__ph');
var DATA=[['Kunststof kozijnen','Product'],['Houten kozijnen','Product'],['Aluminium schuifpui','Product'],['Voordeur met zijlicht','Product'],['Onderhoud en afstellen','Service'],['HR++ en triple glas','Advies'],['Subsidie isolatieglas 2026','Advies'],['Showroom Delft, openingstijden','Contact']];
var POP=[0,4,6,7];
function esc(s){return s.replace(/[&<>"]/g,function(c){return {'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c];});}
function draw(){var q=inp.value.trim().toLowerCase(),hits;
if(!q){hits=POP.map(function(i){return DATA[i];});ph.textContent='Veel gezocht';}
else{hits=DATA.filter(function(d){return d[0].toLowerCase().indexOf(q)>-1;});ph.textContent=hits.length===1?'1 resultaat':hits.length+' resultaten';}
res.innerHTML=hits.map(function(d){var t=esc(d[0]);if(q){var i=d[0].toLowerCase().indexOf(q);t=esc(d[0].slice(0,i))+'<mark>'+esc(d[0].slice(i,i+q.length))+'</mark>'+esc(d[0].slice(i+q.length));}return '<li><a href="#zvm-r"><span>'+t+'</span><small>'+d[1]+'</small></a></li>';}).join('');
none.hidden=hits.length>0;if(!hits.length)none.textContent='Niets gevonden voor "'+inp.value.trim()+'". Bel 015 123 4567, dan zoeken we het voor je uit.';
live.textContent=q?(hits.length?ph.textContent:'Geen resultaten'):'';}
function open(){w.classList.add('is-open');btn.setAttribute('aria-expanded','true');btn.setAttribute('aria-label','Zoeken sluiten');panel.hidden=false;inp.tabIndex=0;draw();setTimeout(function(){inp.focus();},matchMedia('(prefers-reduced-motion: reduce)').matches?0:60);}
function close(back){if(!w.classList.contains('is-open'))return;w.classList.remove('is-open');btn.setAttribute('aria-expanded','false');btn.setAttribute('aria-label','Zoeken openen');panel.hidden=true;inp.tabIndex=-1;if(back)btn.focus();}
btn.addEventListener('click',function(){if(w.classList.contains('is-open'))close(true);else open();});
inp.addEventListener('input',draw);
w.querySelector('.zvm__form').addEventListener('submit',function(e){e.preventDefault();var a=res.querySelector('a');if(a)a.focus();});
w.addEventListener('keydown',function(e){if(e.key==='Escape'&&w.classList.contains('is-open')){e.preventDefault();close(true);return;}
if(!w.classList.contains('is-open'))return;var links=[].slice.call(res.querySelectorAll('a')),i=links.indexOf(document.activeElement);
if(e.key==='ArrowDown'){e.preventDefault();(links[i+1]||links[0]||inp).focus();}else if(e.key==='ArrowUp'){e.preventDefault();if(i<=0)inp.focus();else links[i-1].focus();}});
res.addEventListener('click',function(e){var a=e.target.closest('a');if(!a)return;e.preventDefault();var t=a.querySelector('span').textContent;close(true);w.querySelector('.zvm__h').textContent=t;});
w.querySelector('.zvm__dim').addEventListener('click',function(){close(false);});
}
init(document.querySelector('.jouw-container'));