From fd45e3d152d1cf19d6765feca61df77a72b3fac1 Mon Sep 17 00:00:00 2001 From: David Kertzscher Date: Wed, 17 Jun 2026 13:14:11 +0000 Subject: [PATCH] =?UTF-8?q?Nav:=20Start-Dropdown=20mit=20Untermen=C3=BC=20?= =?UTF-8?q?(Hover),=20Hauptseiten=20bleiben=20oben?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- api.html | 18 +++++--- css/style.css | 113 ++++++++++++++++++++++++++++++++++++++++++++++ eis_projekt.html | 18 +++++--- galerie.html | 18 +++++--- impressum.html | 18 +++++--- index.html | 18 +++++--- js/script.js | 27 +++++++++++ kanban.html | 18 +++++--- kontakt.html | 21 ++++++--- notenrechner.html | 18 +++++--- quiz.html | 18 +++++--- team.html | 18 +++++--- textanalyse.html | 18 +++++--- ueber_uns.html | 18 +++++--- 14 files changed, 275 insertions(+), 84 deletions(-) diff --git a/api.html b/api.html index 3a1e2be..247756a 100644 --- a/api.html +++ b/api.html @@ -29,18 +29,22 @@ diff --git a/css/style.css b/css/style.css index 83b251f..141b77c 100644 --- a/css/style.css +++ b/css/style.css @@ -534,6 +534,80 @@ nav { display: flex; gap: 1.5rem; flex-wrap: wrap; + align-items: center; +} + +/* ── Dropdown "Start" ── */ +.nav-dropdown { + position: relative; +} + +.nav-dropdown-trigger { + display: flex; + align-items: center; + gap: 0.2rem; + cursor: pointer; + white-space: nowrap; +} + +.nav-dropdown-menu { + display: none; + position: absolute; + top: calc(100% + 8px); + left: 0; + min-width: 170px; + background: rgba(255,255,255,0.98); + border: 2px solid rgba(255,105,180,0.35); + border-radius: 14px; + padding: 0.4rem; + flex-direction: column; + gap: 0.1rem; + box-shadow: 0 8px 28px rgba(255,20,147,0.15); + z-index: 200; + backdrop-filter: blur(14px); +} + +.nav-dropdown:hover .nav-dropdown-menu, +.nav-dropdown.open .nav-dropdown-menu { + display: flex; +} + +.nav-dropdown-menu a { + padding: 0.55rem 0.9rem; + border-radius: 9px; + font-size: 0.92rem; + color: #ff1493; + white-space: nowrap; +} + +.nav-dropdown-menu a:hover { + background: rgba(255,20,147,0.1); +} + +.nav-dropdown-menu a.active { + background: linear-gradient(135deg, #ff1493, #ff69b4); + color: #fff; + box-shadow: none; +} + +/* Dark Mode dropdown */ +body.dark .nav-dropdown-menu { + background: rgba(15,23,42,0.97); + border-color: #334155; + box-shadow: 0 8px 28px rgba(0,0,0,0.4); +} + +body.dark .nav-dropdown-menu a { + color: #93c5fd; +} + +body.dark .nav-dropdown-menu a:hover { + background: rgba(96,165,250,0.15); +} + +body.dark .nav-dropdown-menu a.active { + background: linear-gradient(135deg, #3b82f6, #1e40af); + color: #fff; } nav a { @@ -2702,6 +2776,40 @@ body.dark .nav-toggle span { text-decoration: none; } + /* Mobile Dropdown: immer ausgeklappt im Hamburger-Menü */ + nav#main-nav .nav-dropdown { + position: static; + } + + nav#main-nav .nav-dropdown-trigger { + font-weight: 700; + color: #ff1493; + padding: 0.75rem 1rem; + border-radius: 10px; + pointer-events: none; /* Im Hamburger nicht klickbar – immer offen */ + } + + nav#main-nav .nav-dropdown-trigger::after { + display: none; + } + + nav#main-nav .nav-dropdown-menu { + display: flex; + position: static; + background: rgba(255,20,147,0.04); + border: 1px solid rgba(255,105,180,0.2); + border-radius: 10px; + padding: 0.3rem 0.3rem 0.3rem 0.8rem; + box-shadow: none; + min-width: unset; + margin-bottom: 0.25rem; + } + + nav#main-nav .nav-dropdown-menu a { + font-size: 0.95rem; + padding: 0.55rem 0.75rem; + } + body.dark nav#main-nav { background: rgba(15, 23, 42, 0.98); border-color: #334155; @@ -2713,6 +2821,11 @@ body.dark .nav-toggle span { background: rgba(96, 165, 250, 0.15); } + body.dark nav#main-nav .nav-dropdown-menu { + background: rgba(96,165,250,0.05); + border-color: #334155; + } + /* Typography */ h1 { font-size: 1.8rem; } h2 { font-size: 1.5rem; } diff --git a/eis_projekt.html b/eis_projekt.html index f85d1b4..595bcac 100644 --- a/eis_projekt.html +++ b/eis_projekt.html @@ -29,18 +29,22 @@ diff --git a/galerie.html b/galerie.html index a5a07dd..d8811e3 100644 --- a/galerie.html +++ b/galerie.html @@ -29,18 +29,22 @@ diff --git a/impressum.html b/impressum.html index c1ebfb1..956e38c 100644 --- a/impressum.html +++ b/impressum.html @@ -29,18 +29,22 @@ diff --git a/index.html b/index.html index 5948b17..7b492b3 100644 --- a/index.html +++ b/index.html @@ -29,18 +29,22 @@ diff --git a/js/script.js b/js/script.js index 308db4a..88d73f0 100644 --- a/js/script.js +++ b/js/script.js @@ -78,6 +78,33 @@ document.addEventListener('DOMContentLoaded', function() { }); } + // =========================== + // Dropdown "Start" – Touch/Click Toggle + // =========================== + const dropdowns = document.querySelectorAll('.nav-dropdown'); + dropdowns.forEach(function(dd) { + const trigger = dd.querySelector('.nav-dropdown-trigger'); + if (!trigger) return; + // Auf Touch-Geräten: Klick toggelt das Dropdown + trigger.addEventListener('click', function(e) { + // Nur wenn hover nicht greift (touch) oder Desktop-Klick direkt auf Trigger + const isMobile = window.matchMedia('(max-width: 768px)').matches; + if (!isMobile) { + // Desktop: navigate to index.html if it's a link click + return; // hover handles it + } + e.preventDefault(); + // Im Hamburger-Menü: nichts tun (always open via CSS) + }); + + // Desktop: Dropdown per Klick schließen wenn man außerhalb klickt + document.addEventListener('click', function(e) { + if (!dd.contains(e.target)) { + dd.classList.remove('open'); + } + }); + }); + // =========================== // Active Navigation Highlighting // =========================== diff --git a/kanban.html b/kanban.html index 67d6f6d..47236bb 100644 --- a/kanban.html +++ b/kanban.html @@ -27,18 +27,22 @@ diff --git a/kontakt.html b/kontakt.html index f061761..fab3cf3 100644 --- a/kontakt.html +++ b/kontakt.html @@ -29,15 +29,22 @@ diff --git a/notenrechner.html b/notenrechner.html index 15c913c..1d76ed0 100644 --- a/notenrechner.html +++ b/notenrechner.html @@ -29,18 +29,22 @@ diff --git a/quiz.html b/quiz.html index 68ae0aa..2060d43 100644 --- a/quiz.html +++ b/quiz.html @@ -29,18 +29,22 @@ diff --git a/team.html b/team.html index 5cc2e04..1dbe965 100644 --- a/team.html +++ b/team.html @@ -29,18 +29,22 @@ diff --git a/textanalyse.html b/textanalyse.html index eb6f5f2..8f6ceb4 100644 --- a/textanalyse.html +++ b/textanalyse.html @@ -29,18 +29,22 @@ diff --git a/ueber_uns.html b/ueber_uns.html index 5bf1728..3463f11 100644 --- a/ueber_uns.html +++ b/ueber_uns.html @@ -29,18 +29,22 @@