NedDev®
NL Get in touch
Home Work
Services
SaaS developmentAI developmentAPI developmentMobile app developmentGoogle Ads managementHeadless ShopifyLaravel developmentNext.js developmentReact developmentTypeScript engineeringUI/UX designSEO & AEOEcommerce development
Solutions
AI solutionsB2B platformsE-commerceHospitalityLead generationLogisticsEducationProcess automationSaaS platformsStartup MVPReal estateHealthcare
Industries
LegalHealthcareReal estateFinanceHospitality
Regions
The HagueRotterdamAmsterdamUtrechtEindhovenAlmereBredaArnhemNijmegenTilburgEnschedeGroningenLeidenDelftZoetermeerDen Bosch
Studio
AboutProcessLabBlogContact

Cookie-onderbalk met instellingenlade New

Slim cookie bar at the bottom; "Settings" opens a side drawer with explanation, toggle and cookie list per category. Reject and accept are equally prominent.

We gebruiken cookies om de site te laten werken en, als je dat goed vindt, om bezoek te meten en advertenties af te stemmen.

How to use it

  1. Paste the HTML where the page sections should appear.
  2. Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
  3. Add the JavaScript and call init() with the element that contains the HTML.
<!-- Cookie-onderbalk met instellingenlade · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="cbl">
  <div class="cbl__page" aria-hidden="true">
    <div class="cbl__nav"><b>Hotel De Duinen</b><span>Kamers</span><span>Restaurant</span><span>Arrangementen</span><span class="cbl__book">Boek direct</span></div>
    <div class="cbl__hero"><span class="cbl__k">Zandvoort · 200 meter van zee</span><p class="cbl__t">Twee nachten met ontbijt vanaf € 189</p></div>
  </div>
  <div class="cbl__bar" role="region" aria-label="Cookiemelding">
    <p>We gebruiken cookies om de site te laten werken en, als je dat goed vindt, om bezoek te meten en advertenties af te stemmen.</p>
    <div class="cbl__acts">
      <button type="button" class="cbl__link" data-open>Instellingen</button>
      <button type="button" class="cbl__btn" data-act="none">Weigeren</button>
      <button type="button" class="cbl__btn" data-act="all">Accepteren</button>
    </div>
  </div>
  <div class="cbl__shade" data-close></div>
  <div class="cbl__drawer" role="dialog" aria-modal="true" aria-labelledby="cbl-h" aria-hidden="true">
    <div class="cbl__dh"><p id="cbl-h">Cookie-instellingen</p><button type="button" class="cbl__x" data-close aria-label="Sluiten">×</button></div>
    <div class="cbl__body">
      <div class="cbl__cat">
        <div class="cbl__ch"><b>Noodzakelijk</b><span class="cbl__always">Altijd aan</span></div>
        <p>Zorgen dat boeken en betalen werkt en dat je ingelogd blijft. Hiervoor is geen toestemming nodig.</p>
        <details><summary>3 cookies</summary><ul><li><code>PHPSESSID</code> sessie</li><li><code>booking_cart</code> 1 dag</li><li><code>cookie_keuze</code> 1 jaar</li></ul></details>
      </div>
      <div class="cbl__cat">
        <div class="cbl__ch"><b>Statistiek</b><label class="cbl__sw"><input type="checkbox" data-cat="statistiek"><span></span><i class="cbl__sr">Statistiek toestaan</i></label></div>
        <p>We zien welke pagina's bezocht worden, met ingekorte IP-adressen. Gegevens blijven in de EU.</p>
        <details><summary>2 cookies</summary><ul><li><code>_pk_id</code> 13 maanden</li><li><code>_pk_ses</code> 30 minuten</li></ul></details>
      </div>
      <div class="cbl__cat">
        <div class="cbl__ch"><b>Marketing</b><label class="cbl__sw"><input type="checkbox" data-cat="marketing"><span></span><i class="cbl__sr">Marketing toestaan</i></label></div>
        <p>Laat ons advertenties tonen op andere sites aan mensen die al naar een kamer keken.</p>
        <details><summary>2 cookies</summary><ul><li><code>_gcl_au</code> 3 maanden</li><li><code>_fbp</code> 3 maanden</li></ul></details>
      </div>
    </div>
    <div class="cbl__df"><button type="button" class="cbl__btn" data-act="save">Keuze opslaan</button><button type="button" class="cbl__btn" data-act="all">Alles accepteren</button></div>
  </div>
  <button type="button" class="cbl__reopen" hidden data-open>Cookies</button>
</div>
</div>

More page sections

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 →