/* Кнопка "Все" */ .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(); } });
// На сенсорных экранах можно добавить элементы управления типом открытия - по-умолчанию используется клик
We appreciate the ongoing engagement and support from the South Australian Government and Minister for Multicultural Affairs Nadia Clancy. It’s encouraging to see a shared commitment to building an inclusive, connected, and thriving multicultural community in South Australia. We look forward to continuing this work together. Read on Facebook
Stories of Remembrance — ANZAC Day Series 2026 This conversation features Lucy Bodnar — an Australian who served in the Australian Army, and the daughter of World War II survivors. Her story moves across generations — from war and migration to life in Australia, cultural identity, and contribution to the community. Shared as part of
Stories of Remembrance — ANZAC Day Series 2026 This conversation features Lucy… Читать далее »
Another blast of a night from our VolkHauz – Mafia Game Night – Adelaide strategy game thingy! Remember, ever second Saturday, 6pm, Plant 3, Bowden! See ya April 25th, special Anzac Say Edition 🤝 Read on Facebook
Another blast of a night from our VolkHauz – Mafia Game Night… Читать далее »
We are sincerely grateful to Premier Peter Malinauskas and Minister for Multicultural Affairs Nadia Clancy MP for their kind Easter wishes and recognition of our community. Wishing all Prima Nota members and the wider Russian-speaking community a peaceful and joyful Easter, filled with warmth, hope, and togetherness. Read on Facebook
We had the privilege of attending an important conversation around non-disclosure agreements (NDAs)- and everything that comes with them. At their core, NDAs are meant to protect confidential information. But in practice, they are often used in situations like workplace disputes or harassment cases- where a person may be required to stay silent in exchange
We know that many of our members, as well as across the wider community in South Australia, are celebrating Catholic Easter. A season that brings with it light, joy, and a sense of renewal. Prima Nota Inc. warmly wishes a joyful Catholic Easter to all who celebrate. Read on Facebook
We know that many of our members, as well as across the… Читать далее »
ANZAC Day 2026, April 25 • Community Invitation Prima Nota Inc. is honoured to take part in ANZAC Day commemorations in Adelaide and extends sincere respect to the organisers. Our participation will take place within the Eastern European group- including the Dawn Service and March. A wreath will be laid as part of Prima Nota’s
ANZAC Day 2026, April 25 • Community Invitation Prima Nota Inc. is… Читать далее »