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

> Képernyőn kívüli (off canvas) oldalsó menü és teljes szélességű menü készítése a Popup Builder widgettel, hamburger ikonnal.

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.

![Megnyitott oldalsó menü: balról becsúszó panel a Menü sablonnal és a bezáró ikonnal](./kepek/popup-builder-oldalso-menu.webp)

*Megnyitott oldalsó menü: balról becsúszó panel a Menü sablonnal és a bezáró ikonnal* (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.

![Teljes szélességű menü megnyitva: a panel az oldal tetején, a teljes szélességet kitöltve, a jobb felső sarokban a bezáró ikonnal](./kepek/popup-builder-teljes-szelessegu-menu.webp)

*Teljes szélességű menü megnyitva: a panel az oldal tetején, a teljes szélességet kitöltve, a jobb felső sarokban a bezáró ikonnal* (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.