# Navigation Menu Lite: hamburger menü mobilra

> A Navigation Menu Lite mobilmenüje: töréspont, a kapcsoló és a linkek igazítása, a mobil menü kiválasztása, Elementor-sablon a panelben.

A hamburger menü a teljes navigációs sávot egyetlen kis gombbá zsugorítja, így a telefonos fejléc tiszta marad, és minden link egy koppintásra van. A **Navigation Menu Lite** widget ezt beépítve tudja: te választod ki a töréspontot, az igazításokat, és azt, hogy WordPress menü vagy Elementor-sablon jelenjen meg a panelben. Mindez az ingyenes bővítményben, a Pro nélkül is működik.

Előfeltételek: a widget be van kapcsolva a **The Plus Addons → Widgets** oldalon, és van elkészített menü a **Megjelenés → Menük** alatt (blokktémánál a `/wp-admin/nav-menus.php` címen).

## Lépések

1. A **Navigation Bar** szakaszban válassz **Menu Direction** értéket, és a **Select Menu** listából válaszd ki az asztali menüt.
2. Nyisd ki a **Mobile Menu** szakaszt. A **Responsive Mobile Menu** új widgetnél már **Show** állású: hagyd úgy.
3. Állítsd be az **Open Mobile Menu** értéket. Ez a legszélesebb képernyő, amely még hamburger menüt kap. Az alapértéknél (991 px) a kapcsoló 991 px-en és alatta jelenik meg, és a teljes sáv 992 px-től tér vissza.
4. A **Toggle Alignment** a gomb helyét adja meg (alapértéke jobbra, szemben a logóval), a **Mobile Navigation Alignment** pedig a linkek igazítását a megnyitott panelben (alapértéke balra).
5. A **Menu Content** maradjon **Normal Menu**, és az alatta megjelenő **Select Menu** listából válassz menüt. Ez külön, második beállítás: az asztali **Select Menu** nem tölti ki.
6. Frissítsd az oldalt, és nyisd meg telefonon, vagy szűkítsd a böngészőt a töréspont alá. A sáv helyére a kapcsoló kerül, és rákoppintva kinyílik a menü.

![A Mobile Menu szakasz a töréspontnak megfelelő 991 értékkel](./kepek/karuszell-navigacio-2-nav-panel-mobil.webp)

*A Mobile Menu szakasz a töréspontnak megfelelő 991 értékkel* (https://minta-bolt.hu/wp-admin/post.php?post=62&action=elementor)

A képen a **Responsive Mobile Menu** **Show** állású, az **Open Mobile Menu** értéke 991, a **Toggle Alignment** jobbra áll.

Ha kihagyod az 5. lépést, a hamburger akkor is megjelenik, mert a **Responsive Mobile Menu** alapból be van kapcsolva, de üres panelt nyit meg. Az asztali **Select Menu** nem tölti ki a mobil menüt.

![A bezárt hamburger menü kapcsolója egy 390 képpont széles oldalon](./kepek/karuszell-navigacio-2-nav-mobil-zart.webp)

*A bezárt hamburger menü kapcsolója egy 390 képpont széles oldalon* (https://minta-bolt.hu/tp-kn2-nav-mobil/)

A képen a kapcsoló két vízszintes vonala látszik a jobb szélen.

![A kinyitott mobilmenü a négy menüponttal](./kepek/karuszell-navigacio-2-nav-mobil-nyitva.webp)

*A kinyitott mobilmenü a négy menüponttal* (https://minta-bolt.hu/tp-kn2-nav-mobil/)

A képen a megnyitott panel a menü linkjeit mutatja, a kapcsoló pedig bezáró ikonná váltott.

## Elementor-sablon a panelben

Állítsd a **Menu Content** értékét **Template Menu**-re, és válassz egy mentett sablont az **Elementor Templates** listából. A panel ilyenkor a linklista helyett a sablont jeleníti meg, így cselekvésre ösztönző gombot, nyitvatartást, keresőmezőt vagy telefonszámot is tehetsz bele. Ez az ingyenes bővítményben is működik.

## A használt beállítások

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Responsive Mobile Menu** | Be- és kikapcsolja az egész mobilmenüt. | **Show** |
| **Open Mobile Menu** | A legszélesebb képernyő képpontban, amely hamburgert kap. Tartomány: 0 és 1500 között. | 991 px |
| **Toggle Alignment** | A kapcsológomb helye: balra, középre vagy jobbra. | Jobbra |
| **Mobile Navigation Alignment** | A linkek igazítása a megnyitott panelben. | Balra |
| **Menu Content** | **Normal Menu** WordPress menühöz, **Template Menu** Elementor-sablonhoz. | **Normal Menu** |
| **Select Menu** (a Mobile Menu szakaszban) | A panelben megjelenő menü. Független az asztalitól. | Nincs |
| **Toggle Height**, **Toggle Bottom Space** | A kapcsoló magassága és a távolság a nyitott panelig (Stílus lap). | |

## Hogyan működik

- Az **Open Mobile Menu** egy felső határ, és magában foglalja a beírt értéket. Ha 768-ra állítod, a hamburger 768 px-en és alatta látszik, a sáv 769 px-től tér vissza.
- A kapcsoló két rövid vonal, az alakja rögzített. A **Stílus** lapon a magassága, a távolsága és a színe változtatható, de nincs vezérlő az ikon cseréjére vagy szöveges címkére.
- A kapcsolóra koppintva a panel alatta lecsúszik, újabb koppintásra bezárul. A panelben a szülőelemek koppintásra nyitják meg a gyermekeiket, akármi a **Menu Hover/Click** értéke.
- A megnyitott panel a böngészőablak teljes szélességét kitölti akkor is, ha a widget keskenyebb tárolóban van.

## Korlátok

- Az egész widgetnek egyetlen töréspontja van, telefonra és táblagépre nincs külön érték.
- Nincs becsúszó vagy teljes képernyős panel: a panel mindig a kapcsoló alatt nyílik le. Az oldalról becsúszó panelhez az off-canvas felugró menüt használd.
- A kapcsoló ikonjára nincs vezérlő, szöveges változat sincs.
- A megnyitott panel belső margója és lekerekítése nem állítható vezérlőkkel, ahhoz egyéni CSS kell.
- Ha az **Open Mobile Menu** értékét 991 px alá viszed, az asztali lenyíló almenük nem nyílnak a te értéked és 991 px között.

## Hibaelhárítás

**A hamburger üres panelt nyit meg.** A **Mobile Menu** szakasz **Select Menu** mezője még üres. Az a beállítás külön van az asztalitól, és nincs alapértéke. Válassz benne menüt.

**A menü rossz szélességnél vált át.** Az érték felső határ, nem alsó: a 768 azt jelenti, hogy „768 px és keskenyebb”. Ha az átváltás mégis máshol történik, a téma vagy egy globális CSS media query a saját töréspontján rejti a fejlécet: nézd meg a téma saját reszponzív beállításait.

**Az almenük nem működnek táblagépen, miután lejjebb vittem a töréspontot.** Az asztali lenyílók csak 991 px böngészőszélesség felett futnak, és ez a szám fix a widgetben, nem az **Open Mobile Menu** értékéből jön. A te értéked és 991 px között a sáv látszik, de lenyíló nem nyílik. Hagyd az **Open Mobile Menu** értékét 991 vagy afölött.

**A panel magától nyílik és zárul.** Egy másik szkript kezeli ugyanazt a koppintást. Kapcsold ki egyenként a többi menü-, felugró- vagy animációs bővítményt, és ürítsd a gyorsítótárakat a próbák között.

**A beállítások módosítása után nem változik semmi.** Ürítsd az oldal-, a böngésző- és a CDN-gyorsítótárat, majd frissíts erőből. Az Elementor oldalankénti CSS-t is ír, ezért érdemes újragenerálni a fájlokat az **Elementor → Eszközök** alatt.