# Mobil menü: felugró panel Elementor-sablonnal

> A Mobil menü kiegészítő kapcsolója Elementor-sablont nyit meg becsúszó panelben: irány, stílus, szélesség, bezáró gomb, viselkedés és korlátok.

A felugró panel rövidre fogja a menüsávot: a sávon a fő linkek maradnak, a többit (további linkek, elérhetőségek, bolt- vagy nyelvváltó) egyetlen gomb nyitja meg egy panelben. A [Mobil menü widget](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/karuszell-navigacio-mobil-menu-attekintes/) a **Kiegészítő kapcsoló** gombjából bármelyik mentett Elementor-sablont becsúszó panelben nyitja meg.

Előfeltételek: a **Mobil menü** widget be van kapcsolva a **The Plus Addons → Widgets** oldalon, és van egy közzétett Elementor-sablon (**Sablonok → Mentett sablonok**) a panel tartalmával.

## Lépések

1. Add hozzá a **Mobil menü** widgetet, válassz **Stílus** értéket, és az **1. menü** szakaszban (2. stílusnál a **Menü 2** szakaszban is) építsd fel a sáv elemeit.
2. Nyisd meg a **Kiegészítő kapcsoló** szakaszt, és kapcsold be a **Kiegészítő kapcsoló** beállítást. A **Kapcsolóikon kiválasztása** mezőben válassz ikont vagy képet, a **Szöveg** mezőbe írd a gomb feliratát, például „Menü”.
3. A **Tartalom** értéke legyen **Sablon**.
4. Az **Elementor-sablonok** listában válaszd ki a sablont.
5. A **Megnyitott tartalom iránya** mutatja, honnan érkezik a panel: **Jobb** (alapérték), **Bal**, **Felül** vagy **Alul**.
6. Válaszd ki a **Megnyíló tartalom stílusát** és a **Tartalom szélességét** (lásd lent), majd tedd közzé az oldalt, és koppints a gombra telefonon.

![A Kiegészítő kapcsoló szakasz sablonnal, iránnyal, stílussal és szélességgel](./kepek/karuszell-navigacio-panel-mobil-menu-kapcsolo.webp)

*A Kiegészítő kapcsoló szakasz sablonnal, iránnyal, stílussal és szélességgel* (https://minta-bolt.hu/wp-admin/post.php?post=18&action=elementor)

A képen a **Tartalom** értéke **Sablon**, alatta az **Elementor-sablonok** lista, a **Megnyitott tartalom iránya**, a **Megnyíló tartalom stílusa**, a **Tartalom szélessége** és az **Egyéni tartalomszélesség/-magasság** látszik.

Zárt állapotban a gomb a sáv végén ül:

![A mobilmenü sávja zárt panellel](./kepek/karuszell-navigacio-mobil-menu-panel-zart.webp)

*A mobilmenü sávja zárt panellel* (https://minta-bolt.hu/tp-kn4-mm-popup/)

A képen a menüsor és a kiegészítő kapcsoló látszik, a panel még rejtve van.

A jobbról nyitott panel 300 px szélesen a képernyő jobb oldalát foglalja el, a bezáró gombbal a jobb felső sarokban, az oldal többi része pedig sötét átfedés mögé kerül:

![A megnyitott panel a Gyors linkek sablonnal és piros bezáró gombbal](./kepek/karuszell-navigacio-mobil-menu-panel-nyitva.webp)

*A megnyitott panel a Gyors linkek sablonnal és piros bezáró gombbal* (https://minta-bolt.hu/tp-kn4-mm-popup/)

A képen a panel sablonja (a gyors linkek felirat) és a piros bezáró gomb látszik, a háttér elsötétült.

## A panel beállításai

| Beállítás | Lehetséges értékek és eredmény |
| --- | --- |
| **Megnyitott tartalom iránya** | **Jobb** vagy **Bal**: oldalpanel csúszik be. **Felül** vagy **Alul**: a képernyő teljes szélességű panelje csúszik le vagy fel. |
| **Megnyíló tartalom stílusa** | **1. stílus**: a panel becsúszik. **2. stílus**: a panel a megnyitásig rejtve marad, és animált háttérrel fedi fel magát. |
| **Tartalom szélessége** | **Egyéni szélesség/magasság**: az **Egyéni tartalomszélesség/-magasság** (alapérték 400 px) az oldalpanel szélességét vagy a felső és alsó panel magasságát adja. **Teljes szélesség/magasság**: a panel kitölti a képernyőt, a **Margin (%)** értékkel minden oldalon bekeretezve, középre igazítva. |

A felső panel alapból 400 px magas, és elsötétíti alatta az oldalt. Teljes szélesség/magasság esetén 10%-os margóval a panel körül keret marad.

## Bezáró gomb és stílus

A panel kinézetét a **Stílus** lap **Kiegészítő kapcsoló sablonja** szakasza adja: **Túlcsordulás**, **Belső padding**, háttér, a bezáró gomb színei és az **Átfedés háttere**.

- A **Bezáró ikon pozíciója** hat sarok és szél közül választ helyet a bezáró gombnak (alapérték: jobb felül).
- Az **Automatikus** érték külön bezáró gombot nem rajzol: amíg a panel nyitva van, a sávon lévő kiegészítő kapcsoló X-szé alakul, és az zárja be a panelt.

## Hogyan működik

- Amíg a panel nyitva van, az oldal többi részét sötét átfedés takarja.
- A bezáró gomb bezárja a panelt, ahogy a panel melletti sötét átfedésre koppintás is.
- Az alapértelmezett 400 px-es oldalpanel a legtöbb telefonnál szélesebb, ezért az egész képernyőt eltakarja, és csak a bezáró gomb marad. Az **Egyéni tartalomszélesség/-magasság** értékét csökkentve látszik az oldal egy része.
- A kiegészítő kapcsoló az osztott menü (2. stílus) közepén is működik.

## Korlátok

- A sablonnak közzétettnek kell lennie. Piszkozat sablonnál a látogatók „Unauthorized Access” üzenetet látnak a panelben. Ha nincs sablon kiválasztva, a panel üresen nyílik.
- Billentyűzettel a kiegészítő kapcsoló gomb a Tab billentyűvel nem érhető el. Zárt panelnél a Tab a rejtett panel linkjein halad végig.

## Hibaelhárítás

**A panelben „Unauthorized Access” üzenet van.** Tedd közzé a sablont a **Sablonok → Mentett sablonok** alatt, vagy válassz egy közzétettet.

**A panel üres.** Válassz sablont az **Elementor-sablonok** listában.

**A panel a teljes telefonképernyőt eltakarja.** Állítsd az **Egyéni tartalomszélesség/-magasság** értékét a telefon szélessége alá, például 300 px-re.