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

> Mega menü készítése a Plus Mega Menu panelekből és egy WordPress-menüből: panelek tervezése, a menüelem mezői, szélesség, címkék, valamint a függőleges és az 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](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/karuszell-navigacio-navigacio-menu-ismetlo/) 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.

![A Plus Mega Menu elemeinek listája két közzétett panellel](./kepek/karuszell-navigacio-6-mega-menu-lista.webp)

*A Plus Mega Menu elemeinek listája két közzétett panellel* (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.

![A Megjelenés → Menük oldal: a Szolgáltatások panel a Szolgáltatások egyéni hivatkozás alá húzva, a menüelem mezőivel](./kepek/karuszell-navigacio-6-mega-menu-elem-mezok.webp)

*A Megjelenés → Menük oldal: a Szolgáltatások panel a Szolgáltatások egyéni hivatkozás alá húzva, a menüelem mezőivel* (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.

![Teljes szélességű mega menü: a panel három oszlopban nyílik, a Bolt menüponton Új címke](./kepek/karuszell-navigacio-6-mega-teljes.webp)

*Teljes szélességű mega menü: a panel három oszlopban nyílik, a Bolt menüponton Új címke* (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értelmezett**re, 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.

![Függőleges mega menü: a panel a Szolgáltatások menüpont alatt nyílik](./kepek/karuszell-navigacio-6-mega-fuggoleges.webp)

*Függőleges mega menü: a panel a Szolgáltatások menüpont alatt nyílik* (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értelmezett**re 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ég**re.
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ü](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/karuszell-navigacio-navigacio-menu-oldalso/) fejezetet.

![Oldalsó mega menü: a panel a menü mellett nyílik](./kepek/karuszell-navigacio-6-mega-oldalso.webp)

*Oldalsó mega menü: a panel a menü mellett nyílik* (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.