Navigációs menü widget: vízszintes, függőleges és mega menü

A látogatók a menün át találnak el az oldalaid között. A Navigációs menü widget egyetlen widgetből épít vízszintes, függőleges és oldalsó menüt, mega menüt, ragadós fejlécet és háromféle mobilmenüt.

A widget a Pro változat része. Az ingyenes bővítményben a kisebb Navigation Menu Lite van meg: az vízszintes és függőleges menüt, rámutatásos vagy kattintásos almenüt, ismétlős menüt mega menü sablonokkal és kapcsolós mobilmenüt tud, de nincs benne oldalsó menü, ragadós beállítás, Swiper és vásznon kívüli mobilmenü.

Mi kell hozzá

• Az Elementor és a The Plus Addons Pro.
• Egy fejlécsablon: a widgetet a fejlécbe tedd, 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.

Bekapcsolás

1. Nyisd meg a The Plus Addons → Widgets oldalt.
2. Keress rá a Navigation Menu widgetre, és kapcsold be.

Elrendezés

A widget panelje Tartalom fülén először az Elrendezés szakasz áll.

• Menütípus: az Alapértelmezett egy WordPress-menüt mutat a Megjelenés → Menük oldalról, az Ismétlő a widgeten belül felvett elemekből áll (mindegyiknek saját szintje, ikonja, címkéje és opcionális mega menü sablonja van).
• Menü iránya: három kép, sorban Vízszintes menü, Függőleges menü és Függőleges oldalsó menü. A képre mutatva megjelenik a neve.
• Igazítás: a menü balra, középre vagy jobbra kerül.

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

A képen a Tartalom szakasz látszik a Menü kiválasztása, a Menü megnyitása rámutatásra/kattintásra és a Menüeffektusok mezővel.

Az irányok:

• Vízszintes menü: a menüpontok egy sorban állnak, az almenük alattuk nyílnak.
• Függőleges menü: a menüpontok egy oszlopban állnak, az almenük oldalra nyílnak.
• Függőleges oldalsó menü: oszlop, opcionális címsávval, amely rámutatásra vagy kattintásra nyitja a menüt.

Tartalom

A szakasz tartalma a menütípustól függ.

• Menü kiválasztása (Alapértelmezett típus): a megjelenítendő WordPress-menü.
• Navigációs menü (Ismétlő típus): az elemek listája.
• Menü megnyitása rámutatásra/kattintásra: Almenü megnyitása rámutatásra (alapérték) vagy Almenü megnyitása kattintásra.
• Menüeffektusok: az almenü megjelenése. Lehet Fel-/lecsúsztatás (JS), Előtűnés/elhalványulás (JS), Felfelé/lefelé halványítás vagy Előtűnés/Eltűnés. Függőleges menünél csak az első kettő érvényes.
• Megnyitás iránya, a Függőleges oldalsó címsáv és a címsáv beállításai: csak a Függőleges oldalsó menü esetén.

Almenü nyitása rámutatásra

Az asztali menü almenüi alapból rámutatásra nyílnak.

1. A widget Tartalom szakaszában a Menü megnyitása rámutatásra/kattintásra értéke legyen Almenü megnyitása rámutatásra. Ez az alapérték.
2. A Menüeffektusok listában válaszd ki, hogyan jelenjen meg az almenü. Az alapérték a Fel-/lecsúsztatás (JS): az almenü lecsúszik. Az Előtűnés/elhalványulás (JS) elhalványulva jelenik meg, a másik kettő CSS-es halványítás.
3. Tedd közzé az oldalt, és vidd az egeret egy almenüs menüpont fölé.

https://minta-bolt.hu/tp-kn5-hover/

A képen az egér a Szolgáltatások menüponton áll, alatta kinyílt a három almenüpont.

Korlátok:

• A rámutatásos nyitás csak 991 px-nél szélesebb képernyőn fut. Keskenyebb képernyő általában a mobilmenüt kapja, ezért ez ritkán látszik. Ha viszont a Mobil menü szakasz Mobilmenü megnyitása értékét lecsökkented, a táblagépek e szélesség és a 991 px között az asztali menüt kapják, és az almenük rajtuk nem nyílnak. Tartsd a Mobilmenü megnyitása értékét legalább 991 px-en, vagy használd az Almenü megnyitása kattintásra beállítást.
• Widgetenként egy beállítás van: egy menüben nem keverheted a rámutatást és a kattintást.
• Az érintőképernyőn nincs rámutatás. A mobilmenü az almenüket mindig koppintásra nyitja.

Az almenü nem nyílik. Nézd az oldalt 991 px-nél szélesebb ablakban, és a böngésző konzolján nézd meg, hogy más bővítmény JavaScript-hibát okoz-e. A beállítás módosítása után ürítsd a gyorsítótárat és a JavaScript-optimalizálást.

Az almenü bezárul, mielőtt odaérek. Az almenü akkor záródik be, amint az egér elhagyja a menüpontot és az almenüt. Ha a kettő között helyet hagytál, csökkentsd, vagy válts az Almenü megnyitása kattintásra beállításra.

Almenü nyitása kattintásra

A kattintásos menü nem nyílik meg véletlenül, ezért nagy almenükhöz és mega menükhöz jó.

1. A Tartalom szakaszban állítsd a Menü megnyitása rámutatásra/kattintásra értékét Almenü megnyitása kattintásra-ra. A Menüeffektusok továbbra is az almenü megjelenését adja.
2. Tedd közzé az oldalt, és kattints egy almenüs menüpontra.

https://minta-bolt.hu/tp-kn5-katt/

A képen a Szolgáltatások menüpontra kattintás után látszik a kinyílt almenü.

• A szülő menüpontra kattintás megnyitja az almenüt, és nem lép a szülő linkjére. Ha a szülő valódi oldal, vedd fel az almenüjébe is.
• A szülő újbóli megkattintása, vagy bárhová kattintás az oldalon bezárja az almenüt.
• Egy almenü megnyitása bezárja a másikat.
• Rámutatásra semmi sem történik, egyik képernyőméretnél sem.
• A beállítás az asztali menüre vonatkozik. A mobilmenü az almenüket mindig koppintásra nyitja.

Az almenü még mindig rámutatásra nyílik. Gyorsítótárazott oldalt látsz: ürítsd az oldal-, a CDN- és a böngésző gyorsítótárát.

A szülő menüpontra kattintva nem történik semmi. Nézd meg, hogy a menüpontnak van-e gyermeke a menüben, és a böngésző konzolján, hogy más bővítmény okoz-e JavaScript-hibát.

Függőleges menü

Oldalsávban, szolgáltatásoldalon vagy keskeny panelben a függőleges menü jól működik.

1. Add hozzá a Navigációs menü widgetet oda, ahol a menü legyen: oldalsávba, oldalra vagy sablonba. Az Elrendezés szakaszban válaszd ki a Menütípust.
2. A Menü iránya képei közül válaszd a másodikat, a Függőleges menüt.
3. A Tartalom szakaszban válaszd ki a menüt (vagy vegyél fel ismétlős elemeket), állítsd be a nyitás módját és a Menüeffektusok értékét.

https://minta-bolt.hu/tp-kn5-menu-fugg/

A képen a négy főmenüpont egymás alatt áll.

Függőleges menünél csak a Fel-/lecsúsztatás (JS) és az Előtűnés/elhalványulás (JS) érvényes, a másik kettő a lecsúsztatásra esik vissza.

	Függőleges menü	Függőleges oldalsó menü
Elrendezés	Egyszerű oszlop	Oszlop opcionális címsávval
A teljes menü nyitása és zárása	Nincs	Van, a címsávra rámutatva vagy kattintva
Az ingyenes Lite widgetben	Van	Nincs

• Egy widgetben egy irány lehet. Ha mindkettő kell, használj két widgetet.
• A függőleges menü helyet foglal az oldalon: a normál elrendezésben lejjebb tolja a tartalmat. Tedd keskeny oszlopba vagy oldalsáv tárolóba.
• A szülő menüpontok jelzői alapból ki vannak kapcsolva. A Stílus → Főmenü → Főmenü jelzőjének stílusa mezőben kapcsold be őket.

Nem találom, hol váltsak vissza vízszintesre. Az első kép a Tartalom → Elrendezés → Menü iránya mezőben. A képeken nincs szöveg, a nevüket rámutatáskor látod.

Teljes szélességű mega menü

A teljes szélességű mega menü panelje a teljes képernyőre kiterjed, ezért több oszlopnyi link, kép és gomb is elfér rajta. Pro funkció; az ingyenes Lite widgetben nincs.

Előfeltétel egy működő mega menü, vagyis olyan menüpont, amely alatt egy Plus Mega Menü panel áll.

1. Nyisd meg a Megjelenés → Menük oldalt.
2. A Select a menu to edit listában válaszd ki a mega menüt, és kattints a Select gombra.
3. Nyisd ki azt a szülő menüpontot, amelyik alatt a panel áll.
4. A Mega menu Type értéke legyen Full Width.
5. Ismételd meg minden szülő menüpontnál, amelynek teljes szélességű panelt szeretnél, majd kattints a Menü mentése gombra.

Ismétlős menütípusnál ugyanez a Mega menü típusa mező az elem beállításai között (a második szinten, mega menü almenütípusnál): Alapértelmezett, Tároló vagy Teljes szélesség.

Az érintett menüpontok ezután a böngészőablak szélességű panelt nyitnak.

Mega menü típusa	A panel szélessége
Alapértelmezett	Normál almenü, vagy a Dropdown Max-Width(px) mezőben megadott fix szélesség
Tároló	A szakasz vagy tároló keretezett tartalomszélessége, amelyben a menü áll
Teljes szélesség	A teljes böngészőablak, a bal szélétől

A Függőleges oldalsó menüben a Tároló és a Teljes szélesség egyaránt a menü melletti teret tölti ki.

• A mezőt a szülő menüponton állítsd, ne magán a Plus Mega Menü panelen.
• Sima Függőleges menühöz nem való: ott a teljes szélességű panel kilóghat a képernyőről. Használj helyette Alapértelmezett típust maximális szélességgel.

A panel nem teljes szélességű. Nézd meg, hogy a szülő menüponton van-e beállítva, és hogy elmentetted-e a menüt, majd ürítsd az oldal gyorsítótárát. Ellenőrizd, hogy nincs-e egyedi CSS, amely korlátozza az almenü szélességét.

Mobilmenü

A Reszponzív mobilmenü alapból be van kapcsolva. A Menütípus háromféle lehet:

• Kapcsoló: egy gomb, amely lenyíló panelként nyitja a menüt.
• Swiper: nincs gomb, a főmenüpontok egy sorban állnak, oldalra húzhatók. Az almenük nem látszanak.
• Vásznon kívüli: egy gomb, amely oldalról becsúsztatja a menüt.

A Mobilmenü megnyitása (alapérték 991 px) a legszélesebb képernyő, amely még a mobilmenüt kapja. 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.

A Menütartalom lehet Normál menü (egy WordPress-menü, a Menü kiválasztása mezőben) vagy Sablonmenü (egy Elementor-sablon). A sablonválasztó a Vásznon kívüli típusnál nincs. A Mobilmenü bezárása kattintásra azt szolgálja, hogy a megnyitott menü bezáródjon, ha máshová koppintasz, de csak a menü körüli fejlécre koppintva zár be, az alatta lévő oldaltartalomra koppintva nem.

Stílus

A Stílus fül szakaszai:

Szakasz	Mit stílusoz
Külső navigáció	A teljes menü paddingje, minimális szélessége, háttere, sugara és árnyéka
Függőleges oldalsó címsáv	A függőleges oldalsó menü címsávja
Főmenü	A főmenüpontok: padding, tipográfia, jelző, normál / rámutatás / aktív színek
Rögzített főmenü	A főmenüpontok és a fejléc háttere rögzített állapotban. Csak bekapcsolt Rögzített menü esetén látszik
Almenü	Az almenüpontok és az almenü doboza
Leírás	A menüpontok leírása
Mobil menü	A kapcsológomb és a mobilmenü
Rögzített mobilmenü	A mobilmenü színei rögzített állapotban és a Túlcsordulás görgetése
Főmenü- és almenücímke	Az ismétlős elemekhez adott címkék
Mobilmenü címkéje	A mobilmenü címkéi
Extra opciók	Rámutatásos hatások, a fordított hatás és az utolsó menüpontok almenüjének balra nyitása

A Haladó fül ugyanaz, mint a többi widgetnél.

Korlátok és hibaelhárítás

• A widget csak Pro. Az ingyenes bővítményben a kisebb Navigation Menu Lite van.
• Az almenü-nyilak és a vásznon kívüli menü bezáró gombja a Font Awesome 5 ikonjait használja. Ha az oldalon semmi más nem tölti be a Font Awesome-ot, ezek üres négyzetként jelennek meg, vagy egyáltalán nem.

A Megjelenés → Menük hiányzik. Az olyan blokktémák, mint a Twenty Twenty-Five, elrejtik a Menük képernyőt. Használd az Ismétlő menütípust, vagy egy klasszikus témát, például a Nexteret vagy a Hello Elementort.

A menü üres. Az Alapértelmezett típusnál válassz menüt a Tartalom → Menü kiválasztása mezőben. Az Ismétlő típusnál vegyél fel elemeket. A mobilmenühöz a Mobil menü → Menü kiválasztása mezőben is válassz menüt.