Navigációs menü: mega menü WordPress-menüvel, függőleges és oldalsó mega menü

A mega menü széles panelt nyit, benne több oszlopnyi linkkel, képpel vagy gombbal, így a látogató egy egész szekciót egyszerre lát. Nagy webhelyeken és sok kategóriás boltokban hasznos. A Navigációs menü widgettel minden panelt Elementorban tervezel meg, és egy hagyományos WordPress-menübe teszed. Külön mega menü bővítmény nem kell.

A funkció Pro: az ingyenes Navigation Menu Lite widgetben nincs Plus Mega Menu és függőleges oldalsó menü. Ha a mega menüt widgeten belül, az Ismétlő menütípussal akarod felépíteni, olvasd el a menü építése az Ismétlő típussal fejezetet.

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.
• Egy olyan téma, amely mutatja a Megjelenés → Menük oldalt. A blokktémák (például a Twenty Twenty-Five) elrejtik. Ilyenkor a mega menüt az Ismétlő menütípussal építsd.

Így működik

1. Minden panel egy Plus Mega Menu elem: egy kis oldal, amelyet Elementorban tervezel.
2. A Megjelenés → Menük oldalon minden panelt egy hagyományos menüelem alá teszel, például egy „Szolgáltatások” nevű egyéni hivatkozás alá.
3. A Navigációs menü widget ezt a menüt mutatja. A „Szolgáltatások” fölé vitt egér (vagy a rákattintás) megnyitja a panelt.

1. lépés: a panelek megtervezése

A Plus Mega Menu menüpont a vezérlőpult oldalsávjában akkor jelenik meg, ha a Navigation Menu widget be van kapcsolva. Minden panelhez:

1. Nyisd meg a Plus Mega Menu → Új elem hozzáadása oldalt.
2. Adj nevet a panelnek, és kattints a közzétételre.
3. Kattints az Elementoros szerkesztésre, építsd meg a panelt, és mentsd.

https://minta-bolt.hu/wp-admin/edit.php?post_type=plus-mega-menu

A képen a Plus Mega Menu lista két közzétett panellel látszik.

Tartsd közzétéve a panelt: a piszkozat vagy privát panel nem jelenik meg a menüben.

Ha az Elementor hibát mutat, és nem nyitja meg az új Plus Mega Menu elemet, nyisd meg a Beállítások → Közvetlen hivatkozások oldalt, és kattints a mentésre változtatás nélkül. Ez frissíti a WordPress hivatkozásait. Utána nyisd meg újra az elemet.

2. lépés: a WordPress-menü felépítése

1. Nyisd meg a Megjelenés → Menük oldalt, és hozz létre egy menüt (vagy nyiss meg egy meglévőt).
2. Kattints felül a Képernyő-beállítások gombra, és pipáld ki a Plus Mega Menu dobozt. Alapból rejtett.
3. Adj hozzá minden olyan főmenüponthoz egy egyéni hivatkozást, amelynek panelt kell nyitnia, például „Szolgáltatások” az # címmel.
4. A Plus Mega Menu dobozból add hozzá a panelt, és húzd az egyéni hivatkozás alá, hogy almenüpont legyen.
5. Kattints a Menü mentése gombra.

https://minta-bolt.hu/wp-admin/nav-menus.php?action=edit&menu=13

A képen a Szolgáltatások menüelem nyitva áll, alatta a Plus Mega Menu mezők láthatók.

3. lépés: a panel szélessége és a címkék

Nyisd meg a szülő menüelemet (a „Szolgáltatások” elemet). A The Plus Addons ezeket a mezőket adja minden menüelemhez:

Mező	Mit csinál
Mega menu Type	Alapértelmezett: normál szélességű lenyíló. Tároló: olyan széles, mint az oldal tartalmi területe. Teljes szélesség: olyan széles, mint a böngészőablak
Dropdown Max-Width(px)	Fix panelszélesség 100 és 1920 képpont között. Csak Alapértelmezett típussal látszik, és akkor jelenik meg, miután az Alapértelmezett értékkel mentetted a menüt
Dropdown Menu Alignment	Az Alapértelmezett vagy a Középre igazítás a menüelem alatt. Csak Alapértelmezett típusnál
Text Label	Kis jelvény a menüelem mellett, például „Új” vagy „Akció”
Label Color / Label Bg Color	A jelvény szövegének és hátterének színe. Csak akkor látszanak, ha a Text Label ki van töltve
Icon Type	Ikon (osztálynévvel) vagy kép a menüelem előtt

A mezők feliratai a felületen angolul maradnak. Állítsd őket a szülő menüelemen, ne a panelen, és kattints a Menü mentése gombra.

4. lépés: a menü megjelenítése

1. Tedd a Navigációs menü widgetet a fejlécbe.
2. Az Elrendezés szakaszban a Menütípus maradjon Alapértelmezett, a Menü iránya pedig Vízszintes menü (vagy Függőleges menü).
3. A Tartalom → Menü kiválasztása listában válaszd ki a menüt, majd állítsd be a Menü megnyitása rámutatásra/kattintásra és a Menüeffektusok értékét.

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

A képen a Szolgáltatások panelje a böngészőablak teljes szélességén nyílik, három oszloppal, a Bolt menüponton az Új címke látszik.

Korlátok:

• A szélességet a rendszer az oldal betöltésekor és átméretezésekor számolja ki. A Tároló a menüt tartalmazó szakasz vagy tároló keretezett szélességét követi, a Teljes szélesség a böngészőablakét.
• Egy panel szintje van: ne tegyél mega menüt egy másik mega menübe.
• A mobilmenü is megjeleníti a panel tartalmát, a mobilmenün belül. Tervezz olyan panelt, amely keskeny képernyőn is működik.

A panel üres. A Plus Mega Menu elem nincs közzétéve, vagy nem a szülő menüpont almenüpontja. Mindkettőt a Megjelenés → Menük oldalon ellenőrizd.

A teljes szélesség nem teljes. Nézd meg, hogy a Mega menu Type a szülő menüponton van-e beállítva, és hogy elmentetted-e a menüt. Utána ürítsd az oldal gyorsítótárát.

A jelvény színei nem látszanak. Töltsd ki a Text Label mezőt: a színek csak ezt a jelvényt stílusozzák.

Függőleges mega menü

A függőleges mega menü a hosszú kategórialistát egy oszlopban tartja, és a kiválasztott elem alatt gazdag panelt nyit.

1. Építsd meg a panelokat és a WordPress-menüt a fenti 1. és 2. lépés szerint.
2. A Megjelenés → Menük oldalon nyisd ki a szülő menüelemeket, állítsd a Mega menu Type értékét Alapértelmezettre, mentsd a menüt, és adj meg egy Dropdown Max-Width(px) értéket, amely belefér az elrendezésbe, például 700-at.
3. Tedd a Navigációs menü widgetet az oldalsávba, oldalra vagy sablonba. Az Elrendezés szakaszban a Menütípus maradjon Alapértelmezett.
4. A Menü iránya három képe közül (Vízszintes menü, Függőleges menü, Függőleges oldalsó menü) válaszd a másodikat, a Függőleges menüt.
5. A Tartalom → Menü kiválasztása listában válaszd ki a mega menüt, és állítsd be a Menü megnyitása rámutatásra/kattintásra és a Menüeffektusok értékét.

https://minta-bolt.hu/tp-kn6-mega-fugg/

A képen a menüpontok egymás alatt állnak, a Szolgáltatások alatt kinyílt a panel, és lejjebb tolta az alatta lévő elemeket.

• Függőleges menüben a Tároló és a Teljes szélesség az oldalhoz viszonyítva számít, nem a menühez, ezért a panel kifuthat a képernyőről. Az Alapértelmezett típus maximális szélességgel a biztos választás.
• Függőleges menüben csak a Fel-/lecsúsztatás (JS) és az Előtűnés/elhalványulás (JS) menüeffektus érvényes.
• A panel a menüpont alatt nyílik, és lefelé tolja az alatta lévő elemeket, mint egy harmonika. Ha a panelt a menü mellé szeretnéd, használd az oldalsó mega menüt.

A panel kilóg a képernyőről. Állítsd a Mega menu Type értékét Alapértelmezettre egy Dropdown Max-Width(px) értékkel, vagy válts Függőleges oldalsó menüre.

Csak egy sima link látszik, panel nincs. A panelnek közzétett Plus Mega Menu elemnek kell lennie, és a szülő almenüpontjaként kell szerepelnie a Megjelenés → Menük oldalon.

Oldalsó mega menü

Az oldalsó mega menü a kategóriákat egy oszlopban tartja, és mellettük széles panelt nyit. Sok termékcsoportos boltokhoz való.

1. Építsd meg a Plus Mega Menu paneleket és a WordPress-menüt a fenti 1. és 2. lépés szerint. Ha a panelnek ki kell töltenie a menü melletti teret, állítsd a szülő menüelem Mega menu Type értékét Tárolóra vagy Teljes szélességre.
2. Tedd a Navigációs menü widgetet oldalsávba, oldalra vagy sablonba. A Menütípus maradjon Alapértelmezett.
3. A Menü iránya három képe közül válaszd a harmadikat, a Függőleges oldalsó menüt. A képre mutatva megjelenik a neve.
4. A Tartalom szakaszban válaszd ki a mega menüt, és állítsd be a Megnyitás irányát: Bal (alapérték), ha a menü az oldal bal oldalán áll (a panelek a menütől jobbra nyílnak), Jobb, ha a jobb oldalon (a panelek balra nyílnak).
5. A Függőleges oldalsó címsáv (alapból be van kapcsolva) a menü fölé címsávot tesz. A Címsáv megnyitása rámutatásra/kattintásra adja a viselkedését, a Cím a szövegét, lásd az oldalsó menü fejezetet.

https://minta-bolt.hu/tp-kn6-mega-oldalso/

A képen az oszlopos menü mellett jobbra nyílt ki a három oszlopos panel, a címsáv felül látszik.

A panel szélessége Tároló vagy Teljes szélesség esetén a konténer tartalmi szélessége, mínusz a menü szélessége, mínusz 20 képpont. Egy 1140 képpontos konténerben egy 240 képpontos menü mellett a panel 880 képpont széles. Az érték az ablak átméretezésekor újraszámolódik.

• Az oldalsó mega menüt a Navigációs menü Pro widget adja. A Lite widgetben nincs Függőleges oldalsó menü.
• A menünek keretezett (boxed) konténerre van szüksége, mert a panel szélessége a konténer belső szélességéből jön.
• Nézd meg a mobilmenüt is: keskeny képernyőn a látogatók a mobilmenüt kapják, a panel tartalma abban jelenik meg.

A panel kilóg a képernyőről. Állítsd a Megnyitás irányát arra az oldalra, amelyiken a menü áll.

A panel keskenyebb a vártnál. A panel nem lehet szélesebb annál a konténernél, amelyben a widget áll. Szélesítsd a konténert vagy a tartalmi szélességét.