HTML Dropdown-Menüs

JavaScript Kopieren

document.addEventListener('DOMContentLoaded', function () {

    // Alle Dropdown-Trigger finden
    const dropdownTriggers = document.querySelectorAll('.dropdown-click > a');

    // Hilfsfunktion: Dropdown öffnen/schließen
    function toggleDropdown(trigger) {
        const dropdown = trigger.parentElement;
        const isOpen = dropdown.classList.contains('open');

        // Alle anderen Dropdowns schließen
        document.querySelectorAll('.dropdown-click.open').forEach(open => {
            if (open !== dropdown) {
                open.classList.remove('open');
                const openTrigger = open.querySelector('a[aria-expanded]');
                if (openTrigger) openTrigger.setAttribute('aria-expanded', 'false');
            }
        });

        // Dieses Dropdown togglen
        dropdown.classList.toggle('open');
        trigger.setAttribute('aria-expanded', !isOpen);
    }

    // Hilfsfunktion: Alle Dropdowns schließen
    function closeAllDropdowns() {
        document.querySelectorAll('.dropdown-click.open').forEach(open => {
            open.classList.remove('open');
            const trigger = open.querySelector('a[aria-expanded]');
            if (trigger) trigger.setAttribute('aria-expanded', 'false');
        });
    }

    dropdownTriggers.forEach(trigger => {
        // Klick-Event
        trigger.addEventListener('click', function (e) {
            e.preventDefault();
            toggleDropdown(this);
        });

        // Keyboard-Event (Enter und Space)
        trigger.addEventListener('keydown', function (e) {
            if (e.key === 'Enter' || e.key === ' ') {
                e.preventDefault();
                toggleDropdown(this);
            }
        });
    });

    // Klick außerhalb schließt alle Dropdowns
    document.addEventListener('click', function (e) {
        if (!e.target.closest('.dropdown-click')) {
            closeAllDropdowns();
        }
    });

    // ESC-Taste schließt Dropdowns
    document.addEventListener('keydown', function (e) {
        if (e.key === 'Escape') {
            closeAllDropdowns();
        }
    });
});

CSS Kopieren

/* Hauptmenü */
.menu-click {
    display: flex;
    gap: 2rem;
    list-style: none;
    align-items: center;
    margin: 0;
    padding: 0;
}

.menu-click > li {
    position: relative;
}

/* Toggle-Element */
.dropdown-click {
    position: relative;
}

.dropdown-click > a {
    cursor: pointer;                    /* Zeigt Klickbarkeit */
    user-select: none;                  /* Verhindert Textauswahl */
}

/* Pfeil-Indikator */
.dropdown-click > a::after {
    content: ' ▼';
    font-size: 0.7em;
    transition: transform 0.3s;
    display: inline-block;
}

/* Pfeil dreht sich wenn offen */
.dropdown-click.open > a::after {
    transform: rotate(180deg);
}

/* Dropdown-Menü (versteckt) */
.dropdown-menu-click {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--dark-light);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    min-width: 180px;
    list-style: none;
    padding: 0.5rem 0;
    margin: 0;
    
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    z-index: 100;
}

/* KLICK: Sichtbar via .open Klasse */
.dropdown-click.open > .dropdown-menu-click {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

JavaScript Kopieren

// Alle Dropdown-Trigger finden
document.querySelectorAll('.dropdown-click > a').forEach(trigger => {
    trigger.addEventListener('click', function(e) {
        e.preventDefault();                     // Link-Verhalten verhindern
        
        const dropdown = this.parentElement;    // Das li.dropdown-click
        
        // Alle anderen Dropdowns schließen
        document.querySelectorAll('.dropdown-click.open').forEach(open => {
            if (open !== dropdown) {
                open.classList.remove('open');
            }
        });
        
        // Dieses Dropdown togglen
        dropdown.classList.toggle('open');
    });
});

// Klick außerhalb schließt alle Dropdowns
document.addEventListener('click', function(e) {
    if (!e.target.closest('.dropdown-click')) {
        document.querySelectorAll('.dropdown-click.open').forEach(open => {
            open.classList.remove('open');
        });
    }
});