Werkbalk die uitklapt bij selectie New

Tick one or more requests and a black toolbar unfolds at the bottom with the count and the actions Assign, Schedule and Archive. It is a real ARIA toolbar: one Tab stop, then arrows, Home and End inside. A checkbox at the top selects all (with a mixed state when you picked some). Archive really removes the rows, with an empty state and a button to bring them back. For inboxes, order lists and lead overviews in a portal or CRM.

Nieuwe aanvragen4

Familie Bakker, Amersfoortcv-ketel vervangen
R. Hendriks, Leusdenstoring warmtepomp
Kinderopvang Het Kasteel, Soestonderhoudscontract
M. el Idrissi, Nijkerkofferte airco

Vink aanvragen aan om ze te verwerken.

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.

<!-- Werkbalk die uitklapt bij selectie · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="wbs">
<div class="wbs__head"><label class="wbs__all"><input class="wbs__cb wbs__cb--all" type="checkbox"><span>Nieuwe aanvragen</span></label><span class="wbs__cnt">4</span></div>
<ul class="wbs__list">
<li class="wbs__it"><label class="wbs__lbl"><input class="wbs__cb" type="checkbox"><span class="wbs__nm">Familie Bakker, Amersfoort</span><span class="wbs__wat">cv-ketel vervangen</span></label></li>
<li class="wbs__it"><label class="wbs__lbl"><input class="wbs__cb" type="checkbox"><span class="wbs__nm">R. Hendriks, Leusden</span><span class="wbs__wat">storing warmtepomp</span></label></li>
<li class="wbs__it"><label class="wbs__lbl"><input class="wbs__cb" type="checkbox"><span class="wbs__nm">Kinderopvang Het Kasteel, Soest</span><span class="wbs__wat">onderhoudscontract</span></label></li>
<li class="wbs__it"><label class="wbs__lbl"><input class="wbs__cb" type="checkbox"><span class="wbs__nm">M. el Idrissi, Nijkerk</span><span class="wbs__wat">offerte airco</span></label></li>
</ul>
<div class="wbs__empty" hidden><p>Alles verwerkt. Nieuwe aanvragen komen hier binnen.</p><button class="wbs__undo" type="button">Zet terug</button></div>
<div class="wbs__foot">
<p class="wbs__idle">Vink aanvragen aan om ze te verwerken.</p>
<div class="wbs__bar" role="toolbar" aria-label="Acties voor geselecteerde aanvragen" aria-hidden="true">
<span class="wbs__n" aria-live="polite"></span>
<button class="wbs__b" type="button" tabindex="-1" data-a="toe">Toewijzen</button>
<button class="wbs__b" type="button" tabindex="-1" data-a="plan">Inplannen</button>
<button class="wbs__b" type="button" tabindex="-1" data-a="arch">Archiveren</button>
<button class="wbs__b wbs__x" type="button" tabindex="-1" data-a="clear" aria-label="Selectie wissen"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M4 4l8 8M12 4l-8 8"/></svg></button>
</div>
</div>
<p class="wbs__st" aria-live="polite"></p>
</div>
</div>

/* Werkbalk die uitklapt bij selectie · NedDev · eigen werk. */
.wbs{position:absolute;inset:0;display:flex;flex-direction:column;padding:10px 12px 10px;background:#f4f3f1;color:#0a0a0a;font-family:'Switzer',sans-serif;text-align:left;overflow:hidden}
.wbs *,.wbs *::before,.wbs *::after{box-sizing:border-box}
.wbs__head{display:flex;align-items:center;justify-content:space-between;padding:0 4px 6px}
.wbs__all{display:flex;align-items:center;gap:8px;font:600 14px/1.2 'Switzer',sans-serif;cursor:pointer;min-height:24px}
.wbs__cnt{font:500 13px/1 'Switzer',sans-serif;color:#57534e}
.wbs__cb{flex:none;-webkit-appearance:none;appearance:none;width:24px;height:24px;margin:0;border:2px solid #57534e;border-radius:4px;background:#fff center/14px no-repeat;cursor:pointer;transition:background-color .15s,border-color .15s}
.wbs__cb:hover{border-color:#0a0a0a}
.wbs__cb:checked{border-color:#F5480F;background-color:#F5480F;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='%230a0a0a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.wbs__cb:indeterminate{border-color:#0a0a0a;background-color:#0a0a0a;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8h8' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E")}
.wbs__cb:disabled{opacity:.4;cursor:default}
.wbs__cb:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
.wbs__list{list-style:none;margin:0;padding:0;flex:1;min-height:0;overflow:auto;background:#fff;border:1px solid rgba(10,10,10,.12);border-radius:8px}
.wbs__it+.wbs__it{border-top:1px solid rgba(10,10,10,.08)}
.wbs__it{transition:opacity .25s,transform .25s}
.wbs__it.is-out{opacity:0;transform:translateX(16px)}
.wbs__lbl{display:flex;align-items:center;gap:10px;min-height:34px;padding:4px 10px;cursor:pointer;font:400 14px/1.2 'Switzer',sans-serif}
.wbs__it.is-on .wbs__lbl{background:#fdeee8}
.wbs__nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wbs__wat{color:#57534e;font-size:13px;white-space:nowrap}
.wbs__empty{flex:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:8px;padding:12px;background:#fff;border:1px solid rgba(10,10,10,.12);border-radius:8px}
.wbs__empty[hidden]{display:none}
.wbs__empty p{margin:0;font:400 14px/1.4 'Switzer',sans-serif}
.wbs__undo{min-height:30px;padding:6px 12px;border:1px solid #0a0a0a;border-radius:4px;background:#fff;color:#0a0a0a;font:500 13px/1 'Switzer',sans-serif;cursor:pointer}
.wbs__undo:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
.wbs__foot{position:relative;height:42px;margin-top:8px;flex:none}
.wbs__idle{position:absolute;inset:0;margin:0;display:flex;align-items:center;padding:0 4px;font:400 13px/1.3 'Switzer',sans-serif;color:#57534e;transition:opacity .2s}
.wbs.has-sel .wbs__idle{opacity:0}
.wbs__bar{position:absolute;inset:0;display:flex;align-items:center;gap:4px;padding:0 6px 0 12px;background:#0a0a0a;color:#fff;border-radius:8px;clip-path:inset(0 calc(100% - 42px) 0 0 round 8px);opacity:0;visibility:hidden;transition:clip-path .32s cubic-bezier(.2,.7,.2,1),opacity .2s,visibility 0s .32s}
.wbs.has-sel .wbs__bar{clip-path:inset(0 0 0 0 round 8px);opacity:1;visibility:visible;transition:clip-path .32s cubic-bezier(.2,.7,.2,1),opacity .12s,visibility 0s}
.wbs__n{margin-right:auto;font:600 14px/1 'Switzer',sans-serif;white-space:nowrap}
.wbs__b{min-height:30px;padding:6px 9px;border:0;border-radius:4px;background:none;color:#fff;font:500 13px/1 'Switzer',sans-serif;cursor:pointer;opacity:0;transform:translateX(-6px);transition:opacity .2s,transform .2s,background-color .15s}
.wbs.has-sel .wbs__b{opacity:1;transform:none}
.wbs.has-sel .wbs__b:nth-of-type(2){transition-delay:.04s}.wbs.has-sel .wbs__b:nth-of-type(3){transition-delay:.08s}.wbs.has-sel .wbs__b:nth-of-type(4){transition-delay:.12s}
.wbs__b:hover{background:rgba(255,255,255,.12)}
.wbs__b:focus-visible{outline:2px solid #F5480F;outline-offset:0}
.wbs__b[data-a="arch"]{background:#F5480F;color:#0a0a0a}
.wbs__x{display:grid;place-items:center;width:30px;padding:0}
.wbs__x svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.wbs__st{margin:4px 4px 0;min-height:16px;font:400 13px/1.2 'Switzer',sans-serif}
@media (max-width:420px){.wbs__wat{display:none}.wbs__b{padding:6px 7px}.wbs__nw{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.wbs__bar{padding-left:10px}}
@media (prefers-reduced-motion:reduce){.wbs__bar,.wbs.has-sel .wbs__bar,.wbs__b,.wbs__it,.wbs__idle{transition:none}}

// Werkbalk die uitklapt bij selectie · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.wbs');if(!w)return;
var list=w.querySelector('.wbs__list'),allCb=w.querySelector('.wbs__cb--all'),bar=w.querySelector('.wbs__bar'),n=w.querySelector('.wbs__n'),st=w.querySelector('.wbs__st'),cnt=w.querySelector('.wbs__cnt'),empty=w.querySelector('.wbs__empty');
var btns=[].slice.call(bar.querySelectorAll('.wbs__b')),store=list.innerHTML,focusI=0;
function boxes(){return [].slice.call(list.querySelectorAll('.wbs__cb'));}
function sync(){var b=boxes(),s=b.filter(function(x){return x.checked;}).length;
b.forEach(function(x){x.closest('.wbs__it').classList.toggle('is-on',x.checked);});
allCb.checked=s>0&&s===b.length;allCb.indeterminate=s>0&&s<b.length;allCb.disabled=!b.length;
var was=w.classList.contains('has-sel');w.classList.toggle('has-sel',s>0);bar.setAttribute('aria-hidden',s>0?'false':'true');
n.innerHTML=s?s+'<span class="wbs__nw"> geselecteerd</span>':'';cnt.textContent=b.length;
btns.forEach(function(x,i){x.tabIndex=(s>0&&i===focusI)?0:-1;});
list.hidden=!b.length;empty.hidden=!!b.length;
if(was&&!s&&bar.contains(document.activeElement)){var f=boxes()[0]||allCb;if(!allCb.disabled||boxes().length)f.focus();}}
list.addEventListener('change',sync);
allCb.addEventListener('change',function(){boxes().forEach(function(x){x.checked=allCb.checked;});sync();});
bar.addEventListener('keydown',function(e){var i=btns.indexOf(document.activeElement);if(i<0)return;var j=null;
if(e.key==='ArrowRight')j=(i+1)%btns.length;else if(e.key==='ArrowLeft')j=(i-1+btns.length)%btns.length;else if(e.key==='Home')j=0;else if(e.key==='End')j=btns.length-1;
if(j!==null){e.preventDefault();focusI=j;btns.forEach(function(x,k){x.tabIndex=k===j?0:-1;});btns[j].focus();}});
bar.addEventListener('focusin',function(e){var i=btns.indexOf(e.target);if(i>=0)focusI=i;});
bar.addEventListener('click',function(e){var b=e.target.closest('.wbs__b');if(!b)return;var sel=boxes().filter(function(x){return x.checked;}),k=sel.length,a=b.dataset.a,word=k===1?'aanvraag':'aanvragen';
if(a==='clear'){sel.forEach(function(x){x.checked=false;});st.textContent='Selectie gewist.';sync();allCb.focus();return;}
if(a==='toe'){st.textContent=k+' '+word+' toegewezen aan monteur Kees.';}
if(a==='plan'){st.textContent=k+' '+word+' ingepland in week 42.';}
if(a==='arch'){var rm=matchMedia('(prefers-reduced-motion: reduce)').matches;sel.forEach(function(x){x.closest('.wbs__it').classList.add('is-out');});
setTimeout(function(){sel.forEach(function(x){x.closest('.wbs__it').remove();});st.textContent=k+' '+word+' gearchiveerd.';sync();(boxes()[0]||w.querySelector('.wbs__undo')).focus();},rm?0:260);return;}
sel.forEach(function(x){x.checked=false;});sync();allCb.focus();});
w.querySelector('.wbs__undo').addEventListener('click',function(){list.innerHTML=store;st.textContent='Aanvragen teruggezet.';sync();allCb.focus();});
sync();
}
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 →