Categoriepanelen die openschuiven New

Horizontal categories for a shop or service provider: the panel under the pointer or with focus widens and shows photo, name and offer. Keyboard: Tab or left/right arrows, Home and End. On touch the first tap opens the panel, the second follows the link. Transition on flex-grow; no animation with reduced motion. Without JS it stays a plain link list.

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.

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

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 →