Mega-dropdown met preview Nieuw

<!-- Mega-dropdown met preview · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="mdp"><div class="mdp__bar"><span class="mdp__logo">Bouwgroep <b>Rijn</b></span><div class="mdp__menu"><button class="mdp__top is-open" type="button" aria-expanded="true">Diensten <svg viewBox="0 0 10 6" width="9" height="6" aria-hidden="true"><path d="M1 1l4 4 4-4" fill="none" stroke="currentColor" stroke-width="1.5"/></svg></button><span class="mdp__top mdp__hide">Projecten</span><span class="mdp__top mdp__hide">Over ons</span></div><span class="mdp__cta">Offerte</span></div>
<div class="mdp__drop"><ul class="mdp__list"><span class="mdp__mark" aria-hidden="true"></span>
<li><a href="#" class="mdp__it is-on" data-i="0"><span class="mdp__n">01</span><span><b>Dakkapel</b><small>Prefab, in één dag geplaatst</small></span></a></li>
<li><a href="#" class="mdp__it" data-i="1"><span class="mdp__n">02</span><span><b>Badkamer</b><small>Sloop tot tegelwerk</small></span></a></li>
<li><a href="#" class="mdp__it" data-i="2"><span class="mdp__n">03</span><span><b>Aanbouw</b><small>Inclusief vergunning</small></span></a></li>
<li><a href="#" class="mdp__it" data-i="3"><span class="mdp__n">04</span><span><b>Kozijnen</b><small>Kunststof en hout, HR++</small></span></a></li></ul>
<div class="mdp__pv"><div class="mdp__arts">
<div class="mdp__art mdp__art--0 is-on"><i></i><i></i><i></i></div><div class="mdp__art mdp__art--1"><i></i><i></i><i></i></div><div class="mdp__art mdp__art--2"><i></i><i></i><i></i></div><div class="mdp__art mdp__art--3"><i></i><i></i><i></i></div></div>
<div class="mdp__meta"><span class="mdp__price">vanaf € 7.950</span><span class="mdp__dur">1 dag op locatie</span></div></div></div></div>
</div>

/* Mega-dropdown met preview · NedDev · eigen werk. */
.mdp{position:absolute;inset:0;background:#f4f3f1;font-family:'Switzer',system-ui,sans-serif;color:#0a0a0a;container-type:size;display:flex;flex-direction:column}
.mdp__bar{display:flex;align-items:center;gap:12px;padding:8px 12px;background:#fff;border-bottom:1px solid #e6e3de}
.mdp__logo{font-weight:500;font-size:13px;letter-spacing:-.01em;white-space:nowrap}.mdp__logo b{font-weight:800}
.mdp__menu{display:flex;gap:2px;flex:1}
.mdp__top{appearance:none;border:0;background:none;font:500 12px 'Switzer',sans-serif;color:#57534e;padding:5px 8px;border-radius:4px;display:inline-flex;align-items:center;gap:5px;cursor:pointer;white-space:nowrap}
.mdp__top.is-open{color:#0a0a0a;background:#f4f3f1}.mdp__top svg{transition:transform .3s}.mdp__top.is-open svg{transform:rotate(180deg)}
.mdp__cta{font:600 11px 'Switzer',sans-serif;background:#F5480F;color:#fff;padding:6px 10px;border-radius:999px}
.mdp__drop{flex:1;margin:0 10px 10px;background:#fff;border:1px solid #e6e3de;border-top:0;border-radius:0 0 6px 6px;display:grid;grid-template-columns:1fr 1.05fr;gap:10px;padding:10px;min-height:0;transform-origin:top;transition:opacity .25s,transform .3s cubic-bezier(.2,.8,.2,1)}
.mdp__drop.is-closed{opacity:0;transform:translateY(-6px) scaleY(.96);pointer-events:none}
.mdp__list{list-style:none;margin:0;padding:0;position:relative;display:flex;flex-direction:column;justify-content:space-between}
.mdp__mark{position:absolute;left:0;top:0;width:2px;background:#F5480F;border-radius:2px;transition:transform .35s cubic-bezier(.2,.8,.2,1),height .35s}
.mdp__it{display:flex;gap:8px;align-items:flex-start;padding:5px 6px 5px 10px;text-decoration:none;color:#0a0a0a;border-radius:4px;transition:background .2s}
.mdp__it:hover,.mdp__it.is-on{background:#f4f3f1}.mdp__it:focus-visible{outline:2px solid #F5480F;outline-offset:-2px}
.mdp__n{font:500 9px 'JetBrains Mono',monospace;color:#9a958f;padding-top:3px}
.mdp__it b{display:block;font-size:13px;font-weight:700;letter-spacing:-.01em}
.mdp__it small{display:block;font-size:10.5px;color:#6b6762;margin-top:1px}
.mdp__pv{display:flex;flex-direction:column;gap:6px;min-height:0}
.mdp__arts{position:relative;flex:1;border-radius:4px;overflow:hidden;background:#e9e6e1;min-height:0}
.mdp__art{position:absolute;inset:0;clip-path:inset(0 0 0 100%);transition:clip-path .55s cubic-bezier(.7,0,.2,1)}
.mdp__art.is-on{clip-path:inset(0 0 0 0);z-index:1}
.mdp__art i{position:absolute;display:block}
.mdp__art--0{background:linear-gradient(#f3d9c8,#f4f3f1 70%)}
.mdp__art--0 i:nth-child(1){left:8%;right:8%;bottom:0;height:62%;background:#0a0a0a;clip-path:polygon(0 100%,0 45%,50% 0,100% 45%,100% 100%)}
.mdp__art--0 i:nth-child(2){left:52%;width:24%;bottom:42%;height:16%;background:#F5480F}
.mdp__art--0 i:nth-child(3){left:56%;width:16%;bottom:45%;height:9%;background:#fff;opacity:.85}
.mdp__art--1{background:#f4f3f1 repeating-linear-gradient(0deg,transparent 0 13px,#d9d4cd 13px 14px),#f4f3f1}
.mdp__art--1{background-image:repeating-linear-gradient(0deg,transparent 0 13px,#d9d4cd 13px 14px),repeating-linear-gradient(90deg,transparent 0 13px,#d9d4cd 13px 14px)}
.mdp__art--1 i:nth-child(1){left:12%;width:30%;top:18%;bottom:0;background:rgba(245,72,15,.14);border:2px solid #F5480F;border-bottom:0}
.mdp__art--1 i:nth-child(2){left:55%;width:34%;bottom:0;height:30%;background:#0a0a0a}
.mdp__art--1 i:nth-child(3){left:62%;width:20%;bottom:30%;height:22%;background:#fff;border:2px solid #0a0a0a;border-radius:2px}
.mdp__art--2{background:linear-gradient(#dfe3e0,#f4f3f1)}
.mdp__art--2 i:nth-child(1){left:8%;width:46%;bottom:0;height:70%;background:#0a0a0a}
.mdp__art--2 i:nth-child(2){left:54%;width:36%;bottom:0;height:42%;background:#F5480F}
.mdp__art--2 i:nth-child(3){left:60%;width:24%;bottom:0;height:30%;background:repeating-linear-gradient(90deg,#fff 0 2px,transparent 2px 25%);opacity:.9}
.mdp__art--3{background:#0a0a0a}
.mdp__art--3 i:nth-child(1){left:14%;top:14%;width:32%;bottom:14%;border:5px solid #F5480F;background:linear-gradient(135deg,#3a3633,#1a1816)}
.mdp__art--3 i:nth-child(2){left:54%;top:14%;width:32%;bottom:14%;border:5px solid #F5480F;background:linear-gradient(135deg,#3a3633,#1a1816)}
.mdp__art--3 i:nth-child(3){left:14%;right:14%;top:calc(50% - 2px);height:4px;background:#F5480F}
.mdp__meta{display:flex;justify-content:space-between;gap:6px;font:500 10px 'JetBrains Mono',monospace;color:#57534e;font-variant-numeric:tabular-nums}
.mdp__price{color:#0a0a0a;font-weight:700}
@container (max-width:380px){.mdp__hide{display:none}.mdp__it small{display:none}.mdp__drop{grid-template-columns:1fr 1fr}.mdp__meta{flex-direction:column;gap:1px}}
@container (max-height:230px){.mdp__it small{display:none}}
@media (prefers-reduced-motion:reduce){.mdp__art,.mdp__mark,.mdp__drop{transition:none}}

// Mega-dropdown met preview · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.mdp')||root;
var its=[].slice.call(root.querySelectorAll('.mdp__it')),arts=[].slice.call(root.querySelectorAll('.mdp__art')),mark=root.querySelector('.mdp__mark');
var pr=root.querySelector('.mdp__price'),du=root.querySelector('.mdp__dur'),top=root.querySelector('.mdp__top'),drop=root.querySelector('.mdp__drop');
var data=[['vanaf € 7.950','1 dag op locatie'],['vanaf € 11.500','10 werkdagen'],['vanaf € 39.000','8 tot 12 weken'],['vanaf € 1.150 p/st','2 dagen per gevel']];
var cur=-1,auto=!matchMedia('(prefers-reduced-motion: reduce)').matches,timer=0;
function sel(i){if(i===cur)return;cur=i;its.forEach(function(a,j){a.classList.toggle('is-on',j===i);});
arts.forEach(function(a,j){a.classList.toggle('is-on',j===i);});var a=its[i];mark.style.transform='translateY('+a.offsetTop+'px)';mark.style.height=a.offsetHeight+'px';pr.textContent=data[i][0];du.textContent=data[i][1];}
its.forEach(function(a,i){a.addEventListener('mouseenter',function(){auto=false;sel(i);});a.addEventListener('focus',function(){auto=false;sel(i);});a.addEventListener('click',function(e){e.preventDefault();auto=false;sel(i);});});
top.addEventListener('click',function(){auto=false;var o=top.classList.toggle('is-open');top.setAttribute('aria-expanded',o?'true':'false');drop.classList.toggle('is-closed',!o);});
sel(0);(function loop(){timer=setTimeout(function(){if(!auto)return;sel((cur+1)%its.length);loop();},2200);})();
window.addEventListener('resize',function(){var c=cur;cur=-1;sel(c);});
}
init(document.querySelector('.jouw-container'));