# Navigáció

> A webhely menüjének szerkesztése a Navigáció blokkal: menüpontok, almenük, átfedés és beállítások.

A **Navigáció** blokkal a webhely menüjét szerkesztheted: a felépítését és a megjelenését is. A menü minden eleme külön blokk, így a szokásos blokkműveletek (eszköztár, oldalsáv, billentyűparancsok) rájuk is érvényesek.

![A Navigáció blokk a fejléc sablonrészben, jobbra az oldalsávban az Oldal lista két menüponttal](./kepek/temablokkok-navigacio-beallitasok.webp)

*A Navigáció blokk a fejléc sablonrészben, jobbra az oldalsávban az Oldal lista két menüponttal* (https://minta-bolt.hu/wp-admin/site-editor.php?canvas=edit&p=%2Fwp_template_part%2Ftwentytwentyfive%2F%2Fheader)

## A blokk beszúrása

Nyisd meg a blokkbeszúrót, és válaszd a **Navigáció** blokkot, vagy írd be egy új bekezdésben, hogy `/navigation`, és nyomj Entert.

### A blokk első nézete

Ha még nincs menüd, a Navigáció blokk egy **Oldal lista** blokkal indul. Ez automatikusan kiírja az összes közzétett oldalt, és az újonnan közzétett oldalakat is felveszi a menübe.

Egy webhelyen több menüt is kezelhetsz, de egy Navigáció blokk mindig egyet jelenít meg. Ha már van menüd, a blokk azt tölti be; átválthatsz egy másikra, vagy üres menüt hozhatsz létre (lásd lent: a menü beállításai).

### A menü testreszabása előtt

Menüpontok hozzáadásához, törléséhez vagy átrendezéséhez előbb szerkesztésre kell váltani, ami az **Oldal lista** blokkot egyedi oldalhivatkozás-blokkokra alakítja. Ezután az újonnan közzétett oldalak már nem kerülnek automatikusan a menübe.

1. Jelöld ki a Navigáció blokkot.
2. Kattints bármelyik menüpontra, hogy kijelöld az **Oldal lista** blokkot.
3. Kattints a **Szerkesztés** gombra a blokk eszköztárán.
4. Kattints a **Szerkesztés** gombra a megjelenő ablakban.

## A menü testreszabása

### Meglévő menüpontok módosítása

A szerkesztésre váltás után az egyes menüpontokat külön módosíthatod:

1. Jelöld ki a menüpontot.
2. A jobb oldali sáv **Tartalom** füljén módosítsd a beállításokat:

- **Szöveg**: a menüben megjelenő felirat;
- **Hivatkozás**: egy oldal kiválasztása vagy tetszőleges URL megadása;
- **Megnyitás új fülön**: új böngészőlapon nyíljon-e meg a hivatkozás;
- **Szerkesztés**: a hivatkozott oldal szerkesztése;
- **Megtekintés**: a hivatkozott oldal megnyitása;
- **Leírás**: szöveg, amelyet a sablon megjeleníthet a menüben, ha támogatja a hivatkozásleírásokat;
- **Rel attribútumok**: a jelenlegi oldal és a hivatkozott tartalom kapcsolatának megadása.

A **Haladó** és a **Stílusok** fülön további beállítások érhetők el.

### Menüpontok átrendezése

1. Jelöld ki az áthelyezendő menüpontot.
2. Kattints a **Mozgatás felfelé** vagy **Mozgatás lefelé** gombra a blokk eszköztárán.

Másik módszer: húzd át a menüpontot a jobb oldali sávban lévő Lista nézetben.

Az alábbi lépések az eszköztárat használják, de ugyanezek a Lista nézetből is elvégezhetők.

### Meglévő oldal felvétele menüpontként

1. Kattints a **+** gombra a Navigáció blokkban vagy a jobb oldali sáv Lista nézetében. Tipp: ha a kurzort két menüpont közé viszed, megjelenik a **+**, amellyel pontosan oda szúrhatsz be új menüpontot.
2. Írd be az oldal címének egy részét, majd válaszd ki az oldalt.

### Új oldal felvétele menüpontként

Menüszerkesztés közben létrehozhatsz egy üres oldalt, a tartalmát pedig később töltheted fel.

1. Kattints a **+** gombra a Navigáció blokkban vagy a Lista nézetben.
2. Kattints az **Oldal létrehozása** gombra.
3. Add meg az oldal címét.
4. Kapcsold ki a **Közzététel** beállítást, ha nem akarod azonnal közzétenni.
5. Kattints az **Oldal létrehozása** gombra.

### Egyedi hivatkozás felvétele

1. Kattints a **+** gombra a Navigáció blokkban vagy a Lista nézetben.
2. Kattints a **Blokk hozzáadása** gombra.
3. Válaszd az **Egyéni hivatkozás** blokkot.
4. Írd be az URL-t, és nyomj Entert.

### Almenü létrehozása

Almenü egy meglévő menüpont alá:

1. Jelöld ki a menüpontot.
2. Kattints az **Almenü hozzáadása** gombra az eszköztáron.
3. Válassz egy oldalt, írj be egy URL-t, vagy kattints a **Blokk hozzáadása** gombra.

Új almenü létrehozása:

1. Kattints a **+** gombra a Navigáció blokkban vagy a Lista nézetben.
2. Kattints a **Blokk hozzáadása** gombra.
3. Válaszd az **Almenü** blokkot.
4. Válassz egy oldalt, írj be egy URL-t, vagy kattints a **Blokk hozzáadása** gombra. Az Esc megnyomásával bezárhatod az ablakot, és beírhatod az almenü feliratát.

Menüpontok felvétele az almenübe:

1. Kattints az almenü lefelé mutató nyilára.
2. Kattints a **+** gombra az almenüben.
3. Adj hozzá **Oldalhivatkozás**, **Egyéni hivatkozás**, **Almenü** vagy más támogatott blokkot.

### Menüpont törlése

A menüpontot úgy törölheted, mint bármelyik blokkot:

1. Jelöld ki a menüpontot.
2. Nyisd meg a blokk eszköztárának **Egyebek** menüjét, és válaszd a **Törlés** lehetőséget.

## Blokk-beállítások

A jobb oldali sávban a Navigáció blokknak három füle van: a Lista nézet, a **Beállítások** és a **Stílusok**. Ha a sávot nem látod, kattints a **Beállítások** gombra a **Mentés** vagy a **Közzététel** gomb mellett.

### Lista nézet

A Lista nézetben húzással átrendezheted a menüpontokat, és almenüt is létrehozhatsz: húzd a menüpontot egy másik alá, kissé jobbra.

![A Navigáció blokk a Lista nézetben a fejléc sablonrész szerkezetével](./kepek/temablokkok-navigacio-listanezet.webp)

*A Navigáció blokk a Lista nézetben a fejléc sablonrész szerkezetével* (https://minta-bolt.hu/wp-admin/site-editor.php?canvas=edit&p=%2Fwp_template_part%2Ftwentytwentyfive%2F%2Fheader)

A menü neve melletti három pontra (**Beállítások**) kattintva ezek a műveletek érhetők el:

- **Menük**: átváltás egy másik meglévő menüre;
- **Klasszikus menük importálása**: klasszikus menü átalakítása a blokkszerkesztővel használhatóvá (csak akkor jelenik meg, ha van klasszikus menü);
- **Új menü létrehozása**: üres menü létrehozása.

Ha egy menüpont fölé viszed az egeret, jobbra megjelenik a menüpont saját beállításai gomb: ugyanazokat a műveleteket végezheted el vele, mint a szerkesztőfelületen.

### Megjelenítés

![A Navigáció blokk beállításai: almenük, nyíl mutatása, átfedés](./kepek/temablokkok-navigacio-megjelenites.webp)

*A Navigáció blokk beállításai: almenük, nyíl mutatása, átfedés* (https://minta-bolt.hu/wp-admin/site-editor.php?canvas=edit&p=%2Fwp_template_part%2Ftwentytwentyfive%2F%2Fheader)

A **Beállítások** fülön szabályozhatod, hogyan jelenjen meg a menü és az almenük, mobilon is.

- **Almenü láthatósága**: hogyan nyíljanak meg az almenük. **Rámutatás**: amikor a látogató a menüpontra viszi az egeret; **Kattintás**: amikor rákattint.
- **Nyíl mutatása**: nyíl jelenik meg az almenüt tartalmazó menüpontok mellett.

### Borítás (átfedés)

- **Átfedés láthatósága**: összecsukódjon-e a menü menüikonná. **Ki**: soha, minden menüpont látszik; **Mobil**: kisebb képernyőn menüikon látszik, amelyre kattintva megnyílik a teljes menü; **Mindig**: minden méretnél menüikon látszik.

Ha a **Mobil** vagy a **Mindig** lehetőséget választod, megjelenik a menüikon előnézete; erre kattintva további beállítások nyílnak:

- **Ikongomb megjelenítése**: kikapcsolva a „Menü” és „Bezárás” szöveg jelenik meg ikon helyett;
- **Ikon**: az ikon stílusa.

### Átfedéssablon

A menügombra kattintva megnyíló párbeszédpanelt is testreszabhatod. Alapból egy függőleges menüpontlista jelenik meg. Testreszabás:

1. Kattints az **Átfedés létrehozása** gombra az **Átfedéssablon** szakaszban.
2. Az átfedéssablon megnyílik a szerkesztőben; alakítsd ki a mobilmenüt. Egy előre elkészített mintát is választhatsz az oldalsáv **Design** részében.
3. Kattints a **Mentés** gombra.
4. Kattints a szerkesztő tetején a **Vissza** gombra.

A navigációs átfedés ugyanúgy sablonrész, mint a többi (lásd: [Sablonrész](https://hub.hellowp.io/hu/manuals/wordpress/temablokkok/temablokkok-sablonresz/)).

### Haladó

A menü kezelése a **Menü neve** szakaszban történik:

- **Menü neve**: az aktuális menü átnevezése;
- **Menü törlése**: az aktuális menü törlése; ez nem törli a menüből hivatkozott oldalakat, bejegyzéseket vagy más tartalmat;
- **Menük kezelése**: a webhely menüinek megtekintése, létrehozása és módosítása.

Elérhető még a **HTML-horgony**, a **További CSS-osztály(ok)**, a **További CSS** és a **Stílusok** is.

### Stílusok

- **Tipográfia**: betűcsalád, betűméret, megjelenés, sormagasság, betűköz és más tipográfiai beállítások;
- **Szín**: a menü és az almenü szövegének és hátterének színe;
- **Elrendezés**: a menüpontok igazítása és iránya (vízszintes vagy függőleges);
- **Méretek**: a menüpontok közötti térköz.