Merge pull request 'feat(navbar): fixierte, tastaturbarrierefreie Navigationsleiste' (#4) from feature/navigationsleiste into dev
Reviewed-on: #4feature/Darstellung
commit
4cae17a55d
|
|
@ -2,6 +2,7 @@
|
|||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="/src/styles/navigation.css" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta
|
||||
name="description"
|
||||
|
|
@ -10,9 +11,7 @@
|
|||
<title>1:1-Ernährungsberatung</title>
|
||||
</head>
|
||||
<body>
|
||||
<header class="container">
|
||||
<a href="/" aria-label="Startseite">Ernährungsberatung</a>
|
||||
</header>
|
||||
<div id="navbar-placeholder"></div>
|
||||
|
||||
<main class="container">
|
||||
<h1>Ernährung, die zu dir passt.</h1>
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 63 KiB |
|
|
@ -0,0 +1,14 @@
|
|||
# Navigation einbinden
|
||||
|
||||
Füge an der gewünschten Stelle im HTML einen Platzhalter ein und binde CSS
|
||||
und JavaScript separat ein:
|
||||
|
||||
```html
|
||||
<div id="navbar-placeholder"></div>
|
||||
<link rel="stylesheet" href="/src/styles/navigation.css" />
|
||||
<script type="module" src="/src/components/navigationsbar/navigation.js"></script>
|
||||
```
|
||||
|
||||
Das Script lädt `navigation.html` und initialisiert die Navigation automatisch,
|
||||
`initNavbar()` muss nicht zusätzlich aufgerufen werden. Die Stylesheet-Datei wird
|
||||
nicht vom Script geladen und muss deshalb separat eingebunden werden.
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 63 KiB |
|
|
@ -0,0 +1,84 @@
|
|||
<a href="#main-content" class="skip-link">Zum Hauptinhalt springen</a>
|
||||
|
||||
<header class="navbar" id="site-navbar">
|
||||
<div class="navbar__inner">
|
||||
<div class="navbar__brand">
|
||||
<img src="/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"
|
||||
>Ernährungsberatung für Triathleten ab 50</span
|
||||
>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<button
|
||||
class="navbar__toggle"
|
||||
type="button"
|
||||
aria-controls="navbar-menu"
|
||||
aria-expanded="false"
|
||||
aria-label="Menü öffnen"
|
||||
>
|
||||
<span class="navbar__toggle-icon" aria-hidden="true"></span>
|
||||
</button>
|
||||
|
||||
<nav class="navbar__nav" aria-label="Hauptnavigation">
|
||||
<ul id="navbar-menu" class="navbar__menu">
|
||||
<li>
|
||||
<a href="/angebotsuebersicht.html" class="navbar__link"
|
||||
>Pakete</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#ernaehrung" class="navbar__link">Ernährung</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="/src/design/tri-hub-ernaehrungsberatung.html"
|
||||
class="navbar__link"
|
||||
>Beraterprofil</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="/src/design/tri-hub-ernaehrungsberatung.html"
|
||||
class="navbar__link"
|
||||
>FAQ</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#erfahrungen" class="navbar__link">Rezensionen</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="/src/design/tri-hub-ernaehrungsberatung.html"
|
||||
class="navbar__link"
|
||||
>Kontakt</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://tri-hub.de/"
|
||||
class="navbar__link navbar__link--home"
|
||||
>
|
||||
<span class="navbar__home-icon" aria-hidden="true">
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M4 10L12 3L20 10V20a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V10Z M9 21V14H15V21"
|
||||
stroke="currentColor"
|
||||
stroke-linejoin="round"
|
||||
stroke-linecap="round"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
Startseite
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
import navigationHtml from "./navigation.html?raw";
|
||||
|
||||
/**
|
||||
* Bindet das mit Vite gebündelte Navbar-Fragment (navigation.html) ein und
|
||||
* ersetzt damit den Platzhalter im Header der jeweiligen Seite.
|
||||
* Aufruf z. B. in main.js: initNavbar('#navbar-placeholder')
|
||||
*/
|
||||
export function initNavbar(placeholderSelector = "#navbar-placeholder") {
|
||||
const placeholder = document.querySelector(placeholderSelector);
|
||||
if (!placeholder) {
|
||||
console.warn("Navbar-Platzhalter nicht gefunden:", placeholderSelector);
|
||||
return;
|
||||
}
|
||||
|
||||
placeholder.outerHTML = navigationHtml; // Platzhalter durch echtes Navbar-Markup ersetzen
|
||||
setupBehavior();
|
||||
markCurrentPage();
|
||||
}
|
||||
|
||||
/**
|
||||
* Richtet alle interaktiven Funktionen der Navbar ein:
|
||||
* - 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;
|
||||
|
||||
toggle.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter" || e.key === " ") {
|
||||
openedViaKeyboard = true;
|
||||
}
|
||||
});
|
||||
|
||||
toggle.addEventListener("click", () => {
|
||||
const isOpen = nav.classList.toggle("is-open");
|
||||
toggle.setAttribute("aria-expanded", String(isOpen));
|
||||
toggle.setAttribute(
|
||||
"aria-label",
|
||||
isOpen ? "Menü schließen" : "Menü öffnen",
|
||||
);
|
||||
|
||||
if (isOpen && openedViaKeyboard) {
|
||||
const firstLink = menu.querySelector(".navbar__link");
|
||||
if (firstLink) firstLink.focus();
|
||||
}
|
||||
openedViaKeyboard = false;
|
||||
});
|
||||
|
||||
document.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Escape" && nav.classList.contains("is-open")) {
|
||||
nav.classList.remove("is-open");
|
||||
toggle.setAttribute("aria-expanded", "false");
|
||||
toggle.setAttribute("aria-label", "Menü öffnen");
|
||||
toggle.focus();
|
||||
}
|
||||
});
|
||||
|
||||
navbar.addEventListener("focusout", (e) => {
|
||||
const leavingNavbar = !navbar.contains(e.relatedTarget);
|
||||
if (leavingNavbar && nav.classList.contains("is-open")) {
|
||||
nav.classList.remove("is-open");
|
||||
toggle.setAttribute("aria-expanded", "false");
|
||||
toggle.setAttribute("aria-label", "Menü öffnen");
|
||||
}
|
||||
});
|
||||
|
||||
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");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => initNavbar());
|
||||
|
|
@ -1,3 +1,4 @@
|
|||
import "./styles.css";
|
||||
import "./styles/styles.css";
|
||||
import "./components/navigationsbar/navigation.js";
|
||||
|
||||
document.querySelector("#year").textContent = new Date().getFullYear();
|
||||
|
|
|
|||
|
|
@ -0,0 +1,236 @@
|
|||
/* 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 */
|
||||
:root {
|
||||
--nav-bg: #0d0d1a;
|
||||
--nav-border: rgba(248, 250, 252, 0.08);
|
||||
--nav-green: #10b981;
|
||||
--nav-white: #ffffff;
|
||||
--nav-light: #f8fafc;
|
||||
--nav-muted: #94a3b8;
|
||||
}
|
||||
|
||||
/* Verhindert, dass Padding die Breite von Elementen zusätzlich vergrößert */
|
||||
.navbar,
|
||||
.navbar *,
|
||||
.navbar *::before,
|
||||
.navbar *::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* ---------- Kriterium 1: durchgehend fixiert am oberen Bildschirmrand ---------- */
|
||||
.navbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 1000;
|
||||
border-bottom: 1px solid var(--nav-border);
|
||||
background: var(--nav-bg);
|
||||
font-family: "Inter", system-ui, sans-serif;
|
||||
}
|
||||
|
||||
.navbar__inner {
|
||||
width: 100%;
|
||||
min-height: 76px;
|
||||
padding: 0 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
/* ---------- Logo + Markenname (kein Link mehr, nur Anzeige) ---------- */
|
||||
.navbar__brand {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.navbar__logo-img {
|
||||
height: 40px;
|
||||
width: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.navbar__brand-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.navbar__brand-title {
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
color: var(--nav-muted);
|
||||
}
|
||||
|
||||
.navbar__brand-tagline {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
color: var(--nav-muted);
|
||||
}
|
||||
|
||||
/* ---------- Menüpunkte (rechts) ---------- */
|
||||
.navbar__menu {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: var(--nav-muted);
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.navbar__link {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
transition: color 0.2s ease;
|
||||
padding: 0.35rem 0.1rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.navbar__link:hover,
|
||||
.navbar__link[aria-current="page"] {
|
||||
color: var(--nav-white);
|
||||
}
|
||||
|
||||
/* ---------- "Startseite"-Button mit Haus-Icon, ganz rechts ---------- */
|
||||
.navbar__link--home {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 18px 6px 10px;
|
||||
border: 1px solid rgba(148, 163, 184, 0.3);
|
||||
border-radius: 999px;
|
||||
color: var(--nav-light);
|
||||
transition:
|
||||
border-color 0.2s ease,
|
||||
color 0.2s ease;
|
||||
}
|
||||
|
||||
.navbar__link--home:hover {
|
||||
border-color: rgba(16, 185, 129, 0.55);
|
||||
color: var(--nav-white);
|
||||
}
|
||||
|
||||
.navbar__home-icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #22d3ee;
|
||||
}
|
||||
|
||||
.navbar__home-icon svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
/* Linienstärke des Haus-Icons zentral hier steuern statt im SVG-Markup */
|
||||
.navbar__home-icon svg path {
|
||||
stroke-width: 1.5;
|
||||
}
|
||||
|
||||
/* ---------- Kriterium 2: barrierefreie Tastatursteuerung ---------- */
|
||||
.skip-link {
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
left: 0;
|
||||
background: var(--nav-green);
|
||||
color: #06130f;
|
||||
font-weight: 700;
|
||||
padding: 0.75rem 1rem;
|
||||
z-index: 1100;
|
||||
transition: top 0.2s ease;
|
||||
}
|
||||
|
||||
.skip-link:focus {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.navbar a:focus-visible,
|
||||
.navbar button:focus-visible {
|
||||
outline: 3px solid var(--nav-green);
|
||||
outline-offset: 2px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* ---------- Mobiler Hamburger-Button ---------- */
|
||||
.navbar__toggle {
|
||||
display: none;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.navbar__toggle-icon,
|
||||
.navbar__toggle-icon::before,
|
||||
.navbar__toggle-icon::after {
|
||||
display: block;
|
||||
width: 22px;
|
||||
height: 2px;
|
||||
background: var(--nav-white);
|
||||
position: relative;
|
||||
}
|
||||
.navbar__toggle-icon::before,
|
||||
.navbar__toggle-icon::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
}
|
||||
.navbar__toggle-icon::before {
|
||||
top: -7px;
|
||||
}
|
||||
.navbar__toggle-icon::after {
|
||||
top: 7px;
|
||||
}
|
||||
|
||||
@media (max-width: 1300px) {
|
||||
.navbar__toggle {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.navbar__nav {
|
||||
position: absolute;
|
||||
top: 76px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: var(--nav-bg);
|
||||
border-bottom: 1px solid var(--nav-border);
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navbar__nav.is-open {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.navbar__menu {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
padding: 1rem 20px;
|
||||
gap: 1rem;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.navbar__inner {
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.navbar__brand-tagline {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Platz für die fixierte Navbar */
|
||||
body {
|
||||
padding-top: 76px;
|
||||
}
|
||||
Loading…
Reference in New Issue