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

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.

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.

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.

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.

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, a mobilmenüé a hamburger menü fejezetben olvashatók.