# Speciális navigációs menü, legördülők és mega menü

> A navigációs menü widget elrendezései, egyéni menü készítése, a legördülők szélessége és pozíciója, mega menü.

A **Speciális navigációs menü** widget a fejléc, az oldalsáv és a mobilmenü építőeleme. Kétféle menüt tud megjeleníteni: a WordPressben már létrehozottat, vagy olyat, amelyet közvetlenül a widgetben állítasz össze. Az almenüpontok lehetnek egyszerű szövegek, mentett szakaszok, mentett widgetek vagy mentett konténerek, így mega menü is készíthető belőle. A widget minden stílusbeállítása mindkét menütípusnál működik.

## A widget felvétele és a menü kiválasztása

1. Nyisd meg az oldalt (vagy a fejléc-sablont) az Elementorral.
2. Keresd meg a **Speciális navigációs menü** widgetet, és húzd az oldalra.
3. A **Tartalom** fül **Menü** szakaszában a **Típus** mezőben válaszd a **WordPress menü** értéket.
4. A **Menü** mezőben válaszd ki a **Megjelenés → Menük** alatt létrehozott menüt. Új menüt ugyanott készíthetsz, a widgetben lévő link is oda visz.

![A Speciális navigációs menü widget Tartalom füle a Menü szakasszal](./kepek/fejlec-lablec-nav-tartalom.webp)

*A Speciális navigációs menü widget Tartalom füle a Menü szakasszal* (https://minta-bolt.hu/wp-admin/post.php?post=7&action=elementor)

A képen a **Típus**, a **Menü**, az **Utolsó menüelem** és a **Sématámogatás bekapcsolása** mező látszik.

A **Menü** szakasz további beállításai:

| Beállítás | Mit csinál |
|---|---|
| **Utolsó menüelem** | Az utolsó menüpontot gombként jeleníti meg (például „Kapcsolat” vagy „Vásárlás”). Alapértelmezetten sima menüpont. |
| **Sématámogatás bekapcsolása** | Séma-jelölést (strukturált adatot) ad a menühöz, ami a keresők számára hasznos. |

Egy widgettel több különböző menü is használható az oldalon: minden widgethez külön menüt rendelhetsz.

## Elrendezések

Az **Elrendezés** szakasz **Elrendezés** mezőjében négy lehetőség közül választhatsz.

| Elrendezés | Hogyan működik | Mire való |
|---|---|---|
| **Vízszintes** | A menüpontok egy sorban vannak, az almenük lefelé nyílnak. | Hagyományos fejléc. |
| **Függőleges** | A menüpontok egymás alatt, az almenük a szülő alatt bomlanak ki. | Oldalsáv, lábléc, kicsúszó panel. |
| **Kibontva** | Hamburger ikon jelenik meg, kattintásra a teljes menü az összes almenüvel együtt látszik. | Egyszerű mobilmenü, ahol minden pont azonnal elérhető kell legyen. |
| **Kicsúszó menü** | A hamburger ikonra az oldalról csúszik be a menü, az almenük a panelben nyílnak. | Mobilmenü, mega menü, oldalsáv. |

![A Speciális navigációs menü widget Elrendezés szakasza](./kepek/fejlec-lablec-nav-elrendezes.webp)

*A Speciális navigációs menü widget Elrendezés szakasza* (https://minta-bolt.hu/wp-admin/post.php?post=7&action=elementor)

A képen az elrendezés mellett az igazítás, az almenü megjelenítési módja, az almenü ikonja és animációja, a menüre kattintáskor végzett művelet, valamint a reszponzív törésponttal kapcsolatos beállítások láthatók.

### További elrendezési beállítások

| Beállítás | Értékek |
|---|---|
| **Igazítás** | Bal, közép, jobb, sorkizárt. |
| **Almenü megjelenítésének módja** | **Rámutatás** vagy **Kattintás**. |
| **Almenü ikonja** | **Nyilak**, **Plusz jel** vagy **Klasszikus**. |
| **Almenü animációja** | **Alapértelmezett** vagy **Felfelé csúsztatás**. |
| **Művelet menüre kattintáskor** | **Almenü megnyitása** vagy **Átirányítás a saját hivatkozásra**: ez azt dönti el, mi történik, ha almenüs menüpontra kattintasz. |

A **Kicsúszó menü** elrendezésnél még ezek jelennek meg: **Kicsúszó menü iránya** (balról vagy jobbról), **Megjelenési hatás** (**Csúsztatás** vagy **Tolás**), **Hamburgerikon igazítása** és **Menüelemek igazítása** (balra, középre, jobbra, sorkizárt).

### Reszponzív beállítások és a hamburger menü töréspontja

Az egyik leggyakoribb kérdés, hogy mekkora képernyőnél jelenjen meg a hamburger ikon. Ezt a **Töréspont** mezővel szabályozod (**Tartalom** fül → **Elrendezés** → **Reszponzív**). A beállítás csak a **Vízszintes** és **Függőleges** elrendezésnél érhető el.

| Töréspont | A hamburger ikon itt látszik | A teljes menü itt látszik |
|---|---|---|
| **Mobil (768px >)** | Csak mobilon | Tableten és asztali gépen |
| **Tablet (1025px >)** (alapértelmezett) | Tableten és mobilon | Csak asztali gépen |
| **Nincs** | Soha | Minden eszközön |

Alapból tehát az 1025 képpontnál keskenyebb képernyőn hamburger ikon jelenik meg. Ha azt szeretnéd, hogy tableten még a teljes vízszintes menü látsszon, válaszd a **Mobil (768px >)** értéket. A **Kibontva** és a **Kicsúszó menü** elrendezés képernyőmérettől függetlenül mindig váltógombos, nekik a töréspont nem számít.

A reszponzív szakasz további mezői: **Igazítás** (balra, középre, jobbra), **Teljes szélesség** (a mobilmenü teljes szélességre nyúlik), valamint a **Váltógomb** szakasz, ahol a **Menüikon** és a **Bezáró ikon** választható, és megadható a váltógomb felirata (**Címke megjelenítése**, **Felirat szövege**).

## Egyéni menü készítése a widgetben

Ha nem akarsz külön WordPress-menüt létrehozni, a menüt közvetlenül a widgetben is összerakhatod.

1. A **Tartalom** fül **Menü** szakaszában a **Típus** mezőben válaszd az **Egyéni** értéket.
2. A **Menüpontok** listában alapból két menüpont és hozzájuk tartozó almenü látszik. A **Menüelem** a szülő menüpont, az **Almenü** a hozzá tartozó gyerek.
3. Minden menüponthoz megadhatod a szövegét, a linkjét, a legördülő menü szélességét és pozícióját.
4. Az almenü típusa háromféle lehet: **Szöveg** (ekkor linket is adsz hozzá), **Mentett szakasz** vagy **Mentett widget**. Az almenüpontot át is alakíthatod menüponttá.
5. Új elemet az **Elem hozzáadása** gombbal veszel fel.
6. Állítsd be a stílust, majd tedd közzé az oldalt.

![A Speciális navigációs menü widget egyéni menüvel: két menüpont és két almenü](./kepek/fejlec-lablec-nav-egyedi.webp)

*A Speciális navigációs menü widget egyéni menüvel: két menüpont és két almenü* (https://minta-bolt.hu/wp-admin/post.php?post=7&action=elementor)

A képen az **Egyéni** típus látszik a **Menüpontok** listával és az **Elem hozzáadása** gombbal.

## Legördülő menü szélessége és pozíciója

A szélesség és a pozíció menüpontonként állítható. Ehhez a **Típus** legyen **Egyéni**, az elrendezés pedig **Vízszintes**; más esetben a beállítások nem hatnak. A **Menüelem** alatt a **Link** mező után találod a **Legördülő menü szélessége** mezőt.

| Szélesség | Mit jelent |
|---|---|
| **Alapértelmezett** | 220 képpont. Ez a **Stílus** fül **Legördülő** szakaszában módosítható. |
| **Egyéni** | Te adod meg a szélességet. Ilyenkor a mező alatt megjelenik a **Legördülő menü pozíciója** is. |
| **Equal to Section** | A legördülő a teljes szakasz szélességű, amelyben a widget van. |
| **Egyenlő a konténerrel** | A legördülő a widgetet tartalmazó konténer szélességű. Hasznos, ha a logó a bal oldali oszlopban van, és a legördülőt egészen a logóig szeretnéd kinyújtani. |
| **Equal to Column** | Az oszlop szélessége, amelyben a widget áll. |
| **Equal to Widget** | A widget szélessége, vagyis a kék kijelölő keret. |

A **Legördülő menü pozíciója** azt határozza meg, hogy a legördülő a szülőhöz képest hova igazodik: **Bal** (a szülő bal széléről indul), **Középre** (a szülő közepére igazodik) vagy **Jobb** (a szülő jobb széléhez igazodik).

## Mega menü készítése

A mega menü olyan legördülő, amely nem egyszerű lista, hanem szabadon tervezett tartalom. A widgettel három lépésben készíthető el.

Előfeltétel: a **UAE → Widgetek** oldalon legyen bekapcsolva a navigációs menü widget.

1. A **Tartalom** fül **Menü** szakaszában a **Típus** legyen **Egyéni**.
2. Az almenüben a **Tartalomtípus** mezőben válaszd a **Mentett szakasz** vagy a **Mentett widget** értéket (konténerként mentett elem esetén a **Mentett konténer** is választható). A mentett szakaszt előre létre kell hoznod, különben nem jelenik meg a listában. Mentett widget használatához Elementor Pro kell.
3. A menüponton állítsd be a legördülő szélességét, például **Equal to Section** vagy **Egyenlő a konténerrel**, hogy a mega menü a teljes sávot kitöltse.

Ezzel kész a mega menü.

## Stílus és mozgás

A **Stílus** fül szakaszai:

- **Főmenü**: tipográfia, normál és rámutatási szín (szöveg, háttér, mutató), valamint a **Link rámutatási effektusa** és a hozzá tartozó animáció. Az effektus csak vízszintes elrendezésnél látszik. Itt állítható a **Vízszintes padding**, a **Függőleges padding** és a **Menüpont felső térköze**.
- **Legördülő**: az almenüpontok betűtípusa és színei, árnyék, sarokkerekítés, padding és elválasztó vonal az almenüpontok között. A legördülő szélességét is itt módosíthatod.
- **Váltógomb és bezáró ikon**: az ikon mérete, színe, háttere, a szegély vastagsága és a sarokkerekítés.
- **Gomb**: az **Utolsó menüelem** gombként való megjelenítésekor a gomb tipográfiája, belső térköze, szövegszíne, háttere (szín, színátmenet vagy kép), szegélye, sarokkerekítése és árnyéka.

A widget minden menüpontot egységesen stílusoz. Ha egyetlen menüponthoz külön megjelenés kell, azt egyéni CSS-sel oldhatod meg. A láthatóság és az elrendezés asztali gépen, tableten és mobilon külön állítható.

## Gyakori kérdések

**Használhatok több menüt a widgettel?** Igen. Több WordPress-menüt is létrehozhatsz, és bármelyiket hozzárendelheted a widgethez.

**Mobilbarát a widget?** Igen, beépített váltógombbal rendelkezik, ami mobilon is működik.

**Stílusozhatok egy menüpontot külön?** A widget minden menüpontot globálisan stílusoz; egyedi megjelenéshez használj egyéni CSS-t.