integration drop down übungen

This commit is contained in:
Mara Zöllner 2026-05-20 21:22:33 +02:00
parent c0093adb0f
commit 5f8beaf75f
2 changed files with 21 additions and 7 deletions

View file

@ -147,3 +147,10 @@ body.dark #dark-mode-toggle { background: var(--accent); color: #0b1220; border-
body.dark .page p, body.dark .bio { color: rgba(226,232,240,0.8); }
body.dark .skill { border-color: rgba(226,232,240,0.2); color: rgba(226,232,240,0.7); }
.dropdown { position: relative; }
.dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: rgba(0,20,60,0.97); border: 1px solid rgba(255,255,255,0.07); min-width: 160px; z-index: 200; }
.dropdown-menu li { list-style: none; }
.dropdown-menu a { display: block; padding: 0.7rem 1.2rem; color: var(--text-muted); font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; }
.dropdown-menu a:hover { color: #fff; }
.dropdown.open .dropdown-menu { display: block; }

View file

@ -1,4 +1,3 @@
// Dark Mode
document.addEventListener("DOMContentLoaded", () => {
const toggle = document.getElementById("dark-mode-toggle");
if (!toggle) return;
@ -14,14 +13,22 @@ document.addEventListener("DOMContentLoaded", () => {
localStorage.setItem("darkMode", isDark);
updateToggle(toggle);
});
document.querySelectorAll('.dropdown > a').forEach(btn => {
btn.addEventListener('click', (e) => {
e.preventDefault();
btn.closest('.dropdown').classList.toggle('open');
});
});
document.addEventListener('click', (e) => {
if (!e.target.closest('.dropdown')) {
document.querySelectorAll('.dropdown').forEach(d => d.classList.remove('open'));
}
});
});
function updateToggle(toggle) {
const isDark = document.body.classList.contains("dark");
toggle.textContent = isDark ? "☀️ Light" : "🌙 Dark";
}
}
}