Menu WordPress - zaawansowana nawigacja
Menu nawigacji to kluczowy element UX każdej strony. WordPress oferuje podstawowy system menu, ale dla mega menu, ikon, czy zaawansowanych efektów potrzebne są dodatkowe rozwiązania. Od prostych po złożone nawigacje.
Krótka odpowiedź
Podstawy menu WordPress
Tworzenie menu:
1. Wygląd → Menu
2. Utwórz nowe menu
3. Dodaj elementy (strony, wpisy, kategorie, custom links)
4. Ustaw strukturę (drag & drop)
5. Przypisz do lokalizacji (Primary, Footer...)
Elementy menu:
- Strony
- Posty
- Kategorie / Tagi
- Custom Links (dowolny URL)
- Custom Post Types
Zagnieżdżanie (dropdown):
- Przeciągnij element w prawo pod inny
- Tworzy hierarchię parent → child
- CSS motywu obsługuje wyświetlanie
Mega Menu - Max Mega Menu
Instalacja:
- Wtyczki → Max Mega Menu
- Aktywuj
Konfiguracja:
1. Mega Menu → Menu Locations
2. Włącz dla Primary Menu
3. Wygląd → Menu
4. Przy elemencie menu → Mega Menu → Enable
Możliwości:
- Wielokolumnowe dropdown
- Widgety w menu (formularze, obrazki)
- Ikony przy elementach
- Animacje
- Różne style
Alternatywy:
- JetMenu (z JetElements)
- WP Mega Menu
- Elementor Pro Nav Menu
Ikony w menu
Menu Icons (wtyczka):
- Dodaje ikony do elementów menu
- Font Awesome, Dashicons, custom images
- Pozycja ikony (przed/po tekście)
Ręcznie z CSS:
1. Dodaj klasę CSS do elementu menu
2. W CSS:
```css
.menu-item.icon-home a::before {
font-family: 'Font Awesome 5 Free';
content: '\f015';
margin-right: 8px;
}
```
Font Awesome:
- Załaduj przez CDN lub wtyczkę
- Better Font Awesome (wtyczka)
- Ikony w shortcode lub CSS
Menu responsywne (mobile)
Motywy obsługują:
- Większość motywów ma mobile menu
- Hamburger icon
- Slide-in lub dropdown
Responsive Menu (wtyczka):
- Dedykowana wtyczka mobile menu
- Wiele stylów animacji
- Breakpoint konfigurowany
- Off-canvas, slide, fade
Kod własny:
```css
@media (max-width: 768px) {
.main-navigation {
display: none;
}
.mobile-menu-toggle {
display: block;
}
}
```
JavaScript toggle:
```javascript
document.querySelector('.menu-toggle').addEventListener('click', function() {
document.querySelector('.main-navigation').classList.toggle('active');
});
```