# Hamburger menü widget és blokk

> A Hamburger menü widget és blokk használata fejlécben: a Beállítások és a Tartalom rész mezői, a megjelenés a weboldalon.

A **Hamburger menü** a JetMenu önálló eleme: egy kapcsológomb, amely egy menüt tartalmazó panelt nyit. Elementorban **Hamburger menü** widgetként, a blokkszerkesztőben **Hamburger menü** blokként érhető el. A két szerkesztőben a beállítások megegyeznek.

## Követelmények

- Elementor vagy a blokkszerkesztő (Gutenberg).
- A JetMenu aktiválva, és a **Megjelenés → Menük** oldalon legalább egy menü létrehozva.
- Fejlécsablonhoz a Crocoblock sablonszerkesztője (a menüt oldalra is teheted).

## A hamburger menü elhelyezése

### Elementorban

1. Nyisd meg a **Crocoblock → Theme Templates** oldalt, keresd meg a fejlécsablont, és szerkeszd Elementorral. (Egy sima oldalra is ráteheted a widgetet.)
2. A widgetpanel **Jet Menu** csoportjából húzd a **Hamburger menü** widgetet a fejléc megfelelő oszlopába vagy tárolójába.
3. Állítsd be a **Tartalom** fül **Beállítások** és **Tartalom** részét (lásd lent).
4. A **Stílus** fülön alakítsd ki a megjelenést, majd kattints a **Közzététel** gombra.

### A blokkszerkesztőben

1. Nyisd meg a **Crocoblock → Theme Builder** oldalt, a fejléc melletti három pontra kattintva válaszd a tartalom szerkesztését.
2. A blokkszerkesztőben add a fejléchez a **Hamburger menü** blokkot.
3. A jobb oldali panel **Options** és **Content** füle ugyanazokat a mezőket adja, mint a widget. Az **Advanced** fülön a további CSS-osztályokat adhatod meg.
4. Mentsd a fejlécet. A blokk megjelenését a JetStyleManager bővítménnyel szabhatod testre.

A blokk csak SVG-ikonokat támogat.

## A Beállítások rész

![A Hamburger menü widget Beállítások része az Elementorban](./kepek/mobil-hamburger-widget-opciok.webp)

*A Hamburger menü widget Beállítások része az Elementorban* (https://minta-bolt.hu/wp-admin/post.php?post=13&action=elementor)

A képen a **Menü**, a **Menü mobilra**, az **Elrendezés**, a **Kapcsoló pozíciója**, a **Konténer pozíciója** és az almenü mezői láthatók.

| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| **Menü** | A megjelenítendő menü. | Nincs kiválasztva |
| **Menü mobilra** | A mobil eszközön megjelenő menü. Lehet ugyanaz, mint a **Menü**, vagy külön mobilra készített menü. | Nincs kiválasztva |
| **Elrendezés** | **Kicsúszás**: a panel az oldal bal vagy jobb szélénél csúszik be, a háttér elsötétül. **Legördülő menü** és **Tolás** a többi lehetőség. | Kicsúszás |
| **Kapcsoló pozíciója** | **Alapértelmezett**, **Rögzítve a képernyő bal felső sarkához** vagy **Rögzítve a képernyő jobb felső sarkához**. | Alapértelmezett |
| **Konténer pozíciója** | A menüpanel helye: **Jobb** vagy **Bal**. | Bal |
| **Almenü aktiválásának módja** | **Rámutatás** vagy **Kattintás**. | Kattintás |
| **Kiváltó elem** | Mire kell kattintani az almenü nyitásához: **Menüpont** vagy **Almenüikon**. | Menüpont |
| **Almenü elrendezésének megjelenítése** | **Becsúszás** vagy **Legördülő menü**. | Becsúszás |
| **Close Previously Opened Submenu** | Kapcsoló: új almenü nyitásakor a korábban nyitott bezárul. | Ki |
| **Bezárás navigáció után** | A panel bezárul, ha a látogató egy linkre kattint. | Nem |
| **Mega tartalom AJAX-betöltése** | A megatartalom AJAX-szal töltődik be. | Nem |
| **Lock Page Scroll** | Kapcsoló: a menü nyitva tartása alatt az oldal nem görgethető. | Ki |
| **Fejlécsablon kiválasztása** | A menüpanel tetején megjelenő sablon (például logó). | Nincs |
| **Tételek előtti sablonminta kiválasztása** | A menüpontok előtt megjelenő sablon. | Nincs |
| **Tételek utáni sablonminta kiválasztása** | A menüpontok után megjelenő sablon. Ha az előtte és az utána sablont is megadod, az előtte sablon kerül a menüpontok fölé, az utána sablon alájuk. | Nincs |
| **Tétel ikonjának láthatósága** | A menüelem beállításaiban megadott ikon megjelenítése. | Igen |
| **Tétel jelvényének láthatósága** | A menüelem jelvényének megjelenítése. | Igen |
| **Tétel leírásának láthatósága** | A menüelem leírásának megjelenítése. | Nem |
| **Menüpont elválasztója látható** | Elválasztó vonal a menüpontok között. | Nem |
| **Breadcrumb használata?** | Útvonaljelző a menün belül, amely megmutatja, hol jár a látogató. | Igen |
| **Breadcrumb útvonala** | **Teljes** (a teljes útvonal) vagy **Minimalista** (csak az egy szinttel feljebbi elem). Csak bekapcsolt breadcrumbnál látszik. | Teljes |
| **Kapcsológomb betöltésjelzőjének használata?** | Forgó jelzés, ha a menü valamiért nem tud azonnal megnyílni (például lassú kapcsolat miatt). | Igen |

Az ikont, a jelvényt és a leírást a **Megjelenés → Menük** oldalon, a menüelem **Settings** gombjára kattintva adhatod meg ([A menüelem beállításai](https://hub.hellowp.io/hu/plugins/jet-menu/elem-beallitasok/)). A **Betöltésjelző színe** a betöltésjelző bekapcsolása után az **Advanced** stílusrészben állítható.

A **Kiváltó elem** akkor számít, ha az **Almenü aktiválásának módja** **Kattintás**.

## A Tartalom rész

![A Hamburger menü widget Tartalom része](./kepek/mobil-hamburger-widget-tartalom.webp)

*A Hamburger menü widget Tartalom része* (https://minta-bolt.hu/wp-admin/post.php?post=13&action=elementor)

A képen a kapcsoló, a bezárás, a visszalépés és az almenü ikonjai, valamint a kapcsoló szövege látszik.

| Beállítás | Mit csinál |
|---|---|
| **Váltógomb zárt állapotának ikonja** | A kapcsológomb ikonja zárt menünél. |
| **Váltógomb nyitott állapotának ikonja** | A kapcsológomb ikonja nyitott menünél. |
| **Kapcsoló szövege** | A hamburgerikon mellett megjelenő felirat. |
| **Konténer bezárásának ikonja** | A panel bezáró gombjának ikonja. |
| **Konténer visszalépési ikonja** | A visszalépő gomb ikonja. |
| **Vissza felirat** | A visszalépő gomb mellett megjelenő szöveg. |
| **Almenü ikonja** | Az almenüre mutató jelző. |
| **Breadcrumb elválasztóikonja** | Az útvonal elemeit elválasztó ikon. |
| **SVG ikonok kitöltése** | Az SVG-ikonok átveszik az oldal színbeállításait. |

Minden ikonmezőnél választhatsz: nincs ikon, saját SVG feltöltése, vagy ikon az ikontárból. A blokkban a nyitott almenü ikonja külön is állítható.

## A hamburger menü a weboldalon

Nyisd meg az oldalt, amelyen a fejlécet megjelenítetted. A kapcsológomb a beállított szöveggel és ikonnal látszik.

![A hamburger menü kapcsológombja az oldalon](./kepek/mobil-hamburger-fejlec.webp)

*A hamburger menü kapcsológombja az oldalon* (https://minta-bolt.hu/hamburger-menu-teszt/)

A gombra kattintva kinyílik a menüpanel. A képen **Kicsúszás** elrendezés látszik, bal oldali konténerrel: a háttér elsötétül, a panel tetején a bezáró ikon, alatta a menüpontok. Ha egy elemhez almenü tartozik, arra kattintva az is megnyílik.

![A megnyitott hamburger menü](./kepek/mobil-hamburger-nyitva.webp)

*A megnyitott hamburger menü* (https://minta-bolt.hu/hamburger-menu-teszt/)