Navigation - AI Hub Design System

Desktop Navigation

<nav class="ai-navigation">
    <a href="/" class="ai-navigation__logo">AI HUB</a>
    
    <div class="ai-navigation__menu">
        <ul class="ai-navigation__list">
            <li class="ai-navigation__item">
                <a href="/ki-news" class="ai-navigation__link">KI News</a>
            </li>
            <li class="ai-navigation__item">
                <a href="/community" class="ai-navigation__link">Community</a>
            </li>
            <li class="ai-navigation__item">
                <a href="/bibliothek" class="ai-navigation__link">Bibliothek</a>
            </li>
        </ul>
        
        <a href="/beratung" class="ai-button ai-button--primary">KI-Beratung</a>
    </div>
</nav>

Navigation Zustände

Scrolled State

Beim Scrollen erhält die Navigation einen vollständig opaken Hintergrund und einen subtilen Schatten für bessere Abgrenzung.

Hidden State

Beim Scrollen nach unten wird die Navigation ausgeblendet, beim Scrollen nach oben wieder eingeblendet. Dies verbessert die Nutzererfahrung auf mobilen Geräten.

Mobile Navigation

Mobile Header

Mobile Menu

Navigation Features

Sticky Navigation: Bleibt beim Scrollen am oberen Bildschirmrand
Smart Hide: Versteckt sich beim Scrollen nach unten, erscheint beim Scrollen nach oben
Backdrop Blur: Glasmorphismus-Effekt für moderne Optik
Responsive: Automatische Anpassung für mobile Geräte
Smooth Transitions: Alle Zustandsänderungen sind animiert

CSS Klassen

/* Navigation Container */
.ai-navigation {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    z-index: 1000;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Scrolled State */
.ai-navigation--scrolled {
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

/* Hidden State */
.ai-navigation--hidden {
    transform: translateY(-100%);
}

/* Mobile Open State */
.ai-navigation--mobile-open .ai-navigation__menu {
    display: block;
}

Best Practices

Halten Sie die Navigation einfach und übersichtlich (max. 5-7 Hauptpunkte)
Verwenden Sie klare, aussagekräftige Labels
Der CTA-Button sollte sich visuell abheben
Stellen Sie sicher, dass alle Links eine ausreichende Touch-Target-Größe haben (min. 44x44px)
Testen Sie die Navigation auf verschiedenen Geräten und Bildschirmgrößen
Implementieren Sie Keyboard-Navigation für bessere Zugänglichkeit