MagyarmagyarNavigation 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
Szekció neve “Lépések”- A Navigation Bar szakaszban válassz Menu Direction értéket, és a Select Menu listából válaszd ki az asztali menüt.
- Nyisd ki a Mobile Menu szakaszt. A Responsive Mobile Menu új widgetnél már Show állású: hagyd úgy.
- Á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.
- 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).
- 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.
- 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 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 képen a kapcsoló két vízszintes vonala látszik a jobb szélen.
A képen a megnyitott panel a menü linkjeit mutatja, a kapcsoló pedig bezáró ikonná váltott.
Elementor-sablon a panelben
Szekció neve “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
Szekció neve “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
Szekció neve “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
Szekció neve “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
Szekció neve “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.
Készült: