Menukaart om door te bladeren Nieuw

<!-- Menukaart om door te bladeren · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="bbl">
<div class="bbl__book" tabindex="0" role="group" aria-roledescription="menukaart" aria-label="Herfstkaart van Bistro Twijnstraat. Blader met de pijltjestoetsen.">
<div class="bbl__page bbl__page--l"><div class="bbl__in"><h3 class="bbl__h">Herfstkaart</h3><p class="bbl__txt">Van 6 oktober tot en met 30 november. Groente van De Kromme Rijn in Bunnik, vis van de afslag in IJmuiden.</p><p class="bbl__sign">Bistro Twijnstraat, Utrecht</p></div></div>
<div class="bbl__page bbl__page--r"><div class="bbl__in"><h3 class="bbl__h">Reserveren</h3><p class="bbl__txt">Dinsdag tot en met zaterdag vanaf 17.00 uur.</p><p class="bbl__txt"><a class="bbl__a" href="#brochure-bladeren">030 123 4567</a><br><a class="bbl__a" href="#brochure-bladeren">tafel@voorbeeld.nl</a></p></div></div>
<div class="bbl__sheet" style="--i:0"><div class="bbl__face bbl__face--f"><div class="bbl__in"><h3 class="bbl__h">Voorgerechten</h3><ul class="bbl__menu"><li><span>Pompoen, hazelnoot en geitenkaas</span><b>€ 11,50</b></li><li><span>Rundercarpaccio met truffelmayonaise</span><b>€ 13,00</b></li><li><span>Soep van bospaddenstoelen</span><b>€ 8,50</b></li></ul></div></div><div class="bbl__face bbl__face--b"><img class="bbl__img" src="https://neddev.com/lab-media/brochure-bladeren-1.webp" alt="Geroosterde pompoen met hazelnoot en geitenkaas" loading="lazy"></div></div>
<div class="bbl__sheet" style="--i:1"><div class="bbl__face bbl__face--f"><div class="bbl__in"><h3 class="bbl__h">Hoofdgerechten</h3><ul class="bbl__menu"><li><span>Gebakken schol, zeekraal en bruine boter</span><b>€ 24,50</b></li><li><span>Hertenstoof met rode kool</span><b>€ 26,00</b></li><li><span>Risotto van knolselderij</span><b>€ 21,00</b></li></ul></div></div><div class="bbl__face bbl__face--b"><img class="bbl__img" src="https://neddev.com/lab-media/brochure-bladeren-2.webp" alt="Gebakken schol met zeekraal en krieltjes" loading="lazy"></div></div>
<div class="bbl__sheet" style="--i:2"><div class="bbl__face bbl__face--f"><div class="bbl__in"><h3 class="bbl__h">Nagerechten</h3><ul class="bbl__menu"><li><span>Appeltaart met slagroom</span><b>€ 7,50</b></li><li><span>Crème brûlée met vanille</span><b>€ 8,00</b></li><li><span>Drie Hollandse kazen</span><b>€ 12,50</b></li></ul></div></div><div class="bbl__face bbl__face--b"><div class="bbl__in"><h3 class="bbl__h">Allergieën?</h3><p class="bbl__txt">Vraag het ons. Bijna elk gerecht maken we ook glutenvrij of zonder noten.</p></div></div></div>
</div>
<div class="bbl__bar">
<button class="bbl__btn bbl__prev" type="button" aria-label="Vorige bladzijde" disabled><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M10 3L5 8l5 5"/></svg></button>
<p class="bbl__pos" aria-live="polite">Blad 1 van 4</p>
<button class="bbl__btn bbl__next" type="button" aria-label="Volgende bladzijde"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M6 3l5 5-5 5"/></svg></button>
</div>
</div>
</div>

/* Menukaart om door te bladeren · NedDev · eigen werk. */
.bbl{position:absolute;inset:0;background:#e4e2de;color:#0a0a0a;font-family:'Switzer',sans-serif;container-type:size;text-align:left}
.bbl *,.bbl *::before,.bbl *::after{box-sizing:border-box}
.bbl__book{position:absolute;left:50%;top:10px;width:min(90cqi,106cqh);aspect-ratio:1.45;transform:translateX(-50%);perspective:1600px;container-type:inline-size;outline:none}
.bbl__book:focus-visible{outline:2px solid #F5480F;outline-offset:4px}
.bbl__page,.bbl__face{position:absolute;inset:0;background:#fff;overflow:hidden}
.bbl__page{width:50%}
.bbl__page--l{left:0;border-radius:4px 0 0 4px;background:linear-gradient(270deg,#e9e7e3,#fff 9%)}
.bbl__page--r{left:50%;border-radius:0 4px 4px 0;background:linear-gradient(90deg,#e9e7e3,#fff 9%)}
.bbl__sheet{position:absolute;top:0;left:50%;width:50%;height:100%;transform-origin:left center;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.45,.05,.25,1);z-index:calc(10 - var(--i));cursor:pointer}
.bbl__sheet.is-flipped{transform:rotateY(-180deg);z-index:calc(10 + var(--i))}
.bbl__face{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.bbl__face--f{border-radius:0 4px 4px 0;background:linear-gradient(90deg,#e9e7e3,#fff 9%)}
.bbl__face--b{transform:rotateY(180deg);border-radius:4px 0 0 4px;background:linear-gradient(270deg,#e9e7e3,#fff 9%)}
.bbl__page--l{cursor:pointer}
.bbl__in{padding:7cqi 5.5cqi 5cqi 6.5cqi;height:100%;display:flex;flex-direction:column;gap:2.2cqi}
.bbl__h{margin:0;font:700 4.6cqi/1.05 'Switzer',sans-serif;letter-spacing:-.02em}
.bbl__txt{margin:0;font:400 2.9cqi/1.4 'Switzer',sans-serif;color:#3d3b38}
.bbl__sign{margin:auto 0 0;font:500 2.7cqi/1.3 'Switzer',sans-serif;color:#6b6863}
.bbl__a{color:#0a0a0a;text-decoration:underline;text-underline-offset:2px}
.bbl__a:hover{color:#b8330a}
.bbl__a:focus-visible{outline:2px solid #F5480F;outline-offset:1px}
.bbl__menu{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2.4cqi}
.bbl__menu li{display:flex;justify-content:space-between;align-items:baseline;gap:2cqi;font:400 2.9cqi/1.35 'Switzer',sans-serif;border-bottom:1px solid #e4e2de;padding-bottom:1.6cqi}
.bbl__menu span{min-width:0}
.bbl__menu b{flex:none;font-weight:600;white-space:nowrap}
.bbl__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bbl__bar{position:absolute;left:0;right:0;bottom:8px;display:flex;align-items:center;justify-content:center;gap:12px}
.bbl__btn{width:30px;height:30px;display:grid;place-items:center;margin:0;padding:0;border:1px solid #0a0a0a;border-radius:4px;background:#fff;color:#0a0a0a;cursor:pointer;transition:background-color .16s,color .16s}
.bbl__btn:hover:not(:disabled){background:#0a0a0a;color:#fff}
.bbl__btn:active:not(:disabled){transform:translateY(1px)}
.bbl__btn:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
.bbl__btn:disabled{opacity:.35;cursor:not-allowed}
.bbl__btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bbl__pos{margin:0;min-width:84px;text-align:center;font:500 12px/1 'Switzer',sans-serif;font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.bbl__sheet{transition:none}}

// Menukaart om door te bladeren · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.bbl');if(!w)return;
var book=w.querySelector('.bbl__book'),sheets=[].slice.call(w.querySelectorAll('.bbl__sheet')),N=sheets.length,p=0;
var prev=w.querySelector('.bbl__prev'),next=w.querySelector('.bbl__next'),pos=w.querySelector('.bbl__pos');
function upd(){sheets.forEach(function(s,j){var f=j<p;s.classList.toggle('is-flipped',f);s.querySelector('.bbl__face--f').setAttribute('aria-hidden',(j===p)?'false':'true');s.querySelector('.bbl__face--b').setAttribute('aria-hidden',(j===p-1)?'false':'true');});
prev.disabled=p===0;next.disabled=p===N;pos.textContent='Blad '+(p+1)+' van '+(N+1);}
function go(d){var q=Math.max(0,Math.min(N,p+d));if(q===p)return;p=q;upd();}
prev.addEventListener('click',function(){go(-1);});next.addEventListener('click',function(){go(1);});
book.addEventListener('keydown',function(e){if(e.key==='ArrowRight'||e.key==='PageDown'){go(1);e.preventDefault();}else if(e.key==='ArrowLeft'||e.key==='PageUp'){go(-1);e.preventDefault();}else if(e.key==='Home'){p=0;upd();e.preventDefault();}else if(e.key==='End'){p=N;upd();e.preventDefault();}});
book.addEventListener('click',function(e){if(e.target.closest('a'))return;var r=book.getBoundingClientRect();go(e.clientX>r.left+r.width/2?1:-1);});
upd();
}
init(document.querySelector('.jouw-container'));