Zoeken dat uit het menu openklapt New

The search icon in the header pushes the menu links aside and becomes a search field across the whole header. Below it a panel drops down with popular topics that filters while you type, highlights the match and announces the number of results. Esc, the close button or a click on the page closes it, and focus returns to the icon. Unlike a Ctrl K search this stays inside the header itself: handy for a shop or service business with a short header.

How to use it

Paste the HTML where the navigation & menus should appear.
Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
Add the JavaScript and call init() with the element that contains the HTML.

<!-- 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'));

More navigation & menus

Seen something you like?

Add it to your selection and send it over. We build your site around it, in your brand.

Get in touch →