Mega menu z filtrem kolekcji roślin

<main class="garden"><header><strong>Zielnik.</strong><nav aria-label="Nawigacja główna"><button id="collection-toggle" aria-expanded="false" aria-controls="mega-menu">Kolekcje <span aria-hidden="true">⌄</span></button><button id="care-link">Pielęgnacja</button></nav></header><div id="mega-menu" hidden><section><h2>Kolekcje roślin</h2><button data-collection="Cień">Cień <small>Rośliny do cienia</small></button><button data-collection="Słońce">Słońce <small>Rośliny na jasne stanowiska</small></button><button data-collection="Mały balkon">Mały balkon <small>Rośliny na mały balkon</small></button></section><p>Przykładowe kolekcje.<br>Dobór stanowiska zależy od gatunku.</p></div><section class="garden-content"><div><p id="collection-label">Kolekcja / Cień</p><h1 id="collection-title">Rośliny<br>do cienia.</h1><p id="collection-description">Przykładowa kolekcja roślin do zacienionych miejsc.</p></div><svg viewBox="0 0 280 290" role="img" aria-label="Autorska ilustracja liścia"><path d="M140 250Q60 210 51 125Q38 48 145 24Q245 52 235 135Q224 215 140 250" fill="#517554"/><path d="M141 269V64M141 125 92 85M141 172 75 135M141 220 89 182M141 103 188 64M141 149 213 110M141 195 201 165" stroke="#c0ce91" stroke-width="4" fill="none"/></svg></section><p id="garden-status" class="status" aria-live="polite">Wybierz kolekcję w menu.</p></main>

*{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:Arial,sans-serif;color:var(--ink,#15202b);background:var(--paper,#fff);line-height:1.5}button,input,select{font:inherit}button{cursor:pointer;min-height:44px}button:disabled{cursor:not-allowed;opacity:.55}button,input,select,a{touch-action:manipulation}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible,[tabindex]:focus-visible,summary:focus-visible{outline:3px solid var(--focus,#1368ce);outline-offset:4px}button{border-radius:0}h1,h2,p{margin-top:0}svg{display:block;max-width:100%}[hidden]{display:none!important}.status{min-height:24px;font-size:14px}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
body{--paper:#f5f6ed;--ink:#2c4d38;--focus:#a35c23}.garden{max-width:850px;margin:auto;padding:30px;position:relative}header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #a8bba2;padding-bottom:17px}header strong{font:31px Georgia,serif}header nav{display:flex;gap:12px}nav button{border:0;background:transparent;color:#2c4d38;padding:8px 10px;font-size:14px}nav button span{margin-left:7px}.garden-content{display:grid;grid-template-columns:1.15fr 1fr;align-items:center;gap:25px;margin-top:26px}#collection-label{font-size:13px;color:#617454}h1{font:46px/1.06 Georgia,serif;letter-spacing:-1px;margin:16px 0}#collection-description{font-size:14px;max-width:330px}.garden-content svg{height:285px;width:100%}.status{font-size:13px;border-top:1px solid #a8bba2;padding-top:12px;margin:0}#mega-menu{position:absolute;left:30px;right:30px;top:91px;border:1px solid #a8bba2;background:#e4ead8;display:grid;grid-template-columns:1.4fr 1fr;gap:20px;padding:24px;z-index:3;box-shadow:0 6px 0 #2c4d381a}#mega-menu h2{font-size:14px;margin-bottom:8px}#mega-menu button{display:block;text-align:left;padding:8px 0;background:none;border:0;border-bottom:1px solid #a8bba2;width:100%;color:#2c4d38;font-size:18px}small{display:block;font-size:12px;color:#516849}#mega-menu>p{font:23px/1.25 Georgia,serif;margin:25px 0}@media(max-width:520px){.garden{padding:22px}header strong{font-size:26px}header nav{gap:0}nav button{font-size:12px;padding:8px 7px}.garden-content{grid-template-columns:1fr;gap:0}h1{font-size:38px}.garden-content svg{height:200px}.garden-content>div{position:relative;z-index:1}#mega-menu{left:22px;right:22px;top:83px;grid-template-columns:1fr;padding:20px}#mega-menu>p{display:none}.status{margin-top:10px}}

(()=>{
const menu=$('#mega-menu'),toggle=$('#collection-toggle');function close(){menu.prop('hidden',true);toggle.attr('aria-expanded','false');}toggle.on('click',()=>{const opening=menu.prop('hidden');menu.prop('hidden',!opening);toggle.attr('aria-expanded',String(opening));});$(document).on('keydown',e=>{if(e.key==='Escape'&&!menu.prop('hidden')){e.preventDefault();close();toggle.trigger('focus');}});const collections={'Cień':['Rośliny do cienia.','Przykładowa kolekcja roślin do zacienionych miejsc.','#517554'],'Słońce':['Rośliny na słońce.','Przykładowa kolekcja roślin na słoneczne stanowiska.','#8a9a4c'],'Mały balkon':['Rośliny na mały balkon.','Przykładowa kolekcja roślin balkonowych.','#6a7b69']};$('[data-collection]').on('click',function(){const name=this.dataset.collection,info=collections[name];$('#collection-label').text('Kolekcja / '+name);$('#collection-title').text(info[0]);$('#collection-description').text(info[1]);$('.garden-content svg>path:first-child').attr('fill',info[2]);$('#garden-status').text('Wybrano kolekcję: '+name);close();toggle.trigger('focus');});$('#care-link').on('click',()=>{close();$('#garden-status').text('Pielęgnacja: sprawdź światło, podlewanie i potrzeby konkretnego gatunku.');});
})();