Oldalsó menü és teljes szélességű menü popupból

A Popup Builder widgettel olyan menüt készíthetsz, amely hamburger ikonra kattintva az oldalról csúszik be, vagy teljes szélességben tölti ki a képernyőt. A menü egy Elementor-sablon, ezért a linkek és a kinézet szabadon tervezhetők.

Előkészületek

• A widget a Pro bővítmény része, a The Plus Addons → Widgets oldalon kapcsold be.
• Ha a menünek minden oldalon látszania kell, kell egy fejléc-sablon (az Elementor Pro Theme Builderéből vagy más fejlécépítőből).

Oldalsó (off canvas) menü

1. Hozz létre egy Elementor-sablont „Popup menü” néven a linkjeiddel. Használhatsz sima szöveges linkeket, vagy a Navigációs menü widgetet, ha almenük is kellenek.
2. Szerkeszd a fejléc-sablont, és húzd be a Popup Builder widgetet oda, ahol a hamburger ikonnak lennie kell.
3. A Felugró ablak típusa legyen Csúsztatás (alapérték), vagy Tartalom felfedése, ha a teljes oldalnak félre kell tolódnia a menü mögül.
4. A Megnyitás iránya legyen Bal vagy Jobb, a Felugró ablak szélessége csúszkával pedig szélesítsd vagy keskenyítsd a panelt.
5. A Tartalomtípus legyen Sablon, a Tartalom kiválasztása mezőben válaszd a menü-sablont.
6. A Válaszd ki az opciót mezőben válaszd az Ikon értéket, és az Ikon stílusa mezőben egy stílust, vagy az Egyéni értékkel töltsd fel a saját képed.

https://minta-bolt.hu/pb-oldalso-menu/

A képen a bal oldalon nyílt panel látszik a sablon linkjeivel, az oldal többi része sötétített háttérréteg alatt van.

Bezárás menünél

Az Extra opciók alatt az Esc, a külső kattintás és a linkre kattintás kapcsoló alapból be van kapcsolva. Menünél hagyd bekapcsolva a Felugró ablak bezárása linkre kattintáskor kapcsolót, hogy a panel becsukódjon, amikor a látogató oldalt választ. Ez azért is fontos, mert az ugyanazon az oldalon lévő szakaszra mutató link különben nyitva hagyná a panelt. A másik kettőt csak akkor kapcsold ki, ha a menü maradjon nyitva a bezáró ikon használatáig.

A menü mögötti sötét réteg eltüntetéséhez a Stílus → Megnyitott tartalom → Felugró ablak háttérrétege szakaszban tedd átlátszóvá a hátteret.

Beállítások

Beállítás	Hol	Lehetőségek	Alapérték
Felugró ablak típusa	Tartalom → Tartalom	Csúsztatás, Tartalom felfedése, Sarokdoboz, Modális felugró ablak	Csúsztatás
Megnyitás iránya	Tartalom → Tartalom	Bal, Jobb, Felül, Alul	Bal
Felugró ablak szélessége	Tartalom → Tartalom	Csúszka, eszközönként	300 px
Válaszd ki az opciót	Tartalom → Tartalom	Ikon, Felhívás cselekvésre, Rejtett, Lottie	Felhívás cselekvésre
Ikon stílusa	Tartalom → Tartalom	Stílus 1, 2, 3, Egyéni	Stílus 1
Felugró ablak bezárása linkre kattintáskor	Tartalom → Extra opciók	Be / Ki	Be

Teljes szélességű menü

A teljes képernyős menü minden linknek sok helyet ad, és képes, minimalista fejlécekhez illik. Ugyanaz a widget, csak teljes szélességre állítva.

1. Készíts „Popup menü” sablont nagy betűkkel, bőséges térközzel.
2. A fejléc-sablonba húzd be a Popup Builder widgetet, a Felugró ablak típusa maradjon Csúsztatás.
3. A Megnyitás iránya legyen Felül (teljes képernyős menühöz ez jó), és állítsd a méretet 100%-ra a mértékegységet %-ra váltva. Ha mobilon másként kell, eszközönként külön állítsd.
4. A Tartalomtípus legyen Sablon, és válaszd a menü-sablont.
5. A Válaszd ki az opciót legyen Ikon, az Ikon stílusa vagy a saját képed.

https://minta-bolt.hu/pb-teljes-szelessegu-menu/

A képen a felülről nyílt panel kitölti a teljes szélességet, a bezáró ikon a jobb felső sarokban van. A panel magassága a Felugró ablak szélessége csúszkával állítható.

Bezárás a teljes szélességű menünél

A teljes képernyős popupon nincs „kívül”, ahová kattintani lehetne, ezért a látogató a bezáró ikonnal vagy az Esc billentyűvel zárja be. Hagyd bekapcsolva a Felugró ablak bezárása linkre kattintáskor kapcsolót az Extra opciók alatt, és ellenőrizd a Stílus → Megnyitott tartalom → Bezáró ikon szakaszban, hogy az ikon jól látszik a háttéren.

Beállítás	Hol	Érték teljes képernyős menühöz
Felugró ablak típusa	Tartalom → Tartalom	Csúsztatás
Megnyitás iránya	Tartalom → Tartalom	Felül (vagy Bal / Jobb)
Felugró ablak szélessége	Tartalom → Tartalom	100%
Tartalomtípus	Tartalom → Tartalom	Sablon
Válaszd ki az opciót	Tartalom → Tartalom	Ikon
Felugró ablak bezárása linkre kattintáskor	Tartalom → Extra opciók	Be

Korlátok

• A widget a Pro bővítményben van.
• A menü sablon: a linkek módosításához a sablont kell szerkeszteni, nem a WordPress Megjelenés → Menük oldalát, kivéve ha a sablon olyan menüwidgetet tartalmaz, amely WordPress-menüt olvas.
• A Tartalom felfedése az egész oldalt eltolja. A rögzített vagy ragadós elemek ilyenkor másként viselkedhetnek, ilyenkor használd a Csúsztatás típust.
• Magas menü a popupon belül görgethető. A görgetősáv a Stílus → Tartalom görgetősávja szakaszban stílusozható.

Hibaelhárítás

• A menü nem csukódik be a link után. Kapcsold be a Felugró ablak bezárása linkre kattintáskor kapcsolót az Extra opciók alatt.
• Az ikon nem látszik. Ellenőrizd, hogy a Válaszd ki az opciót értéke Ikon, és hogy a Stílus → Váltó ikon/hamburger színe nem egyezik a fejléc hátterével.
• A menü nem teljes szélességű. Nézd meg, hogy a méret 100%, a mértékegység %, és hogy minden eszközön be van állítva.
• A látogató nem találja a bezáró gombot. Változtasd meg az ikon színét, vagy adj neki hátteret a Stílus → Megnyitott tartalom → Bezáró ikon alatt.