# Mobil menü: rögzített alsó sáv, húzható sáv és osztott menü

> Három elrendezés a Mobil menü widgettel: a képernyő aljához rögzített sáv, oldalra húzható (Swiper) sáv és osztott menü középső gombbal.

A [Mobil menü widget](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/karuszell-navigacio-mobil-menu-attekintes/) három gyakori elrendezése: a képernyő aljához (vagy tetejéhez) rögzített sáv, a sok menüponthoz való húzható sáv, és az osztott menü középső gombbal. Mindhárom ugyanazzal a widgettel készül, csak a beállítások mások.

Előfeltétel: a **Mobil menü** widget be van kapcsolva a **The Plus Addons → Widgets** oldalon. Minden elemhez válassz ikont a könyvtárból, mert az alapértelmezett ikon nem jelenik meg az oldalon.

## Rögzített alsó menüsáv

A képernyő aljához rögzített sáv a telefonos alkalmazásokhoz hasonlóan hüvelykujjal elérhető marad görgetés közben.

1. Add hozzá a **Mobil menü** widgetet, és válassz **Stílus** értéket.
2. A **Pozíció** legyen **Rögzített** (ez az alapérték).
3. A **Rögzített pozíció** legyen **Alul** (szintén alapérték). A **Felül** érték a képernyő tetejéhez rögzíti a sávot.
4. A **Mobilmenü megnyitása** értéke a legszélesebb képernyő, amely még látja a sávot, például 767 telefonokra. Szélesebb képernyőn a sáv rejtve marad.
5. Az **1. menü** szakaszban (2. stílusnál a **Menü 2** szakaszban is) vedd fel az elemeket: ikon vagy kép, **Szöveg** és **Link**. Tedd közzé az oldalt, és nyisd meg telefonon.

![A képernyő aljához rögzített menüsáv egy 390 képpont széles oldalon](./kepek/karuszell-navigacio-mobil-menu-sav.webp)

*A képernyő aljához rögzített menüsáv egy 390 képpont széles oldalon* (https://minta-bolt.hu/tp-kn4-mm-sav/)

A képen a sáv az oldal aljához tapad, és a tartalom mögötte görög. A kosár elem sarkában a **Jelölő szövege** jelvény látszik.

| Beállítás | Eredmény |
| --- | --- |
| **Rögzített** és **Alul** (alapérték) | A képernyő aljához rögzített, a teljes szélességet kitöltő sáv, görgetéskor a helyén marad. |
| **Rögzített** és **Felül** | A képernyő tetejéhez rögzített, a teljes szélességet kitöltő sáv. |
| **Abszolút** | A widget helyén marad, a tárolója szélességében, és az oldallal együtt elgörög. |

Tudnivalók:

- A **Mobilmenü megnyitása** egy felső határ és egyetlen érték minden eszközre. Ha üresen hagyod, a sáv minden képernyőn látszik.
- A rögzített sáv az oldal tetején ül, ezért hagyj helyet a tartalom alatt, hogy semmi fontos ne bújjon a sáv mögé.
- A **Felül** értéknél a bejelentkezett felhasználók addig a WordPress eszköztárát látják a sáv fölött, amíg nem görgetnek. A látogatókat ez nem érinti.

## Húzható (Swiper) sáv

Ha több menüpont van, mint amennyi a telefon képernyőjének szélességében elfér, az oldalra húzható sáv minden elemet olvasható méretben tart.

1. A **Mobil menü** szakaszban hagyd az **1. stílust**, és válassz **Pozíció** értéket.
2. Állítsd a **Mobilmenü megnyitása** értékét, például 767-re.
3. Az **1. menü** szakaszban vegyél fel a telefon szélességénél több elemet.
4. Az **Extra opciók** szakaszban a **Megjelenítés** legyen **Swiper** (az alapérték). Tedd közzé az oldalt, és nyisd meg telefonon.

A sáv első elemei látszanak, a többit oldalra húzással éred el. A fenti kép egy tizenkét elemes húzható sávot mutat 390 px széles képernyőn: az utolsó látható elem már félig kilóg.

| Megjelenítés | Amit a látogató lát |
| --- | --- |
| **Swiper** (alapérték) | Az elemek megtartják a szélességüket (alapból 70 px), és oldalra görgethető sávot alkotnak. Kevés elemnél a sáv nem tölti ki a teljes szélességet. |
| **Oszlopok** | Az elemek egyenlő szélességen osztoznak a sávon. Sok elemnél új sorba törnek, ami magasabbá teszi a sávot. |

![Ugyanaz a tizenkét elem Oszlopok megjelenítéssel, két sorba törve](./kepek/karuszell-navigacio-mobil-menu-oszlopok.webp)

*Ugyanaz a tizenkét elem Oszlopok megjelenítéssel, két sorba törve* (https://minta-bolt.hu/tp-kn4-mm-oszlop/)

A képen a tizenkét elem két sorba tört, ezért a sáv jóval magasabb, mint húzható módban.

- A sáv követi az ujjat, és az elengedés után még kicsit mozog, így a hosszú menüben is végig lehet pörgetni.
- A Swiper szkript csak akkor töltődik be, ha a **Megjelenítés** értéke **Swiper**.
- A 2. stílusnál (osztott menü) a bal és a jobb oldal külön húzható sáv lesz.
- Az **Aktív oldaljelző** a megnyitott oldal elemét jelöli, húzás közben nem változik.
- Nincs nyíl vagy pont a lapozáshoz: a nem látszó elemekhez húzni kell.

## Osztott menü középső gombbal

Az osztott menü bal oldalon és jobb oldalon is tart pár linket, középen pedig egy kiemelt gombot, mint a telefonos alkalmazások fülsávja.

1. A **Mobil menü** szakaszban válaszd a második képet, a **2. stílust**.
2. Hagyd a **Pozíció** értékét **Rögzített**, a **Rögzített pozíció** értékét **Alul**.
3. Állítsd be a **Mobilmenü megnyitása** értékét, például 767-et. Ha üres marad, a sáv a táblagépen és az asztali gépen is látszik.
4. Az **1. menü** szakaszban vedd fel a bal oldal elemeit: ikon vagy kép, **Szöveg**, **Link**. Oldalanként két elem jól működik.
5. A **Menü 2** szakaszban vedd fel a jobb oldal elemeit. Ez a szakasz csak a 2. stílusnál látszik.
6. A **Kiegészítő kapcsoló** szakaszban kapcsold be a kapcsolót, adj neki ikont és **Szöveg** értéket, majd a **Tartalom** értékével válaszd ki a működését: **Link** vagy **Sablon**.
7. Az **Extra opciók** szakaszban állítsd a **Megjelenítés** értékét **Oszlopok**-ra, hogy az elemek egyenletesen töltsék ki a szélességet. Tedd közzé az oldalt, és nyisd meg telefonon.

![Osztott mobilmenü telefonon: két elem balra, középen a Kosár gomb, két elem jobbra](./kepek/karuszell-navigacio-mobil-menu-osztott.webp)

*Osztott mobilmenü telefonon: két elem balra, középen a Kosár gomb, két elem jobbra* (https://minta-bolt.hu/tp-kn4-mm-split/)

A képen balra a **Főoldal** és a **Bolt**, középen a **Kosár** kiegészítő kapcsoló, jobbra a **Kedvencek** és a **Fiók** látszik.

Tudnivalók:

- **Oszlopok** módban az elemek és a középső gomb egyenlő részeken osztoznak. Egy 390 px széles telefonon a két-két elem és a gomb öt, egyenként 78 px széles részt ad. Kiegészítő kapcsoló nélkül mindkét oldal a képernyő felét kapja.
- **Swiper** módban mindkét oldal külön húzható sáv 70 px-es elemekkel, ami üres helyet hagy, ha egy oldalon kevés elem van.
- A kinézetet a **Stílus** lapon állíthatod: a **Menü** szakasz az elemek színeit, betűtípusát és hátterét, a **Kiegészítő kapcsoló** a középső gombot, a **Tartalom háttere** magát a sávot.
- A 2. stílusnál a jelvény (**Jelölő szövege**) levágódik az elem szélén, amíg az **Extra opciók → Rögzített szöveg túlcsordulása** értékét **Látható**-ra nem állítod.

## Hibaelhárítás

**A menü asztali gépen is látszik.** Állítsd a **Mobilmenü megnyitása** értékét arra a legnagyobb szélességre, ahol látszania kell, például 767-re.

**A sáv elgörög az oldallal.** A **Pozíció** **Abszolút**. Állítsd **Rögzített**-re.

**Az elemeknél csak szöveg látszik.** Válassz ikont minden elemhez az **1. menü** szakaszban.

**Nincs Menü 2 szakasz.** A **Menü 2** csak a 2. stílusnál jelenik meg.

**Az elemek nem töltik ki a sávot.** Kevés elemnél állítsd a **Megjelenítés** értékét **Oszlopok**-ra.

**A sáv két sorra nőtt.** Az **Oszlopok** megjelenítés sok elemnél új sorba tör. Válts **Swiper**-re, vagy vegyél ki elemeket.