Categoriepanelen die openschuiven Nieuw

<!-- Categoriepanelen die openschuiven · NedDev · eigen werk. -->
<div class="jouw-container">
<nav class="cpn" aria-label="Woonwinkel Hofstede, categorieën">
<ul class="cpn__list">
<li class="cpn__it is-on"><a class="cpn__a" href="#categorie-panelen"><img class="cpn__img" src="https://neddev.com/lab-media/categorie-panelen-1.webp" alt="" loading="lazy"><span class="cpn__v" aria-hidden="true">Banken</span><span class="cpn__txt"><span class="cpn__n">Banken</span><span class="cpn__m">84 modellen, vanaf € 649</span></span></a></li>
<li class="cpn__it"><a class="cpn__a" href="#categorie-panelen"><img class="cpn__img" src="https://neddev.com/lab-media/categorie-panelen-2.webp" alt="" loading="lazy"><span class="cpn__v" aria-hidden="true">Tafels</span><span class="cpn__txt"><span class="cpn__n">Tafels</span><span class="cpn__m">56 modellen, vanaf € 395</span></span></a></li>
<li class="cpn__it"><a class="cpn__a" href="#categorie-panelen"><img class="cpn__img" src="https://neddev.com/lab-media/categorie-panelen-3.webp" alt="" loading="lazy"><span class="cpn__v" aria-hidden="true">Kasten</span><span class="cpn__txt"><span class="cpn__n">Kasten</span><span class="cpn__m">41 modellen, vanaf € 289</span></span></a></li>
<li class="cpn__it"><a class="cpn__a" href="#categorie-panelen"><img class="cpn__img" src="https://neddev.com/lab-media/categorie-panelen-4.webp" alt="" loading="lazy"><span class="cpn__v" aria-hidden="true">Lampen</span><span class="cpn__txt"><span class="cpn__n">Lampen</span><span class="cpn__m">120 modellen, vanaf € 49</span></span></a></li>
<li class="cpn__it"><a class="cpn__a" href="#categorie-panelen"><img class="cpn__img" src="https://neddev.com/lab-media/categorie-panelen-5.webp" alt="" loading="lazy"><span class="cpn__v" aria-hidden="true">Tuin</span><span class="cpn__txt"><span class="cpn__n">Tuin</span><span class="cpn__m">38 sets, vanaf € 179</span></span></a></li>
</ul>
</nav>
</div>

/* Categoriepanelen die openschuiven · NedDev · eigen werk. */
.cpn{position:absolute;inset:0;font-family:'Switzer',sans-serif;container-type:size;text-align:left}
.cpn__list{position:absolute;inset:0;display:flex;gap:4px;margin:0;padding:8px;list-style:none;background:#fff}
.cpn__it{flex:1 1 0;min-width:0;transition:flex-grow .45s cubic-bezier(.3,.7,.2,1)}
.cpn__it.is-on{flex-grow:4}
.cpn__a{position:relative;display:block;height:100%;overflow:hidden;border-radius:4px;background:#0a0a0a;color:#fff;text-decoration:none;outline:none}
.cpn__a:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
.cpn__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.42;transition:opacity .3s}
.cpn__a::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,10,10,.78),rgba(10,10,10,0) 60%);pointer-events:none}
.cpn__it.is-on .cpn__img{opacity:1}
.cpn__a:hover .cpn__img{opacity:.7}
.cpn__it.is-on .cpn__a:hover .cpn__img{opacity:1}
.cpn__v{position:absolute;left:50%;bottom:12px;z-index:1;writing-mode:vertical-rl;transform:translateX(-50%) rotate(180deg);font:600 13px/1 'Switzer',sans-serif;white-space:nowrap;transition:opacity .2s}
.cpn__it.is-on .cpn__v{opacity:0}
.cpn__txt{position:absolute;left:14px;right:14px;bottom:12px;z-index:1;display:flex;flex-direction:column;gap:3px;opacity:0;transform:translateY(6px);transition:opacity .2s,transform .2s;white-space:nowrap}
.cpn__it.is-on .cpn__txt{opacity:1;transform:none;transition-delay:.18s}
.cpn__n{font:700 clamp(17px,5.6cqi,28px)/1.05 'Switzer',sans-serif;letter-spacing:-.02em}
.cpn__m{font:400 12px/1.3 'Switzer',sans-serif;color:#e6e3de}
@media (prefers-reduced-motion:reduce){.cpn__it,.cpn__img,.cpn__v,.cpn__txt{transition:none!important}.cpn__txt{transform:none}}

// Categoriepanelen die openschuiven · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.cpn');if(!w)return;
var its=[].slice.call(w.querySelectorAll('.cpn__it')),links=its.map(function(li){return li.querySelector('a');}),lastPt='mouse';
function act(li){its.forEach(function(x){x.classList.toggle('is-on',x===li);});}
its.forEach(function(li,k){var a=links[k];
li.addEventListener('pointerenter',function(e){if(e.pointerType==='mouse')act(li);});
a.addEventListener('pointerdown',function(e){lastPt=e.pointerType;});
a.addEventListener('focus',function(){act(li);});
a.addEventListener('click',function(e){e.preventDefault();if(lastPt!=='mouse'&&!li.classList.contains('is-on')){act(li);}lastPt='mouse';});
a.addEventListener('keydown',function(e){var j=null;if(e.key==='ArrowRight')j=(k+1)%its.length;else if(e.key==='ArrowLeft')j=(k-1+its.length)%its.length;else if(e.key==='Home')j=0;else if(e.key==='End')j=its.length-1;if(j!==null){e.preventDefault();links[j].focus();}});});
}
init(document.querySelector('.jouw-container'));