Кнопка "All Microsoft" — Мега-меню (пример)

/* БАЗОВАЯ СТИЛИСТИКА - минимальная, настраивайте по вкусу */ :root{--bg:#ffffff;--panel:#f7f7f8;--accent:#0078d4;--text:#111;--shadow:rgba(0,0,0,0.12)} *{box-sizing:border-box} body{font-family:Inter,system-ui,Segoe UI,Roboto, "Helvetica Neue",Arial;line-height:1.3;color:var(--text);background:var(--bg);margin:0} .site-header{display:flex;align-items:center;gap:16px;padding:12px 20px;border-bottom:1px solid #e6e6e6} .brand{font-weight:700;font-size:18px}

/* Кнопка "Все" */ .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(); } });

// На сенсорных экранах можно добавить элементы управления типом открытия - по-умолчанию используется клик

Support Our Mission

Acknowledgements.
With Gratitude.

We see you. We thank you. We couldn’t do this without you.

Prima Nota’s work is built on generosity, collaboration, and community spirit. We gratefully acknowledge the individuals, organisations, councils, and businesses who have contributed their time, space, funding, equipment, and belief in what we do.

Every sponsor, donor, and volunteer helps create the programs, events, and spaces that support Russian-speaking migrants and connect us all through culture and creativity.

Folk Pancake Festival Maslenitsa SA 2026 — 15 February 2026, Linde Reserve, Stepney

1,500+

Attendees

4,320

Volunteer Hours

97,231

Facebook Views

$141,555

Community Value

Performing Groups

Maslenitsa SA 2026

Festival Sponsors

Gold Sponsor

Central Audio Visual (CAV)

Technical equipment and full AV support for Maslenitsa SA 2026 at Linde Reserve

Silver Sponsor

SNAP SNAP

Photo booth experience and event photography at Maslenitsa SA 2026

Maslenitsa SA 2026

Community Partners

Partners

Russian-Speaking Women’s Association in SA

Co-organiser — community outreach, volunteer kitchen, cultural materials and festival promotion

Diabetes SA

Community health engagement at the festival

Cocoshnick in Australia

Cultural materials and costume support

Kennards Hire

Equipment hire and logistics support

Eastway Vikings

Event support and community partnership

Kaleidoscope Paramedics

On-site first aid and safety services

Ongoing Support

Year-Round Partners

Partners

City of Norwood Payneham & St Peters

Event grant support and cultural engagement

Volunteer Champions

The People Behind the Scenes

25 On-site Volunteers

To our 25 dedicated on-site volunteers who collectively gave 4,320 hours — singers, game night hosts, cooks, translators, and behind-the-scenes helpers — thank you for your time, energy, and trust. You are the heart of Prima Nota.

Want to be
listed here?

Your contribution – financial or in-kind – makes a real difference to our programs and community.

Make a Contribution Become a Partner Join Our Volunteer Team

We Listen — Prima Nota Support

Пример быстрого внедрения мега-меню

Acknowledgements.With Gratitude.

Acknowledgements.
With Gratitude.