Hover Pill Nav Nieuw

<!-- Hover Pill Nav · Bron: Motion Primitives · licentie MIT. Laat deze vermelding staan bij hergebruik. -->
<div class="jouw-container">
<div class="hpn"><div class="hpn__bar" data-mode="hover" role="navigation" aria-label="Hoofdmenu"><span class="hpn__pill"></span><a href="#" class="hpn__a">Diensten</a><a href="#" class="hpn__a is-active">Werk</a><a href="#" class="hpn__a">Tarieven</a><a href="#" class="hpn__a">Contact</a></div>
<div class="hpn__bar hpn__bar--tabs" data-mode="click" role="tablist"><span class="hpn__pill"></span><button class="hpn__a is-active" role="tab">Particulier</button><button class="hpn__a" role="tab">Zakelijk</button><button class="hpn__a" role="tab">Vereniging</button></div>
<span class="hpn__cap">boven: hover · onder: klik</span></div>
</div>

/* Hover Pill Nav · Bron: Motion Primitives · licentie MIT. Laat deze vermelding staan bij hergebruik. */
.hpn{position:absolute;inset:0;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;font-family:'Switzer',system-ui,sans-serif}
.hpn__bar{position:relative;display:flex;padding:4px;border-radius:999px;background:#f4f3f1;box-shadow:inset 0 0 0 1px rgba(10,10,10,.08)}
.hpn__a{position:relative;z-index:1;padding:8px 13px;font:600 12.5px 'Switzer',system-ui,sans-serif;color:#0a0a0a;text-decoration:none;border:0;background:none;cursor:pointer;border-radius:999px;transition:color .25s;white-space:nowrap}
.hpn__a.is-on{color:#fff}
.hpn__pill{position:absolute;top:4px;bottom:4px;left:0;width:0;border-radius:999px;background:#0a0a0a;transition:transform .38s cubic-bezier(.3,1.25,.5,1),width .38s cubic-bezier(.3,1.25,.5,1)}
.hpn__bar--tabs .hpn__pill{background:#F5480F}
.hpn__cap{font:500 10px 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:rgba(10,10,10,.45)}
@media(prefers-reduced-motion:reduce){.hpn__pill{transition:none}}

// Hover Pill Nav · Bron: Motion Primitives · licentie MIT. Laat deze vermelding staan bij hergebruik.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.hpn')||root;root.querySelectorAll('.hpn__bar').forEach(function(bar){var pill=bar.querySelector('.hpn__pill'),links=[].slice.call(bar.querySelectorAll('.hpn__a'));var hoverMode=bar.dataset.mode==='hover';
function act(){return bar.querySelector('.hpn__a.is-active');}
function to(el){pill.style.width=el.offsetWidth+'px';pill.style.transform='translateX('+el.offsetLeft+'px)';links.forEach(function(l){l.classList.toggle('is-on',l===el);});}
links.forEach(function(l){if(hoverMode){l.addEventListener('mouseenter',function(){to(l);});l.addEventListener('focus',function(){to(l);});l.addEventListener('click',function(e){e.preventDefault();links.forEach(function(x){x.classList.remove('is-active');});l.classList.add('is-active');to(l);});}
else l.addEventListener('click',function(){links.forEach(function(x){x.classList.remove('is-active');x.setAttribute('aria-selected','false');});l.classList.add('is-active');l.setAttribute('aria-selected','true');to(l);});});
if(hoverMode)bar.addEventListener('mouseleave',function(){to(act());});
var t=pill.style.transition;pill.style.transition='none';to(act());void pill.offsetWidth;pill.style.transition=t;
if(document.fonts&&document.fonts.ready)document.fonts.ready.then(function(){to(act());});addEventListener('resize',function(){to(act());});});
}
init(document.querySelector('.jouw-container'));