feat(navbar): fixierte, tastaturbarrierefreie Navigationsbar erledigt und bereit zum einbinden
parent
1c9ccfb794
commit
7059b41bfe
Binary file not shown.
|
After Width: | Height: | Size: 63 KiB |
|
|
@ -1,24 +1,23 @@
|
||||||
<!doctype html>
|
<a href="#main-content" class="skip-link">Zum Hauptinhalt springen</a>
|
||||||
<html lang="de">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
||||||
<meta
|
|
||||||
name="description"
|
|
||||||
content="Navigations-Bar für TriHub – fixiert und tastaturbarrierefrei."
|
|
||||||
/>
|
|
||||||
<title>TriHub Navigation</title>
|
|
||||||
<link rel="stylesheet" href="../../styles/navigation.css" />
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<a href="#main-content" class="skip-link">Zum Hauptinhalt springen</a>
|
|
||||||
|
|
||||||
<header class="navbar">
|
<header class="navbar" id="site-navbar">
|
||||||
<a href="/" class="navbar__logo" aria-label="TriHub Startseite">
|
<div class="navbar__inner">
|
||||||
<span class="navbar__logo-title">Tri-Hub</span>
|
<a
|
||||||
<span class="navbar__logo-tagline"
|
href="/src/design/tri-hub-ernaehrungsberatung.html"
|
||||||
|
class="navbar__brand"
|
||||||
|
aria-label="TriHub Startseite"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src="/src/components/navigationsbar/images/logo.png"
|
||||||
|
alt=""
|
||||||
|
class="navbar__logo-img"
|
||||||
|
/>
|
||||||
|
<span class="navbar__brand-text">
|
||||||
|
<span class="navbar__brand-title">TRI-HUB</span>
|
||||||
|
<span class="navbar__brand-tagline"
|
||||||
>Triathlon als sportliches Zuhause ab 50</span
|
>Triathlon als sportliches Zuhause ab 50</span
|
||||||
>
|
>
|
||||||
|
</span>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
|
|
@ -33,84 +32,25 @@
|
||||||
|
|
||||||
<nav class="navbar__nav" aria-label="Hauptnavigation">
|
<nav class="navbar__nav" aria-label="Hauptnavigation">
|
||||||
<ul id="navbar-menu" class="navbar__menu">
|
<ul id="navbar-menu" class="navbar__menu">
|
||||||
<li class="navbar__item navbar__item--has-dropdown">
|
<li><a href="/pakete.html" class="navbar__link">Pakete</a></li>
|
||||||
<button
|
|
||||||
class="navbar__link navbar__dropdown-toggle"
|
|
||||||
type="button"
|
|
||||||
aria-expanded="false"
|
|
||||||
aria-controls="dropdown-spektrum"
|
|
||||||
>
|
|
||||||
Triathlon Spektrum
|
|
||||||
<svg
|
|
||||||
class="navbar__chevron"
|
|
||||||
viewBox="0 0 12 8"
|
|
||||||
aria-hidden="true"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M1 1 L6 6 L11 1"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
stroke-width="1.5"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
<ul id="dropdown-spektrum" class="navbar__dropdown">
|
|
||||||
<li>
|
<li>
|
||||||
<a
|
<a href="#ernaehrung" class="navbar__link">Ernährung</a>
|
||||||
href="/schwimmen"
|
</li>
|
||||||
class="navbar__dropdown-link"
|
<li>
|
||||||
>Schwimmen</a
|
<a href="/beraterprofil.html" class="navbar__link"
|
||||||
|
>Beraterprofil</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li><a href="/faq.html" class="navbar__link">FAQ</a></li>
|
||||||
|
<li>
|
||||||
|
<a href="/rezensionen.html" class="navbar__link"
|
||||||
|
>Rezensionen</a
|
||||||
>
|
>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a
|
<a href="/kontakt.html" class="navbar__link">Kontakt</a>
|
||||||
href="/radfahren"
|
|
||||||
class="navbar__dropdown-link"
|
|
||||||
>Radfahren</a
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="/laufen" class="navbar__dropdown-link"
|
|
||||||
>Laufen</a
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li class="navbar__item">
|
|
||||||
<a href="/wissen-praxis" class="navbar__link"
|
|
||||||
>Wissen & Praxis</a
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<li class="navbar__item">
|
|
||||||
<a href="/community-blog" class="navbar__link"
|
|
||||||
>Community-Blog</a
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<li class="navbar__item">
|
|
||||||
<a href="/trainerteam" class="navbar__link"
|
|
||||||
>Trainerteam</a
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<li class="navbar__item">
|
|
||||||
<a
|
|
||||||
href="/login"
|
|
||||||
class="navbar__link navbar__link--login"
|
|
||||||
>Login</a
|
|
||||||
>
|
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</div>
|
||||||
|
</header>
|
||||||
<main
|
|
||||||
id="main-content"
|
|
||||||
class="container"
|
|
||||||
style="padding: 6rem 2rem 2rem; color: #fff"
|
|
||||||
>
|
|
||||||
<h1>Vorschau der Navigation</h1>
|
|
||||||
<p>Dieser Bereich dient nur zum Testen der Navbar.</p>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<script src="./navigation.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
|
||||||
|
|
@ -1,51 +1,111 @@
|
||||||
(function () {
|
/**
|
||||||
var toggle = document.querySelector(".navbar__toggle");
|
* Lädt das Navbar-Fragment (navigation.html) per fetch() und ersetzt
|
||||||
var nav = document.querySelector(".navbar__nav");
|
* damit den Platzhalter im Header der jeweiligen Seite.
|
||||||
var dropdownToggle = document.querySelector(".navbar__dropdown-toggle");
|
*/
|
||||||
var dropdown = document.querySelector("#dropdown-spektrum");
|
export function initNavbar(placeholderSelector = "#navbar-placeholder") {
|
||||||
|
const placeholder = document.querySelector(placeholderSelector);
|
||||||
|
if (!placeholder) {
|
||||||
|
console.warn("Navbar-Platzhalter nicht gefunden:", placeholderSelector);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
if (!toggle || !nav || !dropdownToggle || !dropdown) return;
|
fetch(new URL("./navigation.html", import.meta.url))
|
||||||
|
.then((res) => res.text())
|
||||||
|
.then((html) => {
|
||||||
|
placeholder.outerHTML = html; // Platzhalter durch echtes Navbar-Markup ersetzen
|
||||||
|
setupBehavior();
|
||||||
|
markCurrentPage();
|
||||||
|
})
|
||||||
|
.catch((err) =>
|
||||||
|
console.error("Navbar konnte nicht geladen werden:", err),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
// Mobiles Menü öffnen/schließen
|
/**
|
||||||
toggle.addEventListener("click", function () {
|
* Richtet alle interaktiven Funktionen der Navbar ein:
|
||||||
var isOpen = nav.classList.toggle("is-open");
|
* - Mobiles Menü öffnen/schließen per Klick
|
||||||
|
* - Automatischer Fokus auf ersten Link, wenn per Tastatur geöffnet
|
||||||
|
* - Escape schließt das Menü und gibt den Fokus zurück
|
||||||
|
* - Menü schließt sich, wenn der Fokus die Navbar per Tab verlässt
|
||||||
|
* - Klick außerhalb der Navbar schließt das Menü (Maus/Touch)
|
||||||
|
*/
|
||||||
|
export function setupBehavior() {
|
||||||
|
const navbar = document.querySelector(".navbar");
|
||||||
|
const toggle = document.querySelector(".navbar__toggle");
|
||||||
|
const nav = document.querySelector(".navbar__nav");
|
||||||
|
const menu = document.querySelector(".navbar__menu");
|
||||||
|
if (!navbar || !toggle || !nav || !menu) return;
|
||||||
|
|
||||||
|
let openedViaKeyboard = false;
|
||||||
|
|
||||||
|
// Merken, ob der Toggle-Button per Tastatur (statt Maus) ausgelöst wurde
|
||||||
|
toggle.addEventListener("keydown", (e) => {
|
||||||
|
if (e.key === "Enter" || e.key === " ") {
|
||||||
|
openedViaKeyboard = true;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Menü auf-/zuklappen; funktioniert nativ per Klick UND per Enter/Space,
|
||||||
|
// da .navbar__toggle ein echtes <button>-Element ist
|
||||||
|
toggle.addEventListener("click", () => {
|
||||||
|
const isOpen = nav.classList.toggle("is-open");
|
||||||
toggle.setAttribute("aria-expanded", String(isOpen));
|
toggle.setAttribute("aria-expanded", String(isOpen));
|
||||||
toggle.setAttribute(
|
toggle.setAttribute(
|
||||||
"aria-label",
|
"aria-label",
|
||||||
isOpen ? "Menü schließen" : "Menü öffnen",
|
isOpen ? "Menü schließen" : "Menü öffnen",
|
||||||
);
|
);
|
||||||
});
|
|
||||||
|
|
||||||
// Dropdown "Triathlon Spektrum" per Klick öffnen/schließen
|
if (isOpen && openedViaKeyboard) {
|
||||||
dropdownToggle.addEventListener("click", function () {
|
// Bei Tastatur-Öffnung direkt in den ersten Menüpunkt springen
|
||||||
var isOpen = dropdown.classList.toggle("is-open");
|
const firstLink = menu.querySelector(".navbar__link");
|
||||||
dropdownToggle.setAttribute("aria-expanded", String(isOpen));
|
if (firstLink) firstLink.focus();
|
||||||
});
|
|
||||||
|
|
||||||
// Escape schließt Dropdown/Menü, Fokus geht zurück auf den Auslöser
|
|
||||||
document.addEventListener("keydown", function (e) {
|
|
||||||
if (e.key !== "Escape") return;
|
|
||||||
|
|
||||||
if (dropdown.classList.contains("is-open")) {
|
|
||||||
dropdown.classList.remove("is-open");
|
|
||||||
dropdownToggle.setAttribute("aria-expanded", "false");
|
|
||||||
dropdownToggle.focus();
|
|
||||||
}
|
}
|
||||||
if (nav.classList.contains("is-open")) {
|
openedViaKeyboard = false;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Escape schließt das Menü, Fokus geht zurück auf den Toggle-Button
|
||||||
|
document.addEventListener("keydown", (e) => {
|
||||||
|
if (e.key === "Escape" && nav.classList.contains("is-open")) {
|
||||||
nav.classList.remove("is-open");
|
nav.classList.remove("is-open");
|
||||||
toggle.setAttribute("aria-expanded", "false");
|
toggle.setAttribute("aria-expanded", "false");
|
||||||
|
toggle.setAttribute("aria-label", "Menü öffnen");
|
||||||
toggle.focus();
|
toggle.focus();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// Klick außerhalb schließt das Dropdown
|
// Schließt das Menü automatisch, sobald der Fokus die Navbar per Tab verlässt
|
||||||
document.addEventListener("click", function (e) {
|
navbar.addEventListener("focusout", (e) => {
|
||||||
if (
|
const leavingNavbar = !navbar.contains(e.relatedTarget);
|
||||||
!dropdown.contains(e.target) &&
|
if (leavingNavbar && nav.classList.contains("is-open")) {
|
||||||
!dropdownToggle.contains(e.target)
|
nav.classList.remove("is-open");
|
||||||
) {
|
toggle.setAttribute("aria-expanded", "false");
|
||||||
dropdown.classList.remove("is-open");
|
toggle.setAttribute("aria-label", "Menü öffnen");
|
||||||
dropdownToggle.setAttribute("aria-expanded", "false");
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
})();
|
|
||||||
|
// Klick außerhalb der Navbar schließt das mobile Menü (Maus/Touch-Nutzer)
|
||||||
|
document.addEventListener("click", (e) => {
|
||||||
|
if (!navbar.contains(e.target) && nav.classList.contains("is-open")) {
|
||||||
|
nav.classList.remove("is-open");
|
||||||
|
toggle.setAttribute("aria-expanded", "false");
|
||||||
|
toggle.setAttribute("aria-label", "Menü öffnen");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Markiert den Menüpunkt der aktuell geöffneten Seite mit aria-current="page",
|
||||||
|
* damit er optisch hervorgehoben wird (siehe .navbar__link[aria-current="page"] in der CSS).
|
||||||
|
*/
|
||||||
|
export function markCurrentPage() {
|
||||||
|
const links = document.querySelectorAll(".navbar__link");
|
||||||
|
const current = window.location.pathname.replace(/\/index\.html$/, "/");
|
||||||
|
links.forEach((link) => {
|
||||||
|
if (link.getAttribute("href") === current) {
|
||||||
|
link.setAttribute("aria-current", "page");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Startet die Navbar automatisch, sobald die Seite geladen ist
|
||||||
|
document.addEventListener("DOMContentLoaded", () => initNavbar());
|
||||||
|
|
|
||||||
|
|
@ -1,14 +1,23 @@
|
||||||
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Inter:wght@400;500;600&display=swap");
|
/* Google Fonts: Inter für Fließtext, Playfair Display für Akzente (falls später gebraucht) */
|
||||||
|
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Inter:wght@400;500;600;700&display=swap");
|
||||||
|
|
||||||
* {
|
/* Zentrale Design-Werte der Navbar, passend zum TriHub-Farbschema */
|
||||||
box-sizing: border-box;
|
:root {
|
||||||
|
--nav-bg: #0d0d1a;
|
||||||
|
--nav-border: rgba(248, 250, 252, 0.08);
|
||||||
|
--nav-green: #10b981;
|
||||||
|
--nav-white: #ffffff;
|
||||||
|
--nav-light: #f8fafc;
|
||||||
|
--nav-muted: #94a3b8;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
/* Verhindert, dass Padding die Breite von Elementen zusätzlich vergrößert
|
||||||
margin: 0;
|
(ohne das würde die Navbar breiter als der Bildschirm werden) */
|
||||||
padding-top: 72px; /* Platz für die fixierte Navbar */
|
.navbar,
|
||||||
background-color: #0d0d1a;
|
.navbar *,
|
||||||
font-family: "Inter", system-ui, sans-serif;
|
.navbar *::before,
|
||||||
|
.navbar *::after {
|
||||||
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ---------- Kriterium 1: durchgehend fixiert am oberen Bildschirmrand ---------- */
|
/* ---------- Kriterium 1: durchgehend fixiert am oberen Bildschirmrand ---------- */
|
||||||
|
|
@ -17,132 +26,95 @@ body {
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
z-index: 1000;
|
z-index: 1000; /* bleibt über allen anderen Inhalten */
|
||||||
|
border-bottom: 1px solid var(--nav-border);
|
||||||
|
background: var(--nav-bg);
|
||||||
|
font-family: "Inter", system-ui, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Innerer Container: Logo links, Menü rechts, mit etwas Innenabstand */
|
||||||
|
.navbar__inner {
|
||||||
|
width: 100%;
|
||||||
|
min-height: 76px;
|
||||||
|
padding: 0 20px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
height: 72px;
|
gap: 16px;
|
||||||
padding: 0 2rem;
|
|
||||||
background-color: #0d0d1a;
|
|
||||||
border-bottom: 1px solid #1a1a2e;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ---------- Logo ---------- */
|
/* ---------- Logo + Markenname (klickbarer Link, ganz links) ---------- */
|
||||||
.navbar__logo {
|
.navbar__brand {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
text-decoration: none;
|
||||||
|
flex-shrink: 0; /* schrumpft nie, auch wenn das Menü eng wird */
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar__logo-img {
|
||||||
|
height: 40px;
|
||||||
|
width: auto;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar__brand-text {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
line-height: 1.2;
|
line-height: 1.25;
|
||||||
color: #fff;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar__logo-title {
|
.navbar__brand-title {
|
||||||
font-family: "Playfair Display", serif;
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: 1.1rem;
|
|
||||||
letter-spacing: 0.05em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar__logo-tagline {
|
|
||||||
font-size: 0.7rem;
|
font-size: 0.7rem;
|
||||||
color: #94a3b8;
|
font-weight: 600;
|
||||||
|
letter-spacing: 0.14em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--nav-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ---------- Menü ---------- */
|
.navbar__brand-tagline {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--nav-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- Menüpunkte (ganz rechts) ---------- */
|
||||||
.navbar__menu {
|
.navbar__menu {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 2rem;
|
gap: 14px;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
color: var(--nav-muted);
|
||||||
|
font-size: 0.85rem;
|
||||||
|
font-weight: 500;
|
||||||
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar__link {
|
.navbar__link {
|
||||||
display: flex;
|
color: inherit;
|
||||||
align-items: center;
|
|
||||||
gap: 0.35rem;
|
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
color: #f8fafc;
|
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
font-size: 0.95rem;
|
transition: color 0.2s ease;
|
||||||
font-family: inherit;
|
padding: 0.35rem 0.1rem;
|
||||||
cursor: pointer;
|
white-space: nowrap; /* verhindert Zeilenumbruch mitten im Linktext */
|
||||||
padding: 0.5rem 0.25rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar__link:hover {
|
.navbar__link:hover,
|
||||||
color: #10b981;
|
.navbar__link[aria-current="page"] {
|
||||||
}
|
color: var(--nav-white);
|
||||||
|
|
||||||
.navbar__link--login {
|
|
||||||
padding: 0.5rem 1.25rem;
|
|
||||||
border: 1px solid #10b981;
|
|
||||||
border-radius: 999px;
|
|
||||||
color: #10b981;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar__link--login:hover {
|
|
||||||
background: #10b981;
|
|
||||||
color: #0d0d1a;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ---------- Dropdown ---------- */
|
|
||||||
.navbar__item--has-dropdown {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar__chevron {
|
|
||||||
width: 10px;
|
|
||||||
height: 6px;
|
|
||||||
transition: transform 0.15s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar__dropdown-toggle[aria-expanded="true"] .navbar__chevron {
|
|
||||||
transform: rotate(180deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar__dropdown {
|
|
||||||
display: none;
|
|
||||||
position: absolute;
|
|
||||||
top: calc(100% + 0.5rem);
|
|
||||||
left: 0;
|
|
||||||
min-width: 180px;
|
|
||||||
background: #1a1a2e;
|
|
||||||
border: 1px solid #262640;
|
|
||||||
border-radius: 8px;
|
|
||||||
list-style: none;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar__dropdown.is-open {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar__dropdown-link {
|
|
||||||
display: block;
|
|
||||||
padding: 0.5rem 0.75rem;
|
|
||||||
color: #f8fafc;
|
|
||||||
text-decoration: none;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar__dropdown-link:hover {
|
|
||||||
background: #0d0d1a;
|
|
||||||
color: #10b981;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ---------- Kriterium 2: barrierefreie Tastatursteuerung ---------- */
|
/* ---------- Kriterium 2: barrierefreie Tastatursteuerung ---------- */
|
||||||
|
|
||||||
|
/* Skip-Link: unsichtbar, bis er per Tab fokussiert wird */
|
||||||
.skip-link {
|
.skip-link {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -40px;
|
top: -40px;
|
||||||
left: 0;
|
left: 0;
|
||||||
background: #10b981;
|
background: var(--nav-green);
|
||||||
color: #0d0d1a;
|
color: #06130f;
|
||||||
font-weight: 600;
|
font-weight: 700;
|
||||||
padding: 0.75rem 1rem;
|
padding: 0.75rem 1rem;
|
||||||
z-index: 1100;
|
z-index: 1100;
|
||||||
transition: top 0.2s ease;
|
transition: top 0.2s ease;
|
||||||
|
|
@ -152,14 +124,15 @@ body {
|
||||||
top: 0;
|
top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Sichtbarer, einheitlicher Fokus-Ring für alle interaktiven Elemente */
|
||||||
.navbar a:focus-visible,
|
.navbar a:focus-visible,
|
||||||
.navbar button:focus-visible {
|
.navbar button:focus-visible {
|
||||||
outline: 3px solid #10b981;
|
outline: 3px solid var(--nav-green);
|
||||||
outline-offset: 2px;
|
outline-offset: 2px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ---------- Mobile Toggle ---------- */
|
/* ---------- Mobiler Hamburger-Button (nur auf schmalen Bildschirmen sichtbar) ---------- */
|
||||||
.navbar__toggle {
|
.navbar__toggle {
|
||||||
display: none;
|
display: none;
|
||||||
background: none;
|
background: none;
|
||||||
|
|
@ -172,52 +145,65 @@ body {
|
||||||
.navbar__toggle-icon::before,
|
.navbar__toggle-icon::before,
|
||||||
.navbar__toggle-icon::after {
|
.navbar__toggle-icon::after {
|
||||||
display: block;
|
display: block;
|
||||||
width: 24px;
|
width: 22px;
|
||||||
height: 2px;
|
height: 2px;
|
||||||
background: #fff;
|
background: var(--nav-white);
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar__toggle-icon::before,
|
.navbar__toggle-icon::before,
|
||||||
.navbar__toggle-icon::after {
|
.navbar__toggle-icon::after {
|
||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
.navbar__toggle-icon::before {
|
.navbar__toggle-icon::before {
|
||||||
top: -8px;
|
top: -7px;
|
||||||
}
|
}
|
||||||
.navbar__toggle-icon::after {
|
.navbar__toggle-icon::after {
|
||||||
top: 8px;
|
top: 7px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 860px) {
|
/* Ab dieser Breite wechselt die Navbar auf den Hamburger,
|
||||||
|
damit die Menüpunkte nie über den Bildschirmrand hinausragen */
|
||||||
|
@media (max-width: 1300px) {
|
||||||
.navbar__toggle {
|
.navbar__toggle {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar__nav {
|
.navbar__nav {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 72px;
|
top: 76px;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
background: #0d0d1a;
|
background: var(--nav-bg);
|
||||||
border-bottom: 1px solid #1a1a2e;
|
border-bottom: 1px solid var(--nav-border);
|
||||||
display: none;
|
display: none; /* standardmäßig eingeklappt */
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar__nav.is-open {
|
.navbar__nav.is-open {
|
||||||
display: block;
|
display: block; /* wird per JS umgeschaltet */
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar__menu {
|
.navbar__menu {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
padding: 1rem 2rem;
|
padding: 1rem 20px;
|
||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
}
|
font-size: 0.95rem;
|
||||||
|
|
||||||
.navbar__dropdown {
|
|
||||||
position: static;
|
|
||||||
margin-top: 0.5rem;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Auf sehr schmalen Bildschirmen den Untertitel ausblenden, spart Platz */
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
.navbar__inner {
|
||||||
|
padding: 0 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar__brand-tagline {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Platz für die fixierte Navbar, damit sie keinen Inhalt verdeckt */
|
||||||
|
body {
|
||||||
|
padding-top: 76px;
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue