# Hamburger panel

> A Hamburger panel widget: bekapcsolás, elhelyezés, tartalmi és stílusbeállítások, gombra nyíló panel tetszőleges Elementor sablonnal.

A **Hamburger panel** egy gombot tesz az oldalra. A gombra kattintva egy panel nyílik meg, benne olyan tartalommal, amelyet előre sablonként elkészítettél. Így a kevésbé fontos tartalmat egy kattintás mögé rejtheted.

## Bekapcsolás és elhelyezés

A widgetet a **Crocoblock → JetPlugins Settings → JetBlocks → Widgetek és kiterjesztések** lapon kapcsolhatod be. Csak azokat a widgeteket hagyd bekapcsolva, amelyeket használsz, mert minden aktív widget terheli az oldalt.

Az Elementorban a **Hamburger panel** widgetet a **JetBlocks** csoportban találod, vagy a widgetkeresőbe beírva a nevét. Oldalra és sablonba is betehető. Tipikus példa: egy webáruház oldalán a panelben a termékszűrők sablonja nyílik meg, így a szűrők mobilon és asztali gépen is egy oldalsó panelből érhetők el.

## Két lépésben: sablon, majd widget

### 1. A panel tartalmának elkészítése

1. A WordPress vezérlőpultján nyisd meg a **Sablonok** menüt, és adj hozzá újat.
2. A sablon típusának válaszd a **Szekció** típust, adj nevet, és kattints a **Create Template** gombra.
3. Az Elementorban építsd meg a tartalmat a kívánt elemekkel és widgetekkel.
4. Mentsd el, és térj vissza a vezérlőpultra.

### 2. A widget elhelyezése

1. Nyisd meg az oldalt (vagy a sablont) az Elementorban.
2. Keresd meg a **Hamburger panel** widgetet, és húzd a vászonra.
3. A **Tartalom** fül **Sablonminta kiválasztása** listájában válaszd ki az előbb elkészített sablont.

Az oldalon a gombra kattintva megnyílik a panel a sablon tartalmával.

## A Tartalom szekció

![A Hamburger panel Tartalom szekciója](./kepek/hamburger-tartalom-1.webp)

*A Hamburger panel Tartalom szekciója* (https://minta-bolt.hu/wp-admin/post.php?post=13&action=elementor)

A képen a gomb ikonjai és felirata, valamint a sablon kiválasztása látszik.

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Ikon** | A gomb ikonja zárt állapotban. | három vonal |
| **Aktív ikon** | A gomb ikonja nyitott állapotban. | X |
| **Bezáró ikon** | A panel bezárásának ikonja. | X |
| **Címke** | A gomb felirata. | Továbbiak |
| **Kapcsoló illesztése** | A gomb igazítása: **Indítás**, **Középre**, **Vége**. Eszközönként állítható. | nincs kijelölve |
| **Sablonminta kiválasztása** | A panelben megjelenő sablon. | üres |

## A Beállítások szekció

![A Hamburger panel Beállítások szekciója](./kepek/hamburger-tartalom-2.webp)

*A Hamburger panel Beállítások szekciója* (https://minta-bolt.hu/wp-admin/post.php?post=13&action=elementor)

A képen a panel megjelenésének beállításai láthatók.

| Beállítás | Mit csinál |
| --- | --- |
| **Pozíció** | A panel melyik oldalon nyílik: **Jobb** vagy **Bal**. |
| **Hatás** | A nyitás animációja: **Csúsztatás**, **Áttűnés** vagy **Zoom**. |
| **Z-Index** | A panel rétegsorrendje más elemekhez képest. |
| **AJAX-betöltés használata a sablonhoz** | A sablon tartalmát csak nyitáskor tölti be. |

Ha bekapcsolod az **AJAX-betöltés használata a sablonhoz** kapcsolót, a sablon tartalma csak a gombra kattintáskor töltődik be, és megjelenik mellette a sablon gyorsítótárazását szabályozó kapcsoló is.

A **Címke** mezőbe a **Dinamikus címkék** gombbal dinamikus tartalom is betehető.

## A Stílus fül

A **Stílus** fülön két szekció van: **Panel** és **Kapcsoló**.

### Panel

![A Hamburger panel Stílus fülének Panel szekciója](./kepek/hamburger-stilus-panel.webp)

*A Hamburger panel Stílus fülének Panel szekciója* (https://minta-bolt.hu/wp-admin/post.php?post=5&action=elementor)

A képen a panel konténerének beállításai láthatók, alul a takarás és a bezáró gomb.

| Beállítás | Mit csinál |
| --- | --- |
| **Panel szélessége** | A panel szélessége képpontban vagy más mértékegységben. |
| **Padding** | A panel belső távolsága fent, jobbra, lent és balra. |
| **Háttér típusa** | Egyszínű vagy színátmenetes háttér. |
| **Szegély típusa** | A panel szegélyének stílusa. |
| **Keretsugár** | A panel sarkainak lekerekítése oldalanként. |
| **Dobozárnyék** | A panel árnyéka. |

A **Kitöltés** alcím **Háttérszín** mezője a panel mögötti takarórétegnek ad színt. A **Bezáró gomb** alcímben a **Normál** és a **Rámutatás** fülön külön formázhatod a bezáró gombot (például a **Bezáró ikon** megjelenését).

### Kapcsoló

![A Hamburger panel Stílus fülének Kapcsoló szekciója](./kepek/hamburger-stilus-kapcsolo.webp)

*A Hamburger panel Stílus fülének Kapcsoló szekciója* (https://minta-bolt.hu/wp-admin/post.php?post=5&action=elementor)

A képen a gomb stílusbeállításai láthatók; a panel nyitva van a sablon tartalmával.

A gomb alapbeállításai a **Normál** és a **Rámutatás** fülön külön adhatók meg:

| Beállítás | Mit csinál |
| --- | --- |
| **Háttér típusa** | Egyszínű vagy színátmenetes háttér; színnel vagy háttérképpel. |
| **Padding** | A gomb belső távolsága. |
| **Margó** | A gomb külső távolsága. |
| **Szegély típusa** | A szegély stílusa; kiválasztás után a vastagság és a szín is állítható. |
| **Keretsugár** | A gomb sarkainak lekerekítése. |
| **Dobozárnyék** | A gomb árnyéka. |

Az **Ikonstílusok** alcímben a **Normál** és a **Rámutatás** fülön a **Kapcsolóikon** megjelenését állíthatod. A **Címke stílusai** alcímben ugyanígy külön állítható a címke színe és a betűtípus (tipográfia).

## Eredmény az oldalon

![A Hamburger panel gombja az oldalon](./kepek/hamburger-elooldal.webp)

*A Hamburger panel gombja az oldalon* (https://minta-bolt.hu/demo-hamburger-panel/)

A képen a gomb látszik az ikonnal és a **Továbbiak** felirattal.