# Navigációs menü: kapcsolós, vásznon kívüli és Swiper mobilmenü, sablonmenü

> A Navigációs menü widget Mobil menü szakasza: kapcsolós (hamburger), vásznon kívüli és Swiper mobilmenü, a töréspont, a kapcsológomb stílusa és Elementor-sablon használata mobilmenüként.

A telefonokon és táblagépeken a menü helyett a **Navigációs menü** widget külön mobilmenüt mutat. Háromféle van: **Kapcsoló** (hamburgergombra lenyíló lista), **Vásznon kívüli** (oldalról becsúszó panel) és **Swiper** (a képernyőn mindig látható, oldalra húzható sor). A teljes widgetet a [Navigációs menü](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/karuszell-navigacio-navigacio-menu-attekintes/) fejezet írja le, itt a mobil rész beállításai vannak.

## Mi kell hozzá

- A **Navigation Menu** widget bekapcsolva a **The Plus Addons → Widgets** oldalon.
- Egy fejlécsablon, amelybe a widgetet teszed, hogy a menü minden oldalon megjelenjen. A fejlécet megépítheted a Nexter Builderrel vagy az Elementor Pro Theme Builderével.
- Egy WordPress-menü a **Megjelenés → Menük** alatt, ha az **Alapértelmezett** menütípust használod.
- Sablonmenühöz egy közzétett Elementor-sablon (**Sablonok → Mentett sablonok**).

A kapcsolós mobilmenü az ingyenes Navigation Menu Lite widgetben is megvan, a vásznon kívüli és a Swiper típus, valamint a ragadós beállítások csak a Pro widgetben.

## A Mobil menü szakasz beállításai

A beállítások a widget **Tartalom** fülén, a **Mobil menü** szakaszban vannak.

![A Navigációs menü Mobil menü szakasza: menütípus, töréspont, kapcsoló stílusa és menütartalom](./kepek/karuszell-navigacio-6-panel-mobil-menu.webp)

*A Navigációs menü Mobil menü szakasza: menütípus, töréspont, kapcsoló stílusa és menütartalom* (https://minta-bolt.hu/wp-admin/post.php?post=63&action=elementor)

A képen a **Reszponzív mobilmenü** kapcsoló, a **Menütípus**, a **Mobilmenü megnyitása** csúszka, a **Kapcsoló stílusa**, a **Kapcsoló illesztése**, a **Navigáció igazítása**, a **Menütartalom** és a **Mobilmenü bezárása kattintásra** látszik.

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Reszponzív mobilmenü** | Bekapcsolja a külön mobilmenüt | Be |
| **Menütípus** | **Kapcsoló**, **Swiper** vagy **Vásznon kívüli** | Kapcsoló |
| **Mobilmenü megnyitása** | Az a legszélesebb képernyő (képpontban), amelyen már a mobilmenü látszik | 991 |
| **Egyéni szélesség** | A vásznon kívüli panel szélessége, legfeljebb 750 képpont. Csak a **Vásznon kívüli** típusnál látszik | |
| **Kapcsoló stílusa** | A gomb kinézete: **Stílus 1** és **Stílus 4** között, vagy **Egyéni** (ikon vagy kép). Csak a **Kapcsoló** típusnál látszik | Stílus 1 |
| **Kapcsoló illesztése** | A gomb balra, középre vagy jobbra kerül. Csak a **Kapcsoló** típusnál látszik | Jobbra |
| **Navigáció igazítása** | A menüpontok balra, középre vagy jobbra igazodnak (normál menünél) | Balra |
| **Menütartalom** | **Normál menü** (WordPress-menü) vagy **Sablonmenü** (Elementor-sablon) | Normál menü |
| **Menü kiválasztása** | A mobilmenüben megjelenő WordPress-menü | |
| **Mobilmenü bezárása kattintásra** | A megnyitott menü bezárul, ha a fejléc más részére koppintasz | Be |

A **Mobilmenü megnyitása** érték minden eszközre egyetlen szélesség, nem eszközönként külön. Ezen a szélességen és keskenyebben a látogató a mobilmenüt látja, szélesebb képernyőn a normál menüt. Ha például 767 képpontot adsz meg, a táblagépek az asztali menüt kapják.

Egyedi kapcsolóstílusnál (**Egyéni**) ikont vagy képet választhatsz a gombhoz, külön a nyitott és a zárt állapothoz.

Ha a **Menü kiválasztása** mező üres marad és a **Menütípus** **Ismétlő**, a mobilmenü az ismétlős menü elemeit mutatja ([Navigációs menü: ismétlő menütípus](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/karuszell-navigacio-navigacio-menu-ismetlo/)). WordPress-menüt akkor válassz itt, ha a mobilmenü más legyen, mint az asztali.

## Kapcsolós (hamburger) mobilmenü

A kapcsolós menü egy gomb mögé rejti a navigációt. A látogató megnyomja a gombot, és a menü lenyílik, így a fejléc kis képernyőn is tiszta marad. Ez az alapértelmezett mobilmenü.

1. A **Tartalom → Elrendezés** szakaszban válaszd ki a **Menütípust**, a **Menü irányát** és a menüt az asztali menühöz.
2. A **Tartalom → Mobil menü** szakaszban ellenőrizd, hogy a **Reszponzív mobilmenü** be van kapcsolva, és a **Menütípus** **Kapcsoló**.
3. Állítsd be a **Mobilmenü megnyitása** értékét. Az alapérték 991 képpont.
4. Válaszd ki a **Kapcsoló stílusát** és a **Kapcsoló illesztését**.
5. A **Menütartalom** legyen **Normál menü**, és a **Menü kiválasztása** mezőben válaszd ki a menüt. A **Navigáció igazítása** a menüpontok helyét adja.
6. Tedd közzé az oldalt, és nézd meg telefonon, vagy keskeny ablakban.

![A kapcsolós mobilmenü nyitva, a Szolgáltatások almenüje lenyitva](./kepek/karuszell-navigacio-6-mobil-kapcsolo.webp)

*A kapcsolós mobilmenü nyitva, a Szolgáltatások almenüje lenyitva* (https://minta-bolt.hu/tp-kn6-toggle/)

A képen a nyitott kapcsológomb (X alakú) alatt a menüpontok állnak, a **Szolgáltatások** alatt lenyílt a három almenüpont.

- A mobilmenüben az almenüs menüpontra koppintva az almenü nyílik meg, és nem a menüpont linkjére lép. Ha a szülő oldalnak is elérhetőnek kell lennie, vedd fel az almenüjébe is.
- A **Mobilmenü bezárása kattintásra** csak akkor zárja be a menüt, ha a gomb körüli fejlécre koppintanak, az alatta lévő oldaltartalomra koppintva nem. A gombra újra koppintva a menü mindig bezárul.
- Az almenünyilak a Font Awesome 5 ikonjait használják. Ha az oldalon semmi más nem tölti be a Font Awesome-ot, ezek kis üres négyzetként látszanak.

## Vásznon kívüli mobilmenü

A vásznon kívüli menü oldalról csúszik be, ha a látogató megnyomja a menügombot, és az oldal fölött áll, nem tolja le a tartalmat.

1. A **Mobil menü** szakaszban állítsd a **Menütípust** **Vásznon kívüli**re.
2. Állítsd be az **Egyéni szélességet** (legfeljebb 750 képpont). A legtöbb telefonhoz a 280 és 320 képpont közötti érték jó.
3. Állítsd be a **Mobilmenü megnyitása** értékét. Az alapérték 991 képpont.
4. Hagyd a **Menütartalmat** **Normál menü**n, válaszd ki a menüt a **Menü kiválasztása** mezőben, és igazítsd a menüpontokat a **Navigáció igazításával**.
5. Tedd közzé az oldalt, és nyisd meg telefonon.

![A vásznon kívüli mobilmenü nyitva: a panel balról csúszik be, a jobb felső sarokban az X](./kepek/karuszell-navigacio-6-mobil-vasznon-kivuli.webp)

*A vásznon kívüli mobilmenü nyitva: a panel balról csúszik be, a jobb felső sarokban az X* (https://minta-bolt.hu/tp-kn6-offcanvas/)

A képen a menü 300 képpontos panelje a bal oldalon áll, a jobb felső sarokban a bezáró X látszik, a panel mellett az oldal tartalma.

A látogató a panel tetején lévő X-szel zárja be a menüt. Az almenüs elemre koppintva itt is az almenü nyílik meg, és nem a menüpont linkje.

Korlátok:

- Nincs **Sablonmenü**: az Elementor-sablonok választója a vásznon kívüli típusnál rejtett. Tervezett mobilmenühöz a **Kapcsoló** típust használd sablonnal.
- A gomb mindig a szokásos három vonal. A **Kapcsoló stílusa** és a **Kapcsoló illesztése** csak a **Kapcsoló** típusra érvényes.
- A bezáró ikon a Font Awesome 5-ből van. Ha az oldalon semmi más nem tölti be a Font Awesome-ot, az X nem látszik.
- A **Mobilmenü bezárása kattintásra** csak a fejléc területére koppintva zár be, az oldal többi részére koppintva nem.

**A panel megnyílik, de nem találom, hogyan zárjam be.** A Font Awesome nincs betöltve az oldalon, ezért a bezáró ikon üres. A panel jobb felső sarkában akkor is ott van, és a Font Awesome betöltése után látszani fog.

**A panel üres.** Válassz menüt a **Mobil menü → Menü kiválasztása** mezőben, és ellenőrizd, hogy a menüben vannak-e elemek.

**A panel alul le van vágva.** A fejlécben valamelyik szülő tárolónak fix magassága van, vagy elrejti a túlcsorduló tartalmat. Töröld a fix magasságot. Ha a fejléc ragadós, kapcsold be a **Stílus → Rögzített mobilmenü → Túlcsordulás görgetése** beállítást.

## Swiper mobilmenü

A Swiper menü gomb nélkül mutatja a főmenüpontokat telefonon, egy sorban, amelyet a látogató oldalra húzhat. Ilyenek a kategóriasávok sok alkalmazásban.

1. A **Mobil menü** szakaszban állítsd a **Menütípust** **Swiper**re.
2. Állítsd be a **Mobilmenü megnyitása** értékét.
3. A **Menütartalom** legyen **Normál menü**, válaszd ki a menüt a **Menü kiválasztása** mezőben. 4 és 8 főmenüponttal működik a legjobban.
4. A **Navigáció igazítása** állítja a sor elemeinek helyét.

![A Swiper mobilmenü: a főmenüpontok egy sorban állnak, oldalra húzhatók](./kepek/karuszell-navigacio-6-mobil-swiper.webp)

*A Swiper mobilmenü: a főmenüpontok egy sorban állnak, oldalra húzhatók* (https://minta-bolt.hu/tp-kn6-swiper/)

A képen a menüpontok egy sorban állnak, a sor a képernyő szélénél levágva folytatódik, és oldalra húzható.

- Nincs gomb, a menü mobil szélességen mindig látszik.
- Csak a főmenüpontok jelennek meg, az almenüpontok nem. A fontos linkeket tedd a főszintre, vagy válaszd a **Kapcsoló** vagy **Vásznon kívüli** típust.
- Nincs **Kapcsoló stílusa** és **Kapcsoló illesztése**.
- A **Sablonmenü** a sor helyett a teljes sablont mutatja, mindig láthatóan. Ez nem rejtett menü.

**Hiányoznak az almenüpontok.** A Swiper csak a főszintet mutatja. Az almenükhöz használd a **Kapcsoló** vagy a **Vásznon kívüli** típust.

**A sor nem húzható.** A menüpontok elférnek a képernyőn, így nincs mit húzni. Egyébként nézd meg a böngésző konzolján a JavaScript-hibákat, és hogy nincs-e egyedi CSS, amely átállítja a menü szélességét.

**A sor üres.** Válassz menüt a **Mobil menü → Menü kiválasztása** mezőben.

## Elementor-sablon mint mobilmenü

A mobilmenüt teljesen megtervezheted Elementorban: logóval, gombokkal, ikonokkal vagy elérhetőségekkel, és a hamburgergomb ezt nyitja meg. A sablont a widget **Sablonmenü** beállítása tölti be.

1. Készíts egy közzétett Elementor-sablont a **Sablonok → Mentett sablonok** alatt. Tervezd a szerkesztő mobil nézetében.
2. Állítsd be az asztali menüt az **Elrendezés** és **Tartalom** szakaszban.
3. A **Mobil menü** szakaszban a **Reszponzív mobilmenü** legyen bekapcsolva, a **Menütípus** pedig **Kapcsoló**.
4. A **Menütartalom** legyen **Sablonmenü**.
5. Válaszd ki a sablont az **Elementor-sablonok** listában. A lista alatti **Create Template** és **Edit Template** gombbal (a felületen angol feliratok) az oldal elhagyása nélkül is megépítheted.

![A kapcsolós mobilmenü a Gyors linkek sablonnal megnyitva](./kepek/karuszell-navigacio-6-mobil-sablon.webp)

*A kapcsolós mobilmenü a Gyors linkek sablonnal megnyitva* (https://minta-bolt.hu/tp-kn6-sablon/)

A képen a nyitott mobilmenü az Elementor-sablon tartalmát, a gyors linkek feliratát mutatja a menüpontlista helyett.

| Menütípus | Sablonmenüvel |
| --- | --- |
| **Kapcsoló** | Működik: a gomb megnyitja és bezárja a sablont |
| **Swiper** | A sablon mindig látszik, gomb nélkül, ezért ez nem hamburgermenü |
| **Vásznon kívüli** | Nem használható: az Elementor-sablonok választója rejtett |

Korlátok:

- A sablonnak közzétettnek kell lennie. Piszkozat sablonnál a látogatók „Unauthorized Access” üzenetet látnak a menü helyett. Tedd közzé, majd ürítsd a gyorsítótárat.
- Tervezz mobilra. A sablon a mobilmenü panelben áll, a széles, többoszlopos elrendezés összezsúfolt.
- Egy töréspont van: a sablon a **Mobilmenü megnyitása** szélességen és keskenyebben látszik.

**A gomb nem csinál semmit.** Nézd meg a böngésző konzolján, hogy más bővítmény okoz-e JavaScript-hibát, és ürítsd a JavaScript-optimalizálást és a gyorsítótárat.

**Az asztali és a mobilmenü oldalanként felváltva jelenik meg.** A fejléc egy régi, gyorsítótárazott példányát látod. Ürítsd az oldal-, a CDN- és az Elementor CSS-gyorsítótárat a mobil beállítások módosítása után.

**A menü rossz szélességnél vált.** Ellenőrizd a **Mobilmenü megnyitása** értékét, és hogy a téma vagy egyedi CSS nem rejti-e el a fejlécet más szélességnél.