Navigációs menü: kapcsolós, vásznon kívüli és Swiper mobilmenü, sablonmenü

A telefonokon és táblagépeken a menü helyett a Navigációs menü widget külön mobilmenüt mutat. Háromféle van: Kapcsoló (hamburgergombra lenyíló lista), Vásznon kívüli (oldalról becsúszó panel) és Swiper (a képernyőn mindig látható, oldalra húzható sor). A teljes widgetet a Navigációs menü fejezet írja le, itt a mobil rész beállításai vannak.

Mi kell hozzá

• A Navigation Menu widget bekapcsolva a The Plus Addons → Widgets oldalon.
• Egy fejlécsablon, amelybe a widgetet teszed, hogy a menü minden oldalon megjelenjen. A fejlécet megépítheted a Nexter Builderrel vagy az Elementor Pro Theme Builderével.
• Egy WordPress-menü a Megjelenés → Menük alatt, ha az Alapértelmezett menütípust használod.
• Sablonmenühöz egy közzétett Elementor-sablon (Sablonok → Mentett sablonok).

A kapcsolós mobilmenü az ingyenes Navigation Menu Lite widgetben is megvan, a vásznon kívüli és a Swiper típus, valamint a ragadós beállítások csak a Pro widgetben.

A Mobil menü szakasz beállításai

A beállítások a widget Tartalom fülén, a Mobil menü szakaszban vannak.

https://minta-bolt.hu/wp-admin/post.php?post=63&action=elementor

A képen a Reszponzív mobilmenü kapcsoló, a Menütípus, a Mobilmenü megnyitása csúszka, a Kapcsoló stílusa, a Kapcsoló illesztése, a Navigáció igazítása, a Menütartalom és a Mobilmenü bezárása kattintásra látszik.

Beállítás	Mit csinál	Alapérték
Reszponzív mobilmenü	Bekapcsolja a külön mobilmenüt	Be
Menütípus	Kapcsoló, Swiper vagy Vásznon kívüli	Kapcsoló
Mobilmenü megnyitása	Az a legszélesebb képernyő (képpontban), amelyen már a mobilmenü látszik	991
Egyéni szélesség	A vásznon kívüli panel szélessége, legfeljebb 750 képpont. Csak a Vásznon kívüli típusnál látszik
Kapcsoló stílusa	A gomb kinézete: Stílus 1 és Stílus 4 között, vagy Egyéni (ikon vagy kép). Csak a Kapcsoló típusnál látszik	Stílus 1
Kapcsoló illesztése	A gomb balra, középre vagy jobbra kerül. Csak a Kapcsoló típusnál látszik	Jobbra
Navigáció igazítása	A menüpontok balra, középre vagy jobbra igazodnak (normál menünél)	Balra
Menütartalom	Normál menü (WordPress-menü) vagy Sablonmenü (Elementor-sablon)	Normál menü
Menü kiválasztása	A mobilmenüben megjelenő WordPress-menü
Mobilmenü bezárása kattintásra	A megnyitott menü bezárul, ha a fejléc más részére koppintasz	Be

A Mobilmenü megnyitása érték minden eszközre egyetlen szélesség, nem eszközönként külön. Ezen a szélességen és keskenyebben a látogató a mobilmenüt látja, szélesebb képernyőn a normál menüt. Ha például 767 képpontot adsz meg, a táblagépek az asztali menüt kapják.

Egyedi kapcsolóstílusnál (Egyéni) ikont vagy képet választhatsz a gombhoz, külön a nyitott és a zárt állapothoz.

Ha a Menü kiválasztása mező üres marad és a Menütípus Ismétlő, a mobilmenü az ismétlős menü elemeit mutatja (Navigációs menü: ismétlő menütípus). WordPress-menüt akkor válassz itt, ha a mobilmenü más legyen, mint az asztali.

Kapcsolós (hamburger) mobilmenü

A kapcsolós menü egy gomb mögé rejti a navigációt. A látogató megnyomja a gombot, és a menü lenyílik, így a fejléc kis képernyőn is tiszta marad. Ez az alapértelmezett mobilmenü.

1. A Tartalom → Elrendezés szakaszban válaszd ki a Menütípust, a Menü irányát és a menüt az asztali menühöz.
2. A Tartalom → Mobil menü szakaszban ellenőrizd, hogy a Reszponzív mobilmenü be van kapcsolva, és a Menütípus Kapcsoló.
3. Állítsd be a Mobilmenü megnyitása értékét. Az alapérték 991 képpont.
4. Válaszd ki a Kapcsoló stílusát és a Kapcsoló illesztését.
5. A Menütartalom legyen Normál menü, és a Menü kiválasztása mezőben válaszd ki a menüt. A Navigáció igazítása a menüpontok helyét adja.
6. Tedd közzé az oldalt, és nézd meg telefonon, vagy keskeny ablakban.

https://minta-bolt.hu/tp-kn6-toggle/

A képen a nyitott kapcsológomb (X alakú) alatt a menüpontok állnak, a Szolgáltatások alatt lenyílt a három almenüpont.

• A mobilmenüben az almenüs menüpontra koppintva az almenü nyílik meg, és nem a menüpont linkjére lép. Ha a szülő oldalnak is elérhetőnek kell lennie, vedd fel az almenüjébe is.
• A Mobilmenü bezárása kattintásra csak akkor zárja be a menüt, ha a gomb körüli fejlécre koppintanak, az alatta lévő oldaltartalomra koppintva nem. A gombra újra koppintva a menü mindig bezárul.
• Az almenünyilak a Font Awesome 5 ikonjait használják. Ha az oldalon semmi más nem tölti be a Font Awesome-ot, ezek kis üres négyzetként látszanak.

Vásznon kívüli mobilmenü

A vásznon kívüli menü oldalról csúszik be, ha a látogató megnyomja a menügombot, és az oldal fölött áll, nem tolja le a tartalmat.

1. A Mobil menü szakaszban állítsd a Menütípust Vásznon kívülire.
2. Állítsd be az Egyéni szélességet (legfeljebb 750 képpont). A legtöbb telefonhoz a 280 és 320 képpont közötti érték jó.
3. Állítsd be a Mobilmenü megnyitása értékét. Az alapérték 991 képpont.
4. Hagyd a Menütartalmat Normál menün, válaszd ki a menüt a Menü kiválasztása mezőben, és igazítsd a menüpontokat a Navigáció igazításával.
5. Tedd közzé az oldalt, és nyisd meg telefonon.

https://minta-bolt.hu/tp-kn6-offcanvas/

A képen a menü 300 képpontos panelje a bal oldalon áll, a jobb felső sarokban a bezáró X látszik, a panel mellett az oldal tartalma.

A látogató a panel tetején lévő X-szel zárja be a menüt. Az almenüs elemre koppintva itt is az almenü nyílik meg, és nem a menüpont linkje.

Korlátok:

• Nincs Sablonmenü: az Elementor-sablonok választója a vásznon kívüli típusnál rejtett. Tervezett mobilmenühöz a Kapcsoló típust használd sablonnal.
• A gomb mindig a szokásos három vonal. A Kapcsoló stílusa és a Kapcsoló illesztése csak a Kapcsoló típusra érvényes.
• A bezáró ikon a Font Awesome 5-ből van. Ha az oldalon semmi más nem tölti be a Font Awesome-ot, az X nem látszik.
• A Mobilmenü bezárása kattintásra csak a fejléc területére koppintva zár be, az oldal többi részére koppintva nem.

A panel megnyílik, de nem találom, hogyan zárjam be. A Font Awesome nincs betöltve az oldalon, ezért a bezáró ikon üres. A panel jobb felső sarkában akkor is ott van, és a Font Awesome betöltése után látszani fog.

A panel üres. Válassz menüt a Mobil menü → Menü kiválasztása mezőben, és ellenőrizd, hogy a menüben vannak-e elemek.

A panel alul le van vágva. A fejlécben valamelyik szülő tárolónak fix magassága van, vagy elrejti a túlcsorduló tartalmat. Töröld a fix magasságot. Ha a fejléc ragadós, kapcsold be a Stílus → Rögzített mobilmenü → Túlcsordulás görgetése beállítást.

Swiper mobilmenü

A Swiper menü gomb nélkül mutatja a főmenüpontokat telefonon, egy sorban, amelyet a látogató oldalra húzhat. Ilyenek a kategóriasávok sok alkalmazásban.

1. A Mobil menü szakaszban állítsd a Menütípust Swiperre.
2. Állítsd be a Mobilmenü megnyitása értékét.
3. A Menütartalom legyen Normál menü, válaszd ki a menüt a Menü kiválasztása mezőben. 4 és 8 főmenüponttal működik a legjobban.
4. A Navigáció igazítása állítja a sor elemeinek helyét.

https://minta-bolt.hu/tp-kn6-swiper/

A képen a menüpontok egy sorban állnak, a sor a képernyő szélénél levágva folytatódik, és oldalra húzható.

• Nincs gomb, a menü mobil szélességen mindig látszik.
• Csak a főmenüpontok jelennek meg, az almenüpontok nem. A fontos linkeket tedd a főszintre, vagy válaszd a Kapcsoló vagy Vásznon kívüli típust.
• Nincs Kapcsoló stílusa és Kapcsoló illesztése.
• A Sablonmenü a sor helyett a teljes sablont mutatja, mindig láthatóan. Ez nem rejtett menü.

Hiányoznak az almenüpontok. A Swiper csak a főszintet mutatja. Az almenükhöz használd a Kapcsoló vagy a Vásznon kívüli típust.

A sor nem húzható. A menüpontok elférnek a képernyőn, így nincs mit húzni. Egyébként nézd meg a böngésző konzolján a JavaScript-hibákat, és hogy nincs-e egyedi CSS, amely átállítja a menü szélességét.

A sor üres. Válassz menüt a Mobil menü → Menü kiválasztása mezőben.

Elementor-sablon mint mobilmenü

A mobilmenüt teljesen megtervezheted Elementorban: logóval, gombokkal, ikonokkal vagy elérhetőségekkel, és a hamburgergomb ezt nyitja meg. A sablont a widget Sablonmenü beállítása tölti be.

1. Készíts egy közzétett Elementor-sablont a Sablonok → Mentett sablonok alatt. Tervezd a szerkesztő mobil nézetében.
2. Állítsd be az asztali menüt az Elrendezés és Tartalom szakaszban.
3. A Mobil menü szakaszban a Reszponzív mobilmenü legyen bekapcsolva, a Menütípus pedig Kapcsoló.
4. A Menütartalom legyen Sablonmenü.
5. Válaszd ki a sablont az Elementor-sablonok listában. A lista alatti Create Template és Edit Template gombbal (a felületen angol feliratok) az oldal elhagyása nélkül is megépítheted.

https://minta-bolt.hu/tp-kn6-sablon/

A képen a nyitott mobilmenü az Elementor-sablon tartalmát, a gyors linkek feliratát mutatja a menüpontlista helyett.

Menütípus	Sablonmenüvel
Kapcsoló	Működik: a gomb megnyitja és bezárja a sablont
Swiper	A sablon mindig látszik, gomb nélkül, ezért ez nem hamburgermenü
Vásznon kívüli	Nem használható: az Elementor-sablonok választója rejtett

Korlátok:

• A sablonnak közzétettnek kell lennie. Piszkozat sablonnál a látogatók „Unauthorized Access” üzenetet látnak a menü helyett. Tedd közzé, majd ürítsd a gyorsítótárat.
• Tervezz mobilra. A sablon a mobilmenü panelben áll, a széles, többoszlopos elrendezés összezsúfolt.
• Egy töréspont van: a sablon a Mobilmenü megnyitása szélességen és keskenyebben látszik.

A gomb nem csinál semmit. Nézd meg a böngésző konzolján, hogy más bővítmény okoz-e JavaScript-hibát, és ürítsd a JavaScript-optimalizálást és a gyorsítótárat.

Az asztali és a mobilmenü oldalanként felváltva jelenik meg. A fejléc egy régi, gyorsítótárazott példányát látod. Ürítsd az oldal-, a CDN- és az Elementor CSS-gyorsítótárat a mobil beállítások módosítása után.

A menü rossz szélességnél vált. Ellenőrizd a Mobilmenü megnyitása értékét, és hogy a téma vagy egyedi CSS nem rejti-e el a fejlécet más szélességnél.