# Animált off-canvas menü widget

> Teljes képernyős, animáltan becsúszó menü: menü és mélység, időzítések, menüikon, oldalsó háttér és bezáró gomb.

Az **Animált off-canvas menü** a látható terület mellett helyezkedik el, és az ikonra kattintva csúszik be. Teljes képernyős menüt jelenít meg.

## Tartalom

![Az Animált off-canvas menü szakasz](./kepek/animaciok-es-effektek-off-canvas-menu.webp)

*Az Animált off-canvas menü szakasz* (https://minta-bolt.hu/wp-admin/post.php?post=58&action=elementor)

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Menü kiválasztása** | A **Megjelenés → Menük** képernyőn létrehozott menük közül választhatsz. | |
| **Mélység** | Hány szintet jelenítsen meg a menü hierarchiájából. A 0 az összes szintet jelenti. | 0 |
| **Menüikon igazítása** | A menüikon helye (balra, középre, jobbra; eszközönként külön is). | Jobbra |
| **Menüpozíció** | A teljes képernyős menü helye: **Bal** vagy **Jobb**. | Jobb |
| **Oldalsó háttér** | A teljes képernyős nézetben az oldalsó háttér megjelenítése vagy elrejtése. | Megjelenítés |
| **Sablonminta a menü előtt**, **Sablonminta a menü után** | Bekapcsolva egy Elementor-sablont tehetsz a menü elé vagy mögé a teljes képernyős nézetben. | Nem |

## Animációk ideje

![Az Animációk ideje szakasz](./kepek/animaciok-es-effektek-off-canvas-menu-idozites.webp)

*Az Animációk ideje szakasz* (https://minta-bolt.hu/wp-admin/post.php?post=58&action=elementor)

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Oldalsó háttér megnyitása (ms)** | Az oldalsó háttér nyílásának ideje. | 400 |
| **Menüpanel megnyitása (ms)** | A menüpanel nyílásának ideje. | 400 |
| **Menülista megnyitása (ms)** | A menülista megjelenésének ideje. | 1000 |
| **Késleltetés a menüpontok között (ms)** | Ennyi idő telik el két menüpont megjelenése között. | 500 |

## Stílus

A **Stílus** fülön négy szakasz van: **Animált off-canvas menü**, **Menüikon**, **Oldalsó háttér** és **Bezáró gomb**.

### Animált off-canvas menü

Itt a teljes képernyős menü kinézetét állítod, három csoportban:

- **Menü**: a menü szélessége (eszközönként külön), a menü igazítása, a menüpontok és az almenüpontok tipográfiája (ha a **Mélység** 1-nél nagyobb és van almenü), valamint a gyerekelemet jelző ikon mérete.
- **Színek**: a menü háttere (klasszikus vagy színátmenetes), a szövegszín, a jelző színe és háttere, ha a menüpontnak vannak gyerekei.
- **Hely**: a menü belső margója (padding), a menüpontok és az almenüpontok közti távolság, a gyerekelem-jelző helye.

### Menüikon

![A Menüikon szakasz](./kepek/animaciok-es-effektek-off-canvas-menu-menuikon.webp)

*A Menüikon szakasz* (https://minta-bolt.hu/wp-admin/post.php?post=58&action=elementor)

A **Menüikon típusa** lehet **Sávok**, **Egyéni ikon**, **Kerekített csíkok**, **Pontok**, **9-es rács**, **4-es rács**, **Plusz**, **Nyíl**, **Hullám** vagy **Circle2Bar**. Emellett beállítható:

- a **Menüikon mérete**;
- a **Normál** és **Rámutatás** fülön a **Kitöltési szín**, a **Körvonal színe** és a **Vonalvastagság** (a **2. elem** és **3. elem** az ikon további vonalait állítja);
- a **Kitöltési szín kényszerítése**: bekapcsolva az ikon minden részét kitölti a szín, akkor érdemes használni, ha a másik beállításnak nincs hatása;
- a **Rámutatáskor használt animáció időzítési függvénye**;
- a **Vonalvég**: **Lapos**, **Kerek** vagy **Négyzetes**;
- az ikon burkolóelemének **háttere** (klasszikus vagy színátmenet), **padding**, **szegély**, **keretsugár** és **dobozárnyék**.

### Oldalsó háttér

A **Háttér típusa** itt klasszikus vagy színátmenetes lehet.

### Bezáró gomb

![A Bezáró gomb szakasz](./kepek/animaciok-es-effektek-off-canvas-menu-bezaro-gomb.webp)

*A Bezáró gomb szakasz* (https://minta-bolt.hu/wp-admin/post.php?post=58&action=elementor)

A **Bezáró gomb** kapcsolóval a bezáró gomb ki- és bekapcsolható. Bekapcsolva a következők állíthatók: a **Bezárás típusa** (**X**, **Ikon**, **Kép** vagy **Szöveg**), a **Bezárás színe**, a **Háttérszín** (a **Normál** és **Rámutatás** fülön), a **Szegély típusa**, a **Gomb mérete**, a **Bezárójel vonalvastagsága**, a **Bezárójel mérete (%)**, valamint az **Y pozíció** és **X pozíció**.