MagyarmagyarNavigáció (Beágyazható elemekkel) elem
A beágyazható Navigáció elem: hierarchikus menü legördülő menükkel, többszintű működéssel és mobilmenüvel.
A Navigáció (Beágyazható elemekkel) elem hierarchikus navigációs menüt épít legördülő menükkel, többszintű (multilevel) működéssel és mobilbarát viselkedéssel. A menü elemei beágyazott elemek, ezért tetszőlegesen összetett menürendszer felépíthető. A legördülő részeket a Legördülő menü elem adja.
A képen az HTML-címke és az aria-label mező látszik, alattuk a Felső szint (tétel), a Legördülő menü és a Mobilmenü csoport. A jobb oldali Szerkezet panelen a navigáció, benne egy legördülő menü és egy szöveges hivatkozás látható.
A mobilmenü ki- és bekapcsolásához a Navigációs tételek után szúrj be egy Kapcsoló (Toggle) elemet.
Alapbeállítások
Szekció neve “Alapbeállítások”| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| HTML-címke | A navigáció HTML-címkéje. Dinamikus adat is használható, a szerkesztő ellenőrzi az érvényességét. | nav |
| aria-label | A navigáció akadálymentességi felirata. | Menü |
Felső szint (tétel)
Szekció neve “Felső szint (tétel)”A legfelső szintű menüelemek beállításai.
| Beállítás | Mit csinál |
|---|---|
| Térköz | A felső szintű elemek közti távolság. |
| Tartalom igazítása | A felső szintű elemek vízszintes igazítása. Elavult, a Mobilmenü csoport Elemek igazítása beállítását javasolja helyette. |
| Padding | A felső szintű elemek (hivatkozások, szövegek, ikonok, SVG-k, menükapcsolók) belső távolsága. |
| Háttérszín | A felső szintű elemek háttere. |
| Szegély | A felső szintű elemek szegélye. |
| Tipográfia | A felső szintű elemek betűbeállításai. |
| Átalakítás | Transzformáció a felső szintű elemeken. |
| Átmenet | CSS-átmenet a felső szintű elemeken. |
Aktív állapot
Szekció neve “Aktív állapot”Az aktuális oldalnak megfelelő elemre (aria-current="page") vonatkozik: Háttérszín, Szegély, Tipográfia.
Legördülő menü (csak a felső szinten)
Szekció neve “Legördülő menü (csak a felső szinten)”| Beállítás | Mit csinál |
|---|---|
| Szöveg padding | A legördülő menük szövegének belső távolsága. |
| Ikon padding | A legördülő menük ikonjának belső távolsága. |
| Térköz | A szöveg és az ikon közti távolság a menükapcsolón. |
Legördülő menü csoport
Szekció neve “Legördülő menü csoport”Az összes legördülő menüre vonatkozik.
Szöveg és ikon
Szekció neve “Szöveg és ikon”| Beállítás | Mit csinál |
|---|---|
| Szöveg padding | A legördülő menük szövegének belső távolsága. |
| Ikon padding | Az ikon belső távolsága. |
| Térköz | A szöveg és az ikon közti távolság. |
| Ikon pozíciója | Az ikon helye. Balra állítva az ikon a szöveg elé kerül. Alapérték: jobb. |
| Ikon mérete | Az ikon mérete. |
| Ikon színe | Az ikon színe. |
| Ikon átalakítása | Az ikon transzformációja zárt állapotban. |
| Ikon átalakítása (nyitott) | Az ikon transzformációja nyitott állapotban. |
| Ikon átmenete | Az ikon CSS-átmenete. |
Az ikont az egyes legördülő menüknél külön is beállíthatod.
Tartalom
Szekció neve “Tartalom”A legördülő panel (almenü, megamenü vagy többszintű terület) beállításai.
| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| Legkisebb szélesség | A panel legkisebb szélessége. | Nincs |
| Háttérszín | A panel háttere. | Nincs |
| Szegély | A panel szegélye. | Nincs |
| Dobozárnyék | A panel árnyéka. | Nincs |
| Tipográfia | A panel betűbeállításai. | Nincs |
| Átalakítás | A panel transzformációja zárt állapotban. | Nincs |
| Átalakítás (nyitott) | A panel transzformációja nyitott állapotban. | Nincs |
| Átmenet | A panel CSS-átmenete. | Nincs |
| Z-index | A legördülő elemek rétegsorrendje. | 1001 |
Tétel
Szekció neve “Tétel”A panelen belüli hivatkozásokra és almenükapcsolókra vonatkozik: Padding, Háttér, Szegély, Tipográfia, Átmenet.
Többszintű
Szekció neve “Többszintű”| Beállítás | Mit csinál |
|---|---|
| Engedélyezés | Egyszerre csak az aktív legördülő menü látszik, kattintásra nyílik, a beágyazott legördülők öröklik a többszintű működést. |
| Vissza: szöveg | A vissza gomb felirata, ha be van kapcsolva a többszintű működés. |
| Vissza: tipográfia | A vissza gomb betűbeállításai. |
| Vissza: háttér | A vissza gomb háttérszíne. |
Mobilmenü
Szekció neve “Mobilmenü”| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| Nyitva tartás stílusozás közben | A mobilmenü nyitva marad a szerkesztőben a stílusozás idejére. Nem kerül mentésre. | Ki |
| Elrejtés / megjelenítés töréspontnál | Melyik töréspontnál váltson a mobilmenüre. Lehet minden töréspont, „Mindig” vagy „Soha”. | Mobil fekvő |
| Szélesség, Magasság | A mobilmenü mérete. | Nincs |
| Padding (legördülő) | A legördülő tartalom belső távolsága mobilon, a beágyazott legördülők hierarchiájának megjelenítésére. | Nincs |
| Elemek igazítása | A mobilmenü elemeinek függőleges igazítása. | Nincs |
| Tartalom igazítása | A mobilmenü elemeinek vízszintes igazítása. | Nincs |
| Pozíció | A mobilmenü elhelyezése. | Nincs |
| Háttérszín | A mobilmenü háttérszíne. | Nincs |
A Tétel résznél az Elemek igazítása a mobilmenü tételeinek igazítását adja (a stretch érték nélkül).
Készült: