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

> A Pro Navigációs menü widget beállításai: menütípus és irány, almenü nyitása rámutatásra vagy kattintásra, menüeffektusok, függőleges menü, teljes szélességű mega menü, mobilmenü és stílusszakaszok.

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](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/karuszell-navigacio-navigacio-lite-attekintes/) 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.

![A Navigációs menü widget Tartalom szakasza: menü, almenü megnyitása és menüeffektus](./kepek/karuszell-navigacio-5-panel-menu-tartalom.webp)

*A Navigációs menü widget Tartalom szakasza: menü, almenü megnyitása és menüeffektus* (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é.

![Almenü, amely rámutatásra nyílik a közzétett oldalon](./kepek/karuszell-navigacio-5-menu-hover.webp)

*Almenü, amely rámutatásra nyílik a közzétett oldalon* (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.

![Almenü, amely kattintásra nyílik a közzétett oldalon](./kepek/karuszell-navigacio-5-menu-kattintas.webp)

*Almenü, amely kattintásra nyílik a közzétett oldalon* (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.

![Függőleges menü a közzétett oldalon: a menüpontok egy oszlopban állnak](./kepek/karuszell-navigacio-5-menu-fuggoleges.webp)

*Függőleges menü a közzétett oldalon: a menüpontok egy oszlopban állnak* (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.