Markering schuift mee door een lijst New
In a list of vacancies, services or downloads a single highlight block with an orange bar glides to the row you point at or tab to, instead of each row lighting up on its own. Leave the list and the block fades. Positioned with offsetTop and transform, so no layout work per frame; without JavaScript each row gets its own background. With reduced motion the block jumps straight there.
How to use it
- Paste the HTML where the components 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.
<!-- Markering schuift mee door een lijst · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="hlm">
<div class="hlm__list">
<span class="hlm__mark" aria-hidden="true"></span>
<a class="hlm__row" href="#hv-lijst-markering"><span class="hlm__t">Servicemonteur cv en warmtepomp</span><span class="hlm__m">Apeldoorn · 40 uur</span></a>
<a class="hlm__row" href="#hv-lijst-markering"><span class="hlm__t">Werkvoorbereider installatietechniek</span><span class="hlm__m">Apeldoorn · 32 tot 40 uur</span></a>
<a class="hlm__row" href="#hv-lijst-markering"><span class="hlm__t">Leerling-monteur, bbl niveau 2</span><span class="hlm__m">Deventer · 4 dagen</span></a>
<a class="hlm__row" href="#hv-lijst-markering"><span class="hlm__t">Planner buitendienst</span><span class="hlm__m">Apeldoorn · 24 uur</span></a>
</div>
</div>
</div>/* Markering schuift mee door een lijst · NedDev · eigen werk. */
.hlm{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:14px 18px;background:#fff;font-family:'Switzer',sans-serif;color:#0a0a0a;container-type:size}
.hlm *,.hlm *::before,.hlm *::after{box-sizing:border-box}
.hlm__list{position:relative;width:100%;max-width:420px;display:flex;flex-direction:column;border-top:1px solid #ebe9e5}
.hlm__mark{position:absolute;left:0;right:0;top:0;height:var(--hlm-h,0px);transform:translateY(var(--hlm-y,0px));background:#f4f3f1;border-left:3px solid #F5480F;border-radius:0 4px 4px 0;opacity:0;pointer-events:none;transition:transform .28s cubic-bezier(.2,.7,.3,1),height .28s cubic-bezier(.2,.7,.3,1),opacity .2s ease}
.hlm__mark.is-on{opacity:1}
.hlm.is-fresh .hlm__mark{transition:opacity .2s ease}
.hlm__row{position:relative;display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:10px 12px 10px 14px;border-bottom:1px solid #ebe9e5;color:inherit;text-decoration:none;outline:none}
.hlm__row:focus-visible{outline:2px solid #F5480F;outline-offset:-2px;border-radius:4px}
.hlm:not(.is-js) .hlm__row:hover{background:#f4f3f1}
.hlm__t{font:500 14px/1.3 'Switzer',sans-serif;min-width:0}
.hlm__m{flex:none;font:400 12px/1.3 'Switzer',sans-serif;color:#6a665f}
@container (max-height:230px){.hlm{padding:8px 14px}.hlm__row{padding:7px 10px 7px 12px}.hlm__t{font-size:13px}}
@container (max-width:380px){.hlm__row{flex-direction:column;gap:1px}}
@media (prefers-reduced-motion:reduce){.hlm__mark{transition:opacity .15s}}// Markering schuift mee door een lijst · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.hlm');if(!w)return;
var list=w.querySelector('.hlm__list'),mark=w.querySelector('.hlm__mark');w.classList.add('is-js');
function go(row){var fresh=!mark.classList.contains('is-on');w.classList.toggle('is-fresh',fresh);mark.style.setProperty('--hlm-y',row.offsetTop+'px');mark.style.setProperty('--hlm-h',row.offsetHeight+'px');if(fresh){void mark.offsetWidth;w.classList.remove('is-fresh');}mark.classList.add('is-on');}
[].forEach.call(list.querySelectorAll('.hlm__row'),function(r){r.addEventListener('pointerenter',function(){go(r);});r.addEventListener('focus',function(){go(r);});});
list.addEventListener('pointerleave',function(){if(!list.contains(document.activeElement))mark.classList.remove('is-on');});
list.addEventListener('focusout',function(e){if(!list.contains(e.relatedTarget))mark.classList.remove('is-on');});
}
init(document.querySelector('.jouw-container'));More components
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 →