Kapitel 8: Navigationsmenüs anpassen

8.1 Navigationsmenüs in functions.php registrieren

Menüs registrieren

Fügen Sie in functions.php hinzu:

function mein_theme_setup() {
    // Menüs registrieren
    register_nav_menus(array(
        'primary' => __('Hauptmenü', 'mein-theme'),
        'footer'  => __('Footer-Menü', 'mein-theme'),
        'social'  => __('Social Media Menü', 'mein-theme'),
    ));
}
add_action('after_setup_theme', 'mein_theme_setup');

8.2 Menüs im Dashboard einrichten

Menü erstellen

1. Gehen Sie zu Design → Menüs
2. Klicken Sie auf "Neues Menü erstellen"
3. Name: Hauptmenü
4. Position: Hauptmenü (wählen Sie die registrierte Position)
5. Klicken Sie auf "Menü speichern"

Elemente hinzufügen

• Seiten: Wählen Sie Seiten aus
• Beiträge: Wählen Sie Kategorien
• Benutzerdefinierte Links: Fügen Sie externe Links hinzu
• Kategorien: Fügen Sie Kategorien als Menüpunkte hinzu

8.3 wp_nav_menu() in header.php verwenden

Menü in header.php anzeigen

<nav id="site-navigation" class="main-navigation">
    <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false">
        <?php esc_html_e('Menü', 'mein-theme'); ?>
    </button>
    
    <?php
    wp_nav_menu(array(
        'theme_location' => 'primary',
        'menu_id'        => 'primary-menu',
        'menu_class'     => 'nav-menu',
        'container'      => false,
        'depth'          => 3,
    ));
    ?>
</nav>

8.4 CSS für Navigation schreiben

Basis-Styles für Navigation

/* Navigation */
.main-navigation {
    position: relative;
}

.menu-toggle {
    display: none; /* Auf Desktop ausblenden */
    background: none;
    border: 1px solid white;
    color: white;
    padding: 8px 15px;
    cursor: pointer;
}

.nav-menu {
    list-style: none;
    display: flex;
    gap: 20px;
    margin: 0;
    padding: 0;
}

.nav-menu a {
    color: white;
    text-decoration: none;
    padding: 10px 0;
    display: block;
}

.nav-menu a:hover {
    color: #fbbc04;
}

/* Untermenüs */
.nav-menu .sub-menu {
    position: absolute;
    background: white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    min-width: 200px;
    display: none;
}

.nav-menu .menu-item-has-children:hover .sub-menu {
    display: block;
}

.nav-menu .sub-menu a {
    color: #333;
    padding: 10px 15px;
}

/* Aktiver Menüpunkt */
.nav-menu .current-menu-item > a {
    color: #fbbc04;
    font-weight: bold;
}

8.5 Responsive Navigation (Mobile)

CSS für mobile Geräte

@media (max-width: 768px) {
    .menu-toggle {
        display: block; /* Auf Mobile anzeigen */
    }

    .nav-menu {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #1a73e8;
        padding: 20px;
    }

    .nav-menu.active {
        display: flex;
    }

    .nav-menu .sub-menu {
        position: static;
        box-shadow: none;
        background: transparent;
        padding-left: 20px;
    }

    .nav-menu .sub-menu a {
        color: white;
    }
}

JavaScript für Toggle

Fügen Sie in script.js hinzu:

document.addEventListener('DOMContentLoaded', function() {
    const menuToggle = document.querySelector('.menu-toggle');
    const navMenu = document.querySelector('.nav-menu');

    if (menuToggle && navMenu) {
        menuToggle.addEventListener('click', function() {
            navMenu.classList.toggle('active');
            this.setAttribute('aria-expanded', navMenu.classList.contains('active'));
        });
    }
});

8.6 Menü-Hervorhebung (Current Page Highlight)

CSS für aktiven Menüpunkt

/* Aktiver Menüpunkt */
.nav-menu .current-menu-item > a,
.nav-menu .current-page-ancestor > a {
    color: #fbbc04;
    font-weight: bold;
}

/* Hover-Effekt */
.nav-menu a:hover {
    color: #fbbc04;
    transition: color 0.3s ease;
}

📝 Übung 8: Navigation erstellen

Ziel: Erstellen Sie eine responsive Navigation.

Schritte:

1. Registrieren Sie ein Menü in functions.php
2. Fügen Sie wp_nav_menu() in header.php hinzu
3. Schreiben Sie CSS für die Navigation
4. Testen Sie auf Desktop und Mobile

---

✅ Zusammenfassung

In diesem Kapitel haben Sie gelernt:

• ✅ Navigationsmenüs in functions.php zu registrieren
• ✅ Menüs im Dashboard einzurichten
• ✅ wp_nav_menu() zu verwenden
• ✅ CSS für Navigation zu schreiben
• ✅ Responsive Navigation für Mobile zu erstellen

Nächstes Kapitel: Wir lernen Responsives Design für Themes.

➡️ Zu Kapitel 9: Responsives Design →