Nav: Start-Dropdown mit Untermenü (Hover), Hauptseiten bleiben oben

This commit is contained in:
David Kertzscher 2026-06-17 13:14:11 +00:00
parent 7bdacc903c
commit fd45e3d152
14 changed files with 275 additions and 84 deletions

View file

@ -29,18 +29,22 @@
<span></span><span></span><span></span>
</button>
<nav id="main-nav">
<a href="index.html">Start</a>
<a href="ueber_uns.html">Über uns</a>
<a href="eis_projekt.html">Projekt</a>
<a href="team.html">Team</a>
<a href="galerie.html">Galerie</a>
<div class="nav-dropdown">
<a href="index.html" class="nav-dropdown-trigger">Start ▾</a>
<div class="nav-dropdown-menu">
<a href="ueber_uns.html">Über uns</a>
<a href="eis_projekt.html">Projekt</a>
<a href="team.html">Team</a>
<a href="galerie.html">Galerie</a>
<a href="kontakt.html">Kontakt</a>
<a href="impressum.html">Impressum</a>
</div>
</div>
<a href="notenrechner.html">Notenrechner</a>
<a href="textanalyse.html">Textanalyse</a>
<a href="api.html" class="active">API Demo</a>
<a href="kanban.html">Kanban</a>
<a href="quiz.html">Quiz</a>
<a href="kontakt.html">Kontakt</a>
<a href="impressum.html">Impressum</a>
</nav>
</div>
</header>

View file

@ -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; }

View file

@ -29,18 +29,22 @@
<span></span><span></span><span></span>
</button>
<nav id="main-nav">
<a href="index.html">Start</a>
<a href="ueber_uns.html">Über uns</a>
<a href="eis_projekt.html" class="active">Projekt</a>
<a href="team.html">Team</a>
<a href="galerie.html">Galerie</a>
<div class="nav-dropdown">
<a href="index.html" class="active" class="nav-dropdown-trigger">Start ▾</a>
<div class="nav-dropdown-menu">
<a href="ueber_uns.html">Über uns</a>
<a href="eis_projekt.html" class="active">Projekt</a>
<a href="team.html">Team</a>
<a href="galerie.html">Galerie</a>
<a href="kontakt.html">Kontakt</a>
<a href="impressum.html">Impressum</a>
</div>
</div>
<a href="notenrechner.html">Notenrechner</a>
<a href="textanalyse.html">Textanalyse</a>
<a href="api.html">API Demo</a>
<a href="kanban.html">Kanban</a>
<a href="quiz.html">Quiz</a>
<a href="kontakt.html">Kontakt</a>
<a href="impressum.html">Impressum</a>
</nav>
</div>
</header>

View file

@ -29,18 +29,22 @@
<span></span><span></span><span></span>
</button>
<nav id="main-nav">
<a href="index.html">Start</a>
<a href="ueber_uns.html">Über uns</a>
<a href="eis_projekt.html">Projekt</a>
<a href="team.html">Team</a>
<a href="galerie.html" class="active">Galerie</a>
<div class="nav-dropdown">
<a href="index.html" class="active" class="nav-dropdown-trigger">Start ▾</a>
<div class="nav-dropdown-menu">
<a href="ueber_uns.html">Über uns</a>
<a href="eis_projekt.html">Projekt</a>
<a href="team.html">Team</a>
<a href="galerie.html" class="active">Galerie</a>
<a href="kontakt.html">Kontakt</a>
<a href="impressum.html">Impressum</a>
</div>
</div>
<a href="notenrechner.html">Notenrechner</a>
<a href="textanalyse.html">Textanalyse</a>
<a href="api.html">API Demo</a>
<a href="kanban.html">Kanban</a>
<a href="quiz.html">Quiz</a>
<a href="kontakt.html">Kontakt</a>
<a href="impressum.html">Impressum</a>
</nav>
</div>
</header>

View file

@ -29,18 +29,22 @@
<span></span><span></span><span></span>
</button>
<nav id="main-nav">
<a href="index.html">Start</a>
<a href="ueber_uns.html">Über uns</a>
<a href="eis_projekt.html">Projekt</a>
<a href="team.html">Team</a>
<a href="galerie.html">Galerie</a>
<div class="nav-dropdown">
<a href="index.html" class="active" class="nav-dropdown-trigger">Start ▾</a>
<div class="nav-dropdown-menu">
<a href="ueber_uns.html">Über uns</a>
<a href="eis_projekt.html">Projekt</a>
<a href="team.html">Team</a>
<a href="galerie.html">Galerie</a>
<a href="kontakt.html">Kontakt</a>
<a href="impressum.html" class="active">Impressum</a>
</div>
</div>
<a href="notenrechner.html">Notenrechner</a>
<a href="textanalyse.html">Textanalyse</a>
<a href="api.html">API Demo</a>
<a href="kanban.html">Kanban</a>
<a href="quiz.html">Quiz</a>
<a href="kontakt.html">Kontakt</a>
<a href="impressum.html" class="active">Impressum</a>
</nav>
</div>
</header>

View file

@ -29,18 +29,22 @@
<span></span><span></span><span></span>
</button>
<nav id="main-nav">
<a href="index.html" class="active">Start</a>
<a href="ueber_uns.html">Über uns</a>
<a href="eis_projekt.html">Projekt</a>
<a href="team.html">Team</a>
<a href="galerie.html">Galerie</a>
<div class="nav-dropdown">
<a href="index.html" class="active" class="nav-dropdown-trigger">Start ▾</a>
<div class="nav-dropdown-menu">
<a href="ueber_uns.html">Über uns</a>
<a href="eis_projekt.html">Projekt</a>
<a href="team.html">Team</a>
<a href="galerie.html">Galerie</a>
<a href="kontakt.html">Kontakt</a>
<a href="impressum.html">Impressum</a>
</div>
</div>
<a href="notenrechner.html">Notenrechner</a>
<a href="textanalyse.html">Textanalyse</a>
<a href="api.html">API Demo</a>
<a href="kanban.html">Kanban</a>
<a href="quiz.html">Quiz</a>
<a href="kontakt.html">Kontakt</a>
<a href="impressum.html">Impressum</a>
</nav>
</div>
</header>

View file

@ -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
// ===========================

View file

@ -27,18 +27,22 @@
<span></span><span></span><span></span>
</button>
<nav id="main-nav">
<a href="index.html">Start</a>
<a href="ueber_uns.html">Über uns</a>
<a href="eis_projekt.html">Projekt</a>
<a href="team.html">Team</a>
<a href="galerie.html">Galerie</a>
<div class="nav-dropdown">
<a href="index.html" class="nav-dropdown-trigger">Start ▾</a>
<div class="nav-dropdown-menu">
<a href="ueber_uns.html">Über uns</a>
<a href="eis_projekt.html">Projekt</a>
<a href="team.html">Team</a>
<a href="galerie.html">Galerie</a>
<a href="kontakt.html">Kontakt</a>
<a href="impressum.html">Impressum</a>
</div>
</div>
<a href="notenrechner.html">Notenrechner</a>
<a href="textanalyse.html">Textanalyse</a>
<a href="api.html">API Demo</a>
<a href="kanban.html" class="active">Kanban</a>
<a href="quiz.html">Quiz</a>
<a href="kontakt.html">Kontakt</a>
<a href="impressum.html">Impressum</a>
</nav>
</div>
</header>

View file

@ -29,15 +29,22 @@
<span></span><span></span><span></span>
</button>
<nav id="main-nav">
<a href="index.html">Start</a>
<a href="ueber_uns.html">Über uns</a>
<a href="eis_projekt.html">Projekt</a>
<a href="team.html">Team</a>
<a href="galerie.html">Galerie</a>
<div class="nav-dropdown">
<a href="index.html" class="active nav-dropdown-trigger">Start ▾</a>
<div class="nav-dropdown-menu">
<a href="ueber_uns.html">Über uns</a>
<a href="eis_projekt.html">Projekt</a>
<a href="team.html">Team</a>
<a href="galerie.html">Galerie</a>
<a href="kontakt.html" class="active">Kontakt</a>
<a href="impressum.html">Impressum</a>
</div>
</div>
<a href="notenrechner.html">Notenrechner</a>
<a href="textanalyse.html">Textanalyse</a>
<a href="kontakt.html" class="active">Kontakt</a>
<a href="impressum.html">Impressum</a>
<a href="api.html">API Demo</a>
<a href="kanban.html">Kanban</a>
<a href="quiz.html">Quiz</a>
</nav>
</div>
</header>

View file

@ -29,18 +29,22 @@
<span></span><span></span><span></span>
</button>
<nav id="main-nav">
<a href="index.html">Start</a>
<a href="ueber_uns.html">Über uns</a>
<a href="eis_projekt.html">Projekt</a>
<a href="team.html">Team</a>
<a href="galerie.html">Galerie</a>
<div class="nav-dropdown">
<a href="index.html" class="nav-dropdown-trigger">Start ▾</a>
<div class="nav-dropdown-menu">
<a href="ueber_uns.html">Über uns</a>
<a href="eis_projekt.html">Projekt</a>
<a href="team.html">Team</a>
<a href="galerie.html">Galerie</a>
<a href="kontakt.html">Kontakt</a>
<a href="impressum.html">Impressum</a>
</div>
</div>
<a href="notenrechner.html" class="active">Notenrechner</a>
<a href="textanalyse.html">Textanalyse</a>
<a href="api.html">API Demo</a>
<a href="kanban.html">Kanban</a>
<a href="quiz.html">Quiz</a>
<a href="kontakt.html">Kontakt</a>
<a href="impressum.html">Impressum</a>
</nav>
</div>
</header>

View file

@ -29,18 +29,22 @@
<span></span><span></span><span></span>
</button>
<nav id="main-nav">
<a href="index.html">Start</a>
<a href="ueber_uns.html">Über uns</a>
<a href="eis_projekt.html">Projekt</a>
<a href="team.html">Team</a>
<a href="galerie.html">Galerie</a>
<div class="nav-dropdown">
<a href="index.html" class="nav-dropdown-trigger">Start ▾</a>
<div class="nav-dropdown-menu">
<a href="ueber_uns.html">Über uns</a>
<a href="eis_projekt.html">Projekt</a>
<a href="team.html">Team</a>
<a href="galerie.html">Galerie</a>
<a href="kontakt.html">Kontakt</a>
<a href="impressum.html">Impressum</a>
</div>
</div>
<a href="notenrechner.html">Notenrechner</a>
<a href="textanalyse.html">Textanalyse</a>
<a href="api.html">API Demo</a>
<a href="kanban.html">Kanban</a>
<a href="quiz.html" class="active">Quiz</a>
<a href="kontakt.html">Kontakt</a>
<a href="impressum.html">Impressum</a>
</nav>
</div>
</header>

View file

@ -29,18 +29,22 @@
<span></span><span></span><span></span>
</button>
<nav id="main-nav">
<a href="index.html">Start</a>
<a href="ueber_uns.html">Über uns</a>
<a href="eis_projekt.html">Projekt</a>
<a href="team.html" class="active">Team</a>
<a href="galerie.html">Galerie</a>
<div class="nav-dropdown">
<a href="index.html" class="active" class="nav-dropdown-trigger">Start ▾</a>
<div class="nav-dropdown-menu">
<a href="ueber_uns.html">Über uns</a>
<a href="eis_projekt.html">Projekt</a>
<a href="team.html" class="active">Team</a>
<a href="galerie.html">Galerie</a>
<a href="kontakt.html">Kontakt</a>
<a href="impressum.html">Impressum</a>
</div>
</div>
<a href="notenrechner.html">Notenrechner</a>
<a href="textanalyse.html">Textanalyse</a>
<a href="api.html">API Demo</a>
<a href="kanban.html">Kanban</a>
<a href="quiz.html">Quiz</a>
<a href="kontakt.html">Kontakt</a>
<a href="impressum.html">Impressum</a>
</nav>
</div>
</header>

View file

@ -29,18 +29,22 @@
<span></span><span></span><span></span>
</button>
<nav id="main-nav">
<a href="index.html">Start</a>
<a href="ueber_uns.html">Über uns</a>
<a href="eis_projekt.html">Projekt</a>
<a href="team.html">Team</a>
<a href="galerie.html">Galerie</a>
<div class="nav-dropdown">
<a href="index.html" class="nav-dropdown-trigger">Start ▾</a>
<div class="nav-dropdown-menu">
<a href="ueber_uns.html">Über uns</a>
<a href="eis_projekt.html">Projekt</a>
<a href="team.html">Team</a>
<a href="galerie.html">Galerie</a>
<a href="kontakt.html">Kontakt</a>
<a href="impressum.html">Impressum</a>
</div>
</div>
<a href="notenrechner.html">Notenrechner</a>
<a href="textanalyse.html" class="active">Textanalyse</a>
<a href="api.html">API Demo</a>
<a href="kanban.html">Kanban</a>
<a href="quiz.html">Quiz</a>
<a href="kontakt.html">Kontakt</a>
<a href="impressum.html">Impressum</a>
</nav>
</div>
</header>

View file

@ -29,18 +29,22 @@
<span></span><span></span><span></span>
</button>
<nav id="main-nav">
<a href="index.html">Start</a>
<a href="ueber_uns.html" class="active">Über uns</a>
<a href="eis_projekt.html">Projekt</a>
<a href="team.html">Team</a>
<a href="galerie.html">Galerie</a>
<div class="nav-dropdown">
<a href="index.html" class="active" class="nav-dropdown-trigger">Start ▾</a>
<div class="nav-dropdown-menu">
<a href="ueber_uns.html" class="active">Über uns</a>
<a href="eis_projekt.html">Projekt</a>
<a href="team.html">Team</a>
<a href="galerie.html">Galerie</a>
<a href="kontakt.html">Kontakt</a>
<a href="impressum.html">Impressum</a>
</div>
</div>
<a href="notenrechner.html">Notenrechner</a>
<a href="textanalyse.html">Textanalyse</a>
<a href="api.html">API Demo</a>
<a href="kanban.html">Kanban</a>
<a href="quiz.html">Quiz</a>
<a href="kontakt.html">Kontakt</a>
<a href="impressum.html">Impressum</a>
</nav>
</div>
</header>