/* * ============================================================ * AFFIKSYS – NAVIGATION.CSS * ============================================================ * * Projekt: www.affiksys.com * Template: cassiopeia_extended * Version: 1.0 * * ZWECK: * - Hamburger-Menü im gemeinsamen Header * - Linke ausklappbare Navigation * - Silberne Metallic-Menübuttons * - Blaue Hover- und Fokus-Effekte * - Aktuelle Seite im Menü ausblenden * - Responsive Darstellung * * ABHÄNGIGKEITEN: * - layout.css * - Joomla-Menümodul * - Gemeinsame Template-Struktur * * WICHTIG: * Die Navigation darf den Joomla-Body beim * Öffnen und Schließen nicht verschieben. * * Die CSS-Klasse .aks-nav-open wird später * durch die Menüsteuerung gesetzt. * * ============================================================ */ /* ============================================================ 01. NAVIGATIONSVARIABLEN ============================================================ Diese Variablen steuern das Erscheinungsbild. Farben und Abstände können hier später zentral angepasst werden. ============================================================ */ .aks-site { --aks-nav-width: 240px; --aks-nav-bg: #111821; --aks-nav-border: #344354; --aks-nav-silver-light: #b6c0cb; --aks-nav-silver-mid: #657483; --aks-nav-silver-dark: #4b5968; --aks-nav-text: #f5f7fa; --aks-nav-blue: #3d7bff; --aks-nav-radius: 10px; --aks-nav-speed: 280ms; } /* ============================================================ 02. HAMBURGER-BUTTON ============================================================ Der Button befindet sich im gemeinsamen Header. Er öffnet und schließt das linke Menü. WICHTIG: Es muss später ein echtes HTML-Button-Element verwendet werden. Dadurch ist die Bedienung mit Tastatur und assistiven Technologien möglich. ============================================================ */ .aks-site .aks-menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--aks-nav-border); border-radius: 10px; background: var(--aks-nav-bg); color: var(--aks-nav-text); cursor: pointer; transition: border-color var(--aks-nav-speed) ease, box-shadow var(--aks-nav-speed) ease; } /* ------------------------------------------------------------ 02.1 Hamburger-Symbol Drei horizontale Linien werden über ein separates Element und Pseudoelemente erzeugt. Kein externes Icon-Paket erforderlich. ------------------------------------------------------------ */ .aks-site .aks-menu-icon, .aks-site .aks-menu-icon::before, .aks-site .aks-menu-icon::after { display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px; } .aks-site .aks-menu-icon { position: relative; } .aks-site .aks-menu-icon::before, .aks-site .aks-menu-icon::after { content: ""; position: absolute; left: 0; } .aks-site .aks-menu-icon::before { top: -6px; } .aks-site .aks-menu-icon::after { top: 6px; } /* ------------------------------------------------------------ 02.2 Hover und Tastaturfokus Beim Überfahren oder Fokussieren erhält der Button den AffiKSys-Leuchteffekt. ------------------------------------------------------------ */ .aks-site .aks-menu-toggle:hover, .aks-site .aks-menu-toggle:focus-visible { border-color: var(--aks-nav-blue); box-shadow: 0 0 12px rgba(61,123,255,.35); } .aks-site .aks-menu-toggle:focus-visible { outline: 2px solid var(--aks-nav-blue); outline-offset: 3px; } /* ============================================================ 03. LINKER NAVIGATIONSBEREICH ============================================================ Das Menü liegt innerhalb der linken Layoutspalte. Die Spalte selbst bleibt bestehen. Beim Öffnen und Schließen wird nur die Sichtbarkeit des Menüs verändert. Der Joomla-Body bleibt dadurch unverändert. ============================================================ */ .aks-site .aks-navigation { width: 100%; max-width: var(--aks-nav-width); padding: 16px; background: var(--aks-nav-bg); border: 1px solid var(--aks-nav-border); border-radius: 12px; opacity: 0; visibility: hidden; transform: translateX(-18px); transition: opacity var(--aks-nav-speed) ease, transform var(--aks-nav-speed) ease, visibility var(--aks-nav-speed) ease; } /* ------------------------------------------------------------ 03.1 Geöffnete Navigation Die Klasse .aks-nav-open wird später auf dem gemeinsamen Container .aks-site gesetzt. Dadurch wird das Menü sichtbar. ------------------------------------------------------------ */ .aks-site.aks-nav-open .aks-navigation { opacity: 1; visibility: visible; transform: translateX(0); } /* ============================================================ 04. JOOMLA-MENÜLISTE ============================================================ Joomla erzeugt die Menüeinträge als Liste. Die Standard-Aufzählungszeichen und Abstände werden entfernt. Die Liste erhält ein vertikales Layout. ============================================================ */ .aks-site .aks-navigation ul { display: flex; flex-direction: column; gap: 12px; list-style: none; padding: 0; margin: 0; } .aks-site .aks-navigation li { list-style: none; margin: 0; padding: 0; } /* ============================================================ 05. METALLIC-MENÜBUTTONS ============================================================ DESIGN: - Silberner Farbverlauf - Abgerundete Ecken - Helle Schrift - Dezente Schatten Die Buttons werden als normale Joomla-Links dargestellt. Dadurch bleibt die Navigation ohne zusätzliche JavaScript-Bibliotheken nutzbar. ============================================================ */ .aks-site .aks-navigation li > a { display: flex; align-items: center; width: 100%; min-height: 44px; padding: 12px 14px; border: 1px solid #aab6c3; border-radius: var(--aks-nav-radius); background: linear-gradient( 140deg, var(--aks-nav-silver-light), var(--aks-nav-silver-mid) 35%, var(--aks-nav-silver-dark) 70%, #98a5b2 ); color: var(--aks-nav-text); font-size: 14px; font-weight: 600; line-height: 1.4; text-decoration: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 4px 10px rgba(0,0,0,.25); transition: border-color var(--aks-nav-speed) ease, box-shadow var(--aks-nav-speed) ease, color var(--aks-nav-speed) ease, transform var(--aks-nav-speed) ease; } /* ------------------------------------------------------------ 05.1 Hover-Effekt Bei Mausberührung: - Blauer Rahmen - Blauer Text - Dezenter Leuchteffekt - Leichte horizontale Bewegung ------------------------------------------------------------ */ .aks-site .aks-navigation li > a:hover { color: #75bdff; border-color: var(--aks-nav-blue); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 0 14px rgba(61,123,255,.45); transform: translateX(3px); } /* ------------------------------------------------------------ 05.2 Tastaturbedienung Der Fokuszustand muss gut sichtbar sein. Damit kann das Menü auch ohne Maus zuverlässig bedient werden. ------------------------------------------------------------ */ .aks-site .aks-navigation li > a:focus-visible { color: #75bdff; border-color: var(--aks-nav-blue); outline: 2px solid var(--aks-nav-blue); outline-offset: 3px; } /* ============================================================ 06. AKTUELLEN MENÜPUNKT AUSBLENDEN ============================================================ VORGABE: Die Seite, auf der sich der Besucher bereits befindet, soll nicht erneut im Menü erscheinen. Joomla kennzeichnet aktive Menüeinträge üblicherweise mit der Klasse .current. Wir blenden nur den aktuell markierten Listeneintrag aus. HINWEIS: Bei späteren Untermenüs müssen wir prüfen, wie Joomla aktive übergeordnete Einträge markiert. ============================================================ */ .aks-site .aks-navigation li.current { display: none; } /* ============================================================ 07. RESPONSIVE NAVIGATION – SMARTPHONES ============================================================ Auf Smartphones wird das Menü nicht als normale Layoutspalte dargestellt. Stattdessen erscheint es als feste Ebene am linken Bildschirmrand. Dadurch bleibt der Joomla-Body sichtbar und wird nicht verschoben. WICHTIG: In layout.css wird .aks-site-left auf kleinen Bildschirmen zunächst ausgeblendet. Diese Regel muss deshalb hier gezielt überschrieben werden. ============================================================ */ @media (max-width: 767px) { .aks-site .aks-site-left { display: block; position: fixed; top: var(--aks-header-height); left: 0; width: min(85vw, 280px); max-height: calc(100dvh - var(--aks-header-height)); overflow-y: auto; z-index: 1000; min-height: 0; pointer-events: none; } .aks-site .aks-navigation { max-width: none; width: 100%; border-radius: 0 12px 12px 0; transform: translateX(-100%); } .aks-site.aks-nav-open .aks-site-left { pointer-events: auto; } .aks-site.aks-nav-open .aks-navigation { transform: translateX(0); } } /* ============================================================ 08. REDUZIERTE ANIMATIONEN ============================================================ Manche Nutzer haben in ihrem Betriebssystem reduzierte Bewegungen aktiviert. Diese Einstellung respektieren wir. Menüanimationen werden dann deaktiviert. ============================================================ */ @media (prefers-reduced-motion: reduce) { .aks-site .aks-menu-toggle, .aks-site .aks-navigation, .aks-site .aks-navigation li > a { transition: none; } } /* ============================================================ ENDE DER DATEI – NAVIGATION.CSS ============================================================ STATUS: Visuelle Navigation vorbereitet. NOCH ERFORDERLICH: 1. Gemeinsame Joomla-Template-Struktur erstellen. 2. Joomla-Menümodul in die linke Spalte einbinden. 3. Hamburger-Button mit Menüsteuerung verbinden. 4. aria-expanded beim Öffnen/Schließen aktualisieren. 5. Geschlossene Menülinks aus der Tastatur- navigation entfernen. 6. Mobilansicht und Untermenüs testen. WICHTIG: CSS allein stellt noch keine vollständige barrierefreie Menüfunktion bereit. ============================================================ */ /* * ============================================================ * AffiKSys – Korrektur der ausklappbaren Navigation * ============================================================ * * Das Menü wird unabhängig von der Bildschirmbreite * als fest positioniertes Panel dargestellt. * * Dadurch: * - öffnet es sich direkt unter dem Header, * - liegt es über dem Seiteninhalt, * - verschiebt es weder Banner noch Joomla-Beitrag, * - bleibt die bestehende Menügestaltung erhalten. * * Diese Regeln überschreiben gezielt die bisherigen * Positionierungseinstellungen. * ============================================================ */ .aks-site .aks-site-left { display: block; position: fixed; top: var(--aks-header-height, 74px); left: 0; width: min(85vw, 280px); max-height: calc(100dvh - var(--aks-header-height, 74px)); overflow-y: auto; z-index: 1000; min-height: 0; pointer-events: none; } .aks-site .aks-navigation { width: 100%; max-width: none; border-radius: 0 12px 12px 0; transform: translateX(-100%); } .aks-site.aks-nav-open .aks-site-left { pointer-events: auto; } .aks-site.aks-nav-open .aks-navigation { transform: translateX(0); }