/* Кнопка "Все" */ .all-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:6px;background:transparent;border:1px solid #ddd;cursor:pointer} .all-btn:focus{outline:3px solid rgba(0,120,212,0.15);outline-offset:2px}
/* Оверлей и панель */ .overlay{position:fixed;inset:0;display:none;background:rgba(0,0,0,0.18);z-index:40} .overlay.open{display:block} .panel{position:fixed;left:0;right:0;top:56px;margin:0 auto;max-width:1200px;background:var(--panel);border-radius:8px;box-shadow:0 8px 24px var(--shadow);padding:20px;z-index:50;transform-origin:top;display:none} .panel.open{display:block}
/* Сетка меню */ .mega-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .group{background:transparent} .group h4{margin:0 0 8px 0;font-size:15px} .group ul{list-style:none;padding:0;margin:0} .group li{margin:6px 0} .link{display:block;padding:6px 8px;border-radius:6px;text-decoration:none;color:var(--text)} .link:hover{background:#fff}
/* Нижний колонтитул панели */ .panel-footer{display:flex;justify-content:space-between;align-items:center;padding-top:16px;border-top:1px solid #e6e6e6;margin-top:16px}
/* Отзывчивый */ @media (max-width:900px){ .panel{left:12px;right:12px;top:64px} .mega-grid{grid-template-columns:repeat(2,1fr)} } @media (max-width:520px){ .mega-grid{grid-template-columns:1fr} }
Этот файл демонстрирует кнопку, похожую на "Все Microsoft": выпадающая панель, оверлей, адаптивность и базовая доступность.
// Простая логика открытия/закрытия + базовая доступность const btn = document.getElementById('allToggle'); const panel = document.getElementById('megaPanel'); const overlay = document.getElementById('overlay');
function openPanel(){ btn.setAttribute('aria-expanded','true'); panel.setAttribute('aria-hidden','false'); panel.classList.add('open'); overlay.classList.add('open'); // запомнить первый фокус panel.querySelector('.link')?.focus(); document.addEventListener('keydown', onKeyDown); } function closePanel(){ btn.setAttribute('aria-expanded','false'); panel.setAttribute('aria-hidden','true'); panel.classList.remove('open'); overlay.classList.remove('open'); btn.focus(); document.removeEventListener('keydown', onKeyDown); }
btn.addEventListener('click', ()=>{ const expanded = btn.getAttribute('aria-expanded') === 'true'; if(expanded) closePanel(); else openPanel(); });
// клик по оверлею закрывает overlay.addEventListener('click', closePanel);
// клавиши: Esc закрывает; Tab — простая ловушка фокуса (не идеальна, но рабочая) function onKeyDown(e){ if(e.key === 'Escape') closePanel(); if(e.key === 'Tab'){ const focusable = panel.querySelectorAll('a, button'); if(!focusable.length) return; const first = focusable[0]; const last = focusable[focusable.length-1]; if(e.shiftKey && document.activeElement === first){ e.preventDefault(); last.focus(); } else if(!e.shiftKey && document.activeElement === last){ e.preventDefault(); first.focus(); } } }
// Закрывать при клике вне: полезно, но не переусердствуйте с перехватом кликов по документу document.addEventListener('click', (e)=>{ if(panel.classList.contains('open')){ const insidePanel = panel.contains(e.target) || btn.contains(e.target); if(!insidePanel) closePanel(); } });
// На сенсорных экранах можно добавить элементы управления типом открытия - по-умолчанию используется клик
🧶 This Sunday — our bi-weekly Crochet Workshop! Facilitated and hosted by Prima Nota. ✨ 📍 Greenacres Public Library 🗓 Sunday, Sept 7 | ⏰ 2–4 PM 💡 Bring your creativity — from bags to cardigans, the sky’s the limit! 👉 Book your spot here: https://buy.stripe.com/00w28sdcw8Nb2WRdHRbbG04 Read on Facebook
🧶 This Sunday — our bi-weekly Crochet Workshop! Facilitated by the wonderful… Читать далее »
🧶 This coming Sunday — another crochet workshop! ✨ With our wonderful facilitator, Natalia Atkins, you’ll have the chance to work on whatever inspires you: – a cellphone case 📱 – a linen bag with crochet squares 👜 – a cardigan 🧥 … the sky is the limit! 🌸 💡 If you paid for the
🧶 This coming Sunday — another crochet workshop! ✨ With our wonderful… Читать далее »
Anti-immigration rallies divide us. But the truth is simple: we are all human. We share the same struggles — putting food on the table, raising children, caring for family, celebrating small joys and carrying heavy losses. Migrants are part of this same story. Nearly 30% of Australians were born overseas. They are not bystanders —
Anti-immigration rallies divide us. But the truth is simple: we are all… Читать далее »
✨ Maslenitsa 2026 Update ✨ Dear performers and stallholders, Thank you so much for your patience! We know you’ve been waiting to hear back, and we sincerely apologize for the delay. Our team has been carefully fine-tuning and finalizing the details to make sure everything is set for an unforgettable Maslenitsa on February 15, 2026.
✨ Maslenitsa 2026 Update ✨ Dear performers and stallholders, Thank you so… Читать далее »
What an incredible night at the Mosaic Adelaide Balinese Community Night! 🌺💃 We’re so excited to officially become a Friend of MOSAIC (Community) and can’t wait for all the cultural collaborations ahead. Representing Prima Nota Inc.: Nina (Chair), Olga & Natalia (Cultural Ambassadors) 💜 Loved the breathtaking Balinese dance performances, mouth-watering Balinese cuisine, and meeting
What an incredible night at the Mosaic Adelaide Balinese Community Night! 🌺💃… Читать далее »
✨ Thank you to everyone who joined our crochet workshop on Sunday, August 24th! A special thank you to our wonderful facilitator, Natalia Atkins, for leading such a creative and inspiring session. We’re also very grateful to Jaroma Tea for generously donating their beautiful tea blend that made the afternoon extra special. 🍵💐 We can’t
✨ Thank you to everyone who joined our crochet workshop on Sunday,… Читать далее »
