Cookiebanner als hoekkaart Nieuw

Cookiekaart in de hoek met schakelaars per categorie. "Alles accepteren" en "Alleen noodzakelijk" zijn gelijkwaardig vormgegeven, zoals de AP vraagt. Keuze is later te wijzigen via de knop linksonder.

Zo gebruik je het

Plak de HTML op de plek waar het onderdeel moet komen.
Zet de CSS in je stylesheet. Alle klassen hebben een eigen voorvoegsel, dus niets botst met je eigen opmaak.
Voeg de JavaScript toe en roep init() aan met het element waar de HTML in staat.

<!-- Cookiebanner als hoekkaart · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="cks">
  <div class="cks__page" aria-hidden="true">
    <div class="cks__nav"><b>Fietsvak</b><span>Stadsfietsen</span><span>E-bikes</span><span>Onderhoud</span><span class="cks__cart">Mandje (0)</span></div>
    <div class="cks__hero"><span class="cks__k">Werkplaats Utrecht Oost</span><p class="cks__t">Onderhoudsbeurt, klaar terwijl je koffie drinkt</p><span class="cks__b">Plan een beurt · € 69</span></div>
  </div>
  <div class="cks__card" role="dialog" aria-labelledby="cks-h" aria-describedby="cks-d">
    <p class="cks__h" id="cks-h">Cookies op fietsvak.nl</p>
    <p class="cks__d" id="cks-d">Noodzakelijke cookies houden je mandje bij. Met jouw toestemming meten we het bezoek en tonen we advertenties op andere sites. <a href="#">Cookieverklaring</a></p>
    <ul class="cks__opts">
      <li><span><b>Noodzakelijk</b><small>Mandje, inloggen, beveiliging</small></span><label class="cks__sw is-lock"><input type="checkbox" checked disabled><span class="cks__tr"></span><span class="cks__sr">Noodzakelijk, altijd aan</span></label></li>
      <li><span><b>Statistiek</b><small>Anoniem bezoek meten</small></span><label class="cks__sw"><input type="checkbox" data-cat="statistiek"><span class="cks__tr"></span><span class="cks__sr">Statistiek</span></label></li>
      <li><span><b>Marketing</b><small>Advertenties op andere sites</small></span><label class="cks__sw"><input type="checkbox" data-cat="marketing"><span class="cks__tr"></span><span class="cks__sr">Marketing</span></label></li>
    </ul>
    <div class="cks__btns">
      <button type="button" class="cks__btn" data-act="all">Alles accepteren</button>
      <button type="button" class="cks__btn" data-act="none">Alleen noodzakelijk</button>
    </div>
    <button type="button" class="cks__save" data-act="save">Voorkeuren opslaan</button>
  </div>
  <button type="button" class="cks__reopen" hidden>Cookie-instellingen</button>
  <p class="cks__toast" role="status"></p>
</div>
</div>

/* Cookiebanner als hoekkaart · NedDev · eigen werk. */
.cks{position:relative;width:100%;align-self:flex-start;flex:none;height:500px;background:#f2f4ef;color:#18241b;font-family:'Switzer',sans-serif;overflow:hidden;box-sizing:border-box}
.cks *{box-sizing:border-box}
.cks__page{position:absolute;inset:0;display:flex;flex-direction:column}
.cks__nav{display:flex;align-items:center;gap:24px;padding:16px 32px;background:#fff;font-size:14px;color:#3f4e43}
.cks__nav b{font-size:20px;color:#18241b;margin-right:12px}
.cks__cart{margin-left:auto;font-weight:600}
.cks__hero{flex:1;padding:40px 32px;display:flex;flex-direction:column;justify-content:center;align-items:flex-end;text-align:right;background:linear-gradient(90deg,transparent 40%,rgba(46,125,79,.12) 40%),repeating-linear-gradient(135deg,#f2f4ef 0 22px,#ebeee7 22px 44px)}
.cks__k{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#2e7d4f}
.cks__t{font-size:clamp(26px,3.4vw,42px);font-weight:800;line-height:1.05;letter-spacing:-.02em;max-width:15ch;margin:10px 0 18px}
.cks__b{background:#18241b;color:#fff;padding:12px 18px;border-radius:4px;font-weight:600;font-size:14px}
.cks__card{position:absolute;left:20px;bottom:20px;width:360px;max-height:calc(100% - 40px);overflow:auto;background:#fff;border:1px solid #d6ddd2;border-radius:6px;box-shadow:0 20px 40px -20px rgba(24,36,27,.45);padding:20px;z-index:3;transition:opacity .25s ease,transform .25s ease}
.cks.is-done .cks__card{opacity:0;transform:translateY(12px);visibility:hidden;transition:opacity .25s ease,transform .25s ease,visibility 0s linear .25s}
.cks__h{font-weight:800;font-size:17px;margin:0 0 6px}
.cks__d{font-size:13px;line-height:1.5;color:#4b5a4f;margin:0 0 12px}
.cks__d a{color:#2e7d4f}
.cks__opts{list-style:none;margin:0 0 14px;padding:0}
.cks__opts li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid #edf0ea}
.cks__opts b{display:block;font-size:14px}
.cks__opts small{display:block;font-size:12px;color:#6a786d}
.cks__sw{position:relative;flex:none;cursor:pointer}
.cks__sw input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:inherit}
.cks__tr{display:block;width:40px;height:22px;border-radius:999px;background:#c9d1c6;position:relative;transition:background .2s ease}
.cks__tr::after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .2s ease}
.cks__sw input:checked+.cks__tr{background:#2e7d4f}
.cks__sw input:checked+.cks__tr::after{transform:translateX(18px)}
.cks__sw input:focus-visible+.cks__tr{outline:2px solid #18241b;outline-offset:2px}
.cks__sw.is-lock{cursor:not-allowed;opacity:.65}
.cks__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cks__btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cks__btn{font:700 14px 'Switzer',sans-serif;color:#fff;background:#18241b;border:1px solid #18241b;border-radius:4px;padding:11px 8px;cursor:pointer;transition:background .2s ease}
.cks__btn:hover,.cks__btn:focus-visible{background:#2e7d4f;border-color:#2e7d4f}
.cks__save{display:block;width:100%;margin-top:8px;font:600 13px 'Switzer',sans-serif;color:#18241b;background:transparent;border:1px solid #c9d1c6;border-radius:4px;padding:9px;cursor:pointer}
.cks__save:hover{background:#f2f4ef}
.cks__reopen{position:absolute;left:20px;bottom:20px;font:600 13px 'Switzer',sans-serif;color:#18241b;background:#fff;border:1px solid #c9d1c6;border-radius:999px;padding:9px 14px;cursor:pointer;z-index:2}
.cks__toast{position:absolute;right:20px;bottom:20px;margin:0;background:#18241b;color:#fff;font-size:13px;padding:10px 14px;border-radius:4px;opacity:0;transform:translateY(8px);transition:opacity .25s ease,transform .25s ease;pointer-events:none;max-width:calc(100% - 40px)}
.cks__toast.is-on{opacity:1;transform:none}
@media(max-width:640px){
.cks__nav span{display:none}.cks__nav .cks__cart{display:inline}.cks__nav{padding:12px 16px}
.cks__hero{padding:24px 16px;align-items:flex-start;text-align:left;justify-content:flex-start}
.cks__card{left:10px;right:10px;bottom:10px;width:auto;padding:16px}
.cks__toast{left:10px;right:10px;bottom:64px}
.cks__reopen{left:10px;bottom:10px}}
@media(prefers-reduced-motion:reduce){.cks__card,.cks__toast,.cks__tr,.cks__tr::after{transition:none}}

// Cookiebanner als hoekkaart · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.cks');if(!w)return;
var card=w.querySelector('.cks__card'),re=w.querySelector('.cks__reopen'),toast=w.querySelector('.cks__toast'),tt=null;
var boxes=w.querySelectorAll('input[data-cat]');
function finish(){
  var on=['noodzakelijk'];boxes.forEach(function(b){if(b.checked)on.push(b.getAttribute('data-cat'));});
  w.classList.add('is-done');re.hidden=false;
  toast.textContent='Opgeslagen: '+on.join(', ');toast.classList.add('is-on');clearTimeout(tt);tt=setTimeout(function(){toast.classList.remove('is-on');},2600);
  re.focus({preventScroll:true});
  // Hier zet je in productie de toestemming door (bv. gtag consent update), pas NA deze keuze scripts laden.
}
w.querySelectorAll('[data-act]').forEach(function(btn){btn.addEventListener('click',function(){
  var a=btn.getAttribute('data-act');
  if(a==='all')boxes.forEach(function(b){b.checked=true;});
  if(a==='none')boxes.forEach(function(b){b.checked=false;});
  finish();});});
re.addEventListener('click',function(){w.classList.remove('is-done');re.hidden=true;var f=card.querySelector('input:not([disabled])');if(f)f.focus({preventScroll:true});});
w.addEventListener('click',function(e){var a=e.target.closest('a[href="#"]');if(a)e.preventDefault();});
}
init(document.querySelector('.jouw-container'));

Meer uit paginasecties

Iets gezien dat je mooi vindt?

Zet het in je selectie en stuur hem op. Dan bouwen we je site eromheen, in jouw huisstijl.

Neem contact op →