Menukaart met allergenenfilter New
Restaurant menu by course with prices and gluten-free, vegan and nut-free filters that hide unsuitable dishes.
How to use it
- Paste the HTML where the page sections 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.
<!-- Menukaart met allergenenfilter · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="xmk">
<div class="xmk__inner">
<div class="xmk__head">
<div><span class="xmk__eyebrow">Brasserie Het Spaarne · Haarlem</span><h2 class="xmk__h">Menukaart najaar</h2></div>
<div class="xmk__filters" role="group" aria-label="Filter op dieet">
<button type="button" data-f="gv" aria-pressed="false">Glutenvrij</button>
<button type="button" data-f="vg" aria-pressed="false">Vegan</button>
<button type="button" data-f="nv" aria-pressed="false">Notenvrij</button>
<span class="xmk__count" aria-live="polite">12 van 12 gerechten</span>
</div>
</div>
<div class="xmk__cols">
<div class="xmk__col"><h3 class="xmk__cat">Voorgerechten</h3><ul class="xmk__list">
<li data-a="gv vg nv"><div><b>Tomatensoep</b><span>geroosterde tomaat, basilicumolie</span></div><em>7,50</em></li>
<li data-a="gv"><div><b>Carpaccio van Hollands rund</b><span>Parmezaan, pijnboompitten, rucola</span></div><em>13,50</em></li>
<li data-a="vg"><div><b>Zuurdesembrood met hummus</b><span>dukkah van hazelnoot, olijfolie</span></div><em>8,00</em></li>
<li data-a="nv"><div><b>Gerookte paling</b><span>roggebrood, mierikswortelcrème</span></div><em>12,75</em></li>
</ul><p class="xmk__none">Geen voorgerecht met deze filters. Vraag de bediening naar een aangepaste versie.</p></div>
<div class="xmk__col"><h3 class="xmk__cat">Hoofdgerechten</h3><ul class="xmk__list">
<li data-a="gv nv"><div><b>Kabeljauw uit de Noordzee</b><span>beurre blanc, prei, krieltjes</span></div><em>26,50</em></li>
<li data-a="gv vg nv"><div><b>Risotto van paddenstoelen</b><span>tijm, truffelolie, gefrituurde salie</span></div><em>21,00</em></li>
<li data-a="nv"><div><b>Stoofvlees van Hollands rund</b><span>Jopenbier, frietjes, appelcompote</span></div><em>23,50</em></li>
<li data-a="gv vg"><div><b>Pompoencurry</b><span>cashew, koriander, jasmijnrijst</span></div><em>19,50</em></li>
</ul><p class="xmk__none">Geen hoofdgerecht met deze filters. Vraag de bediening naar een aangepaste versie.</p></div>
<div class="xmk__col"><h3 class="xmk__cat">Nagerechten</h3><ul class="xmk__list">
<li data-a="gv vg nv"><div><b>Sorbet van framboos</b><span>verse munt, limoen</span></div><em>7,00</em></li>
<li data-a="gv nv"><div><b>Dame blanche</b><span>vanille-ijs, warme chocoladesaus</span></div><em>8,50</em></li>
<li data-a="nv"><div><b>Appeltaart</b><span>huisgemaakt, slagroom</span></div><em>6,25</em></li>
<li data-a="gv"><div><b>Chocoladetaartje</b><span>zonder meel, gekaramelliseerde hazelnoot</span></div><em>9,00</em></li>
</ul><p class="xmk__none">Geen nagerecht met deze filters. Vraag de bediening naar een aangepaste versie.</p></div>
</div>
<p class="xmk__foot">Allergie? Meld het bij uw bestelling. Onze keuken verwerkt noten en gluten; sporen zijn niet uit te sluiten.</p>
</div>
</div>
</div>/* Menukaart met allergenenfilter · NedDev · eigen werk. */
.xmk{background:#f4efe3;color:#2c2a1f;font-family:'Switzer',sans-serif;box-sizing:border-box}
.xmk *{box-sizing:border-box}
.xmk__inner{max-width:1140px;margin:0 auto;padding:44px 32px 30px}
.xmk__head{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;flex-wrap:wrap;padding-bottom:18px;border-bottom:2px solid #2c2a1f;margin-bottom:22px}
.xmk__eyebrow{display:block;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#4b5a2a;margin-bottom:8px}
.xmk__h{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:400;font-size:clamp(30px,4vw,44px);line-height:1;margin:0}
.xmk__filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.xmk__filters button{font:600 13px 'Switzer',sans-serif;color:#4b5a2a;background:transparent;border:1.5px solid #4b5a2a;border-radius:999px;padding:7px 14px 7px 12px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:background .2s,color .2s}
.xmk__filters button::before{content:'';width:10px;height:10px;border-radius:50%;border:1.5px solid currentColor;transition:background .2s}
.xmk__filters button.is-on{background:#4b5a2a;color:#f4efe3}
.xmk__filters button.is-on::before{background:#c9962b;border-color:#c9962b}
.xmk__count{font-family:'JetBrains Mono',monospace;font-size:11px;color:#6d6a58;margin-left:6px;min-width:15ch}
.xmk__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.xmk__cat{font-family:'JetBrains Mono',monospace;font-weight:500;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#a9781a;margin:0 0 8px}
.xmk__list{list-style:none;margin:0;padding:0}
.xmk__list li{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px dotted rgba(44,42,31,.35);transition:opacity .3s,max-height .35s,padding .35s;max-height:110px;overflow:hidden}
.xmk__list li b{display:block;font-size:15px;font-weight:600}
.xmk__list li span{display:block;font-size:13px;color:#6d6a58;margin-top:2px}
.xmk__tags{display:block;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.04em;color:#4b5a2a;margin-top:5px}
.xmk__list li em{font-style:normal;font-weight:600;font-size:15px;font-variant-numeric:tabular-nums}
.xmk__list li.is-out{max-height:0;padding:0;opacity:0;border-bottom-width:0}
.xmk__none{display:none;font-size:13px;color:#6d6a58;font-style:italic;margin:10px 0 0;line-height:1.4}
.xmk__col.is-empty .xmk__none{display:block}
.xmk__foot{margin:22px 0 0;font-size:12px;color:#6d6a58}
@media(prefers-reduced-motion:reduce){.xmk__list li{transition:none}}
@media(max-width:860px){.xmk__inner{padding:30px 16px 22px}.xmk__cols{grid-template-columns:1fr;gap:20px}.xmk__count{flex-basis:100%;margin:2px 0 0}}// Menukaart met allergenenfilter · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.xmk');if(!w)return;
var on={},btns=w.querySelectorAll('.xmk__filters button'),items=w.querySelectorAll('.xmk__list li'),cnt=w.querySelector('.xmk__count');
function apply(){var keys=Object.keys(on).filter(function(k){return on[k];}),n=0;
items.forEach(function(li){var a=' '+li.getAttribute('data-a')+' ',ok=keys.every(function(k){return a.indexOf(' '+k+' ')>-1;});li.classList.toggle('is-out',!ok);li.setAttribute('aria-hidden',!ok);if(ok)n++;});
w.querySelectorAll('.xmk__col').forEach(function(c){c.classList.toggle('is-empty',!c.querySelector('li:not(.is-out)'));});
cnt.textContent=n+' van '+items.length+' gerechten';}
var L={gv:'glutenvrij',vg:'vegan',nv:'notenvrij'};items.forEach(function(li){var t=li.getAttribute('data-a').split(' ').map(function(k){return L[k];}).filter(Boolean);if(t.length){var e=document.createElement('small');e.className='xmk__tags';e.textContent=t.join(' · ');li.firstElementChild.appendChild(e);}});
btns.forEach(function(b){b.addEventListener('click',function(){var k=b.getAttribute('data-f');on[k]=!on[k];b.classList.toggle('is-on',on[k]);b.setAttribute('aria-pressed',on[k]);apply();});});
apply();
}
init(document.querySelector('.jouw-container'));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 →