# Navigation Menu Lite: a menü Elementor-widgetként

> A Navigation Menu Lite widget bekapcsolása, a menü beállítása, vízszintes és függőleges elrendezés, a stílus lap és a hibaelhárítás.

A **Navigation Menu Lite** a **Megjelenés → Menük** alatt már elkészített menüt Elementor-widgetként jeleníti meg. Betehetsz egy fejléc-sablonba, egy oldalsávba vagy egy oldalba, és ott stílusozhatod. A widget az ingyenes bővítményben is megvan, a Pro nélkül is működik. Vízszintes vagy függőleges sávot készíthetsz vele, a lenyíló almenük hover vagy kattintás hatására nyílnak, és egy beállítható szélesség alatt hamburger menüre vált.

A widget panelje jelenleg angol feliratokat mutat (a fejléc és a fülek magyarok), ezért a leírásban a feliratok a képernyőn látható alakjukban szerepelnek.

## Mit tud, és mit nem

A Pro csomagban egy másik, majdnem azonos nevű widget is van, a **Navigation Menu**. Mielőtt bármit beállítasz, nézd meg a panel címét: a Lite widgetnél **Navigation Menu Lite szerkesztése** áll.

| Navigation Menu Lite (ingyenes) | Navigation Menu (Pro) |
| --- | --- |
| Vízszintes vagy függőleges sáv | Vízszintes, függőleges és függőleges oldalsáv |
| Lenyíló almenük, hover vagy kattintás | Ugyanez, plusz Elementor-sablonból épített mega menü |
| Beépített hamburger menü egy töréspont alatt | Hamburger, off-canvas, swiper és teljes képernyős mobilmenü |
| Két almenü-megjelenési effekt | Ragadós fejlécmenü, felgörgetésre ragadó és görgetésre zsugorodó menü |
| A fő menü, az almenü és a mobilmenü stílusa | Mindez, plusz elemenkénti ikon, kép, címke és leírás |

Ha a jobb oldali oszlopból bármi kell, a Pro widgetet használd.

## Bekapcsolás

1. Nyisd meg: **The Plus Addons → Widgets**.
2. Keress rá a **TP Navigation Menu Lite** névre, és kapcsold be. Bekapcsolás nélkül a widget nem jelenik meg az Elementor panelen.

Az Elementor szerkesztőjében **Navigation Menu Lite** néven találod.

Szükséged van egy WordPress menüre is: előbb hozd létre a **Megjelenés → Menük** alatt. A widget nem tárol saját menüelemeket, hanem a kiválasztott menüt rajzolja ki. Blokktémánál (például Twenty Twenty-Five) a WordPress elrejti a **Menük** oldalt: nyisd meg közvetlenül a `/wp-admin/nav-menus.php` címet, vagy használj klasszikus témát.

Fejléc-sablonhoz használhatod az ingyenes Nexter Buildert vagy az Elementor Pro Theme Builderét.

## A menü beállítása

1. Add a **Navigation Menu Lite** widgetet a fejléc-sablonhoz, az oldalsávhoz vagy az oldalhoz.
2. A **Navigation Bar** szakaszban a **Menu Type** maradjon **Default**. Ez nem a menüt választja ki, hanem azt, hogy a widget WordPress menüt jelenít meg (**Default**), vagy olyan elemeket, amelyeket magában a widgetben gépelsz be (**Repeater**).
3. A **Select Menu** listából válaszd ki a menüt. Amíg nem választasz, a vászon üres marad.
4. A **Menu Direction** két képes választó: a bal oldali kép a **vízszintes**, a jobb oldali a **függőleges** menü. A kiválasztott kép kerettel jelenik meg.
5. Az **Alignment** a teljes menüt balra, középre vagy jobbra igazítja a tárolóban. Alapértéke középre.
6. A **Menu Effects** adja meg, hogyan jelenjen meg a lenyíló panel: a **Style 1** lecsúsztatja, a **Style 2** áttűnéssel mutatja.

![A Navigation Menu Lite Navigation Bar szakasza a menü kiválasztásával](./kepek/karuszell-navigacio-2-nav-panel.webp)

*A Navigation Menu Lite Navigation Bar szakasza a menü kiválasztásával* (https://minta-bolt.hu/wp-admin/post.php?post=62&action=elementor)

A képen a **Select Menu** a „Főmenü” menüre van állítva, a **Menu Direction** bal oldali (vízszintes) képe van kijelölve.

Mentés után a menü megjelenik az oldalon.

![A vízszintes menü az oldalon, középre igazítva](./kepek/karuszell-navigacio-2-nav-vizszintes.webp)

*A vízszintes menü az oldalon, középre igazítva* (https://minta-bolt.hu/tp-kn2-nav/)

A képen a menüpontok egy sorban állnak, középre igazítva.

A szülőelemre mutatva kinyílik az almenüje.

![A vízszintes menü a kinyitott Szolgáltatások almenüvel](./kepek/karuszell-navigacio-2-nav-hover-almenu.webp)

*A vízszintes menü a kinyitott Szolgáltatások almenüvel* (https://minta-bolt.hu/tp-kn2-nav/)

A képen a **Szolgáltatások** szülőelem alatt a három almenüpont látszik.

## Függőleges menü

A függőleges menü az elemeket egymás alá teszi, ezért oldalsávba, keskeny oszlopba vagy dokumentációs oldalra való.

1. Add a **Navigation Menu Lite** widgetet oda, ahol a függőleges menünek lennie kell: egy oldalsáv-tárolóba, egy keskeny oszlopba vagy egy fejléc-sablonba.
2. A **Navigation Bar** szakaszban a **Menu Type** maradjon **Default**, a **Select Menu** listából válaszd ki a menüt.
3. A **Menu Direction** mezőben kattints a jobb oldali képre.
4. Az **Alignment** legyen balra: az alapérték (középre) egy oldalsávban rendszerint rosszul mutat, mert minden elemet középre tesz.
5. Frissítsd az oldalt. Az elemek egymás alatt jelennek meg, és a szülőelemek almenüje továbbra is hover vagy kattintás hatására nyílik.

![A függőleges menü az oldal bal oldalán, kinyitott almenüvel](./kepek/karuszell-navigacio-2-nav-fuggoleges.webp)

*A függőleges menü az oldal bal oldalán, kinyitott almenüvel* (https://minta-bolt.hu/tp-kn2-nav-fugg/)

A képen az elemek egymás alatt állnak balra igazítva, a **Szolgáltatások** alatt az almenüvel.

A függőleges menü beállításai:

| Beállítás | Hol | Mit csinál | Alapérték |
| --- | --- | --- | --- |
| **Menu Direction** | Tartalom → Navigation Bar | Két kép: a bal a vízszintes sor, a jobb a függőleges oszlop. | Vízszintes |
| **Select Menu** | Tartalom → Navigation Bar | A kirajzolt WordPress menü. | Nincs |
| **Alignment** | Tartalom → Navigation Bar | Balra, középre vagy jobbra igazítás a tárolóban. | Középre |
| **Sub Menu Width** | Stílus → Sub Menu | A lenyíló panel szélessége. Keskeny oldalsávban fontosabb, mint fejlécben. | |

Jó tudni:

- A widget nem építi újra a menüt: azt rajzolja ki, ami a kiválasztott menüben van. A **Menük** oldalon végzett módosítás mindenhol megjelenik, ahol a menüt használod.
- Az almenük függőleges módban is működnek, a **Hover Sub-Menu** és a **Click Sub-Menu** ugyanúgy, mint vízszintes sávban.
- A lenyíló panel a szülőelem bal széléhez közel nyílik, nem mellette.
- A **Responsive Mobile Menu** függőleges menünél is él: a **Open Mobile Menu** értéke alatt a lista hamburger menüre vált.

Korlátok:

- Nincs az oldal szélén becsúszó függőleges oldalpanel. Ez a Pro **Navigation Menu** widget tudása.
- Az almenü nem marad kinyitva azon az oldalon, amelyre az egyik eleme mutat.
- Alapmódban a menüelemekhez nem adható ikon, kép vagy jelvény.
- A függőleges menü nem „ragad” görgetéskor: használd az Elementor saját ragadós beállítását azon a tárolón, amely a menüt tartalmazza.

## A Style lap

A **Stílus** lapnak három szakasza van:

- **Main Menu**: a felső szintű elemek belső margója, betűtípusa, színei és szegélye, külön **Normal**, **Hover** és **Active** fülön. Itt van a **Main Menu Indicator Style** is, amelynek alapértéke **None**: ha a lenyílót jelző nyilat szeretnéd az almenüs elemek mellett, állítsd **Style 1**-re.
- **Sub Menu**: a lenyíló panel szélessége, belső margója, szegélye és színei, saját **Sub Menu Indicator Style** beállítással.
- **Mobile Menu**: csak akkor látszik, ha a **Responsive Mobile Menu** be van kapcsolva. A kapcsoló magassága, távolsága, színe és a megnyitott panel betűtípusa.

A mozgáseffektek, az egyéni CSS, a pozicionálás és a láthatóság a **Haladó** lapon van, mint minden Elementor-widgetnél.

## Hogyan működik

- Alapmódban (**Default**) a widget nem tárol menüelemet: a **Menük** oldalon szerkesztett menü minden widgeten frissül.
- A **Menu Effects** csak **Hover Sub-Menu** módban változtatja a megjelenést. **Click Sub-Menu** módban a panel mindig kb. 0,4 másodperc alatt csúszik ki, akármelyik stílus van kiválasztva.
- A hamburger ikon két vonal, az alakja nem módosítható: a **Stílus** lapon a magassága, távolsága és színe állítható.

## Korlátok

- Nincs mega menü: a lenyíló panelben csak menülinkek lehetnek. Elementor-sablon a lenyílóban a Pro **Navigation Menu** tudása.
- Nincs ragadós, off-canvas, swiper vagy teljes képernyős mobilmenü, és alapmódban nincs elemenkénti ikon, kép, jelvény vagy leírás.
- A **Menu Hover/Click** az egész widgetre érvényes, nem lehet egy menüben hoverre és kattintásra nyíló elemet keverni.
- Az almenü nem marad kinyitva azon az oldalon, amelyre a gyermekelem mutat. Erre nincs beállítás.
- Ha az **Open Mobile Menu** értékét 991 px alá viszed, a lenyíló almenük nem nyílnak ki a te értéked és 991 px között.

## Hibaelhárítás

**A vászon üres a widget hozzáadása után.** A **Select Menu** még nincs beállítva, vagy nincs még menü. Hozz létre egyet a **Megjelenés → Menük** alatt, majd válaszd ki. Blokktémánál a `/wp-admin/nav-menus.php` címen éred el.

**Nincs nyíl az almenüs elemek mellett.** A **Main Menu Indicator Style** alapértéke **None**. Állítsd **Style 1**-re. A beágyazott szintekhez ugyanezt tedd a **Sub Menu Indicator Style** mezővel.

**A hamburger üres panelt nyit meg telefonon.** A **Mobile Menu** szakasz **Select Menu** mezője külön beállítás, és üresen indul. Ott is válassz menüt.

**Az almenük nem nyílnak keskeny laptopon vagy táblagépen.** Az **Open Mobile Menu** értéke 991 px alatt van. A te értéked és 991 px között a vízszintes sáv látszik, de a lenyílókat nyitó szkript még nem fut. Hagyd az **Open Mobile Menu** értékét 991 vagy afölött.

**A szülőelemre kattintva nem a saját oldala töltődik be.** **Click Sub-Menu** módban az almenüs szülőelem csak nyitja és zárja az almenüt, a saját linkjét nem követi. Vedd fel a szülőoldalt az almenü első elemeként is, ha a látogatóknak el kell jutniuk oda.

A hover és a kattintás részletei az [almenük nyitásáról szóló fejezetben](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/karuszell-navigacio-navigacio-lite-almenuk/), a mobilmenüé a [hamburger menü fejezetben](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/karuszell-navigacio-navigacio-lite-mobil/) olvashatók.