Compare commits
No commits in common. "feature/navigationsleiste" and "main" have entirely different histories.
feature/na
...
main
|
|
@ -1,116 +0,0 @@
|
|||
<!doctype html>
|
||||
<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">
|
||||
<a href="/" class="navbar__logo" aria-label="TriHub Startseite">
|
||||
<span class="navbar__logo-title">Tri-Hub</span>
|
||||
<span class="navbar__logo-tagline"
|
||||
>Triathlon als sportliches Zuhause ab 50</span
|
||||
>
|
||||
</a>
|
||||
|
||||
<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 class="navbar__item navbar__item--has-dropdown">
|
||||
<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>
|
||||
<a
|
||||
href="/schwimmen"
|
||||
class="navbar__dropdown-link"
|
||||
>Schwimmen</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<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>
|
||||
</ul>
|
||||
</nav>
|
||||
</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 +0,0 @@
|
|||
(function () {
|
||||
var toggle = document.querySelector(".navbar__toggle");
|
||||
var nav = document.querySelector(".navbar__nav");
|
||||
var dropdownToggle = document.querySelector(".navbar__dropdown-toggle");
|
||||
var dropdown = document.querySelector("#dropdown-spektrum");
|
||||
|
||||
if (!toggle || !nav || !dropdownToggle || !dropdown) return;
|
||||
|
||||
// Mobiles Menü öffnen/schließen
|
||||
toggle.addEventListener("click", function () {
|
||||
var isOpen = nav.classList.toggle("is-open");
|
||||
toggle.setAttribute("aria-expanded", String(isOpen));
|
||||
toggle.setAttribute(
|
||||
"aria-label",
|
||||
isOpen ? "Menü schließen" : "Menü öffnen",
|
||||
);
|
||||
});
|
||||
|
||||
// Dropdown "Triathlon Spektrum" per Klick öffnen/schließen
|
||||
dropdownToggle.addEventListener("click", function () {
|
||||
var isOpen = dropdown.classList.toggle("is-open");
|
||||
dropdownToggle.setAttribute("aria-expanded", String(isOpen));
|
||||
});
|
||||
|
||||
// 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")) {
|
||||
nav.classList.remove("is-open");
|
||||
toggle.setAttribute("aria-expanded", "false");
|
||||
toggle.focus();
|
||||
}
|
||||
});
|
||||
|
||||
// Klick außerhalb schließt das Dropdown
|
||||
document.addEventListener("click", function (e) {
|
||||
if (
|
||||
!dropdown.contains(e.target) &&
|
||||
!dropdownToggle.contains(e.target)
|
||||
) {
|
||||
dropdown.classList.remove("is-open");
|
||||
dropdownToggle.setAttribute("aria-expanded", "false");
|
||||
}
|
||||
});
|
||||
})();
|
||||
|
|
@ -1,223 +0,0 @@
|
|||
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Inter:wght@400;500;600&display=swap");
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding-top: 72px; /* Platz für die fixierte Navbar */
|
||||
background-color: #0d0d1a;
|
||||
font-family: "Inter", system-ui, sans-serif;
|
||||
}
|
||||
|
||||
/* ---------- Kriterium 1: durchgehend fixiert am oberen Bildschirmrand ---------- */
|
||||
.navbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 72px;
|
||||
padding: 0 2rem;
|
||||
background-color: #0d0d1a;
|
||||
border-bottom: 1px solid #1a1a2e;
|
||||
}
|
||||
|
||||
/* ---------- Logo ---------- */
|
||||
.navbar__logo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
line-height: 1.2;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.navbar__logo-title {
|
||||
font-family: "Playfair Display", serif;
|
||||
font-weight: 700;
|
||||
font-size: 1.1rem;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.navbar__logo-tagline {
|
||||
font-size: 0.7rem;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
/* ---------- Menü ---------- */
|
||||
.navbar__menu {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2rem;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.navbar__link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
background: none;
|
||||
border: none;
|
||||
color: #f8fafc;
|
||||
text-decoration: none;
|
||||
font-size: 0.95rem;
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
padding: 0.5rem 0.25rem;
|
||||
}
|
||||
|
||||
.navbar__link:hover {
|
||||
color: #10b981;
|
||||
}
|
||||
|
||||
.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 ---------- */
|
||||
.skip-link {
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
left: 0;
|
||||
background: #10b981;
|
||||
color: #0d0d1a;
|
||||
font-weight: 600;
|
||||
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 #10b981;
|
||||
outline-offset: 2px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* ---------- Mobile Toggle ---------- */
|
||||
.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: 24px;
|
||||
height: 2px;
|
||||
background: #fff;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.navbar__toggle-icon::before,
|
||||
.navbar__toggle-icon::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
}
|
||||
.navbar__toggle-icon::before {
|
||||
top: -8px;
|
||||
}
|
||||
.navbar__toggle-icon::after {
|
||||
top: 8px;
|
||||
}
|
||||
|
||||
@media (max-width: 860px) {
|
||||
.navbar__toggle {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.navbar__nav {
|
||||
position: absolute;
|
||||
top: 72px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #0d0d1a;
|
||||
border-bottom: 1px solid #1a1a2e;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navbar__nav.is-open {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.navbar__menu {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
padding: 1rem 2rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.navbar__dropdown {
|
||||
position: static;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue