# Legördülő menü elem

> A Legördülő menü elem beállításai: kapcsoló szöveg és ikon, nyílhegy, panel, megamenü és többszintű működés.

A **Legördülő menü** beágyazható menüelem: egy kapcsolóból (hivatkozás vagy szöveg, opcionális ikongombbal) és egy legördülő panelből áll. A panel alapértelmezett belső szerkezete egy `ul` címkéjű **Blokk** (`brx-dropdown-content` osztállyal), benne hivatkozásokkal. Használd a [Navigáció (Beágyazható elemekkel)](https://hub.hellowp.io/hu/plugins/bricks-child/elemek-navigacio/) elemben vagy hasonló szerkezetekben.

![A Legördülő menü elem beállításai a szerkesztő bal oldali paneljén](./kepek/elemek-3-dropdown.webp)

*A Legördülő menü elem beállításai a szerkesztő bal oldali paneljén* (https://minta-bolt.hu/elemek/?bricks=run)

A képen az alapbeállítások és az **Ikon**, **Nyílhegy**, **Tartalom**, **Megamenü** és **Többszintű** csoport látszik. A **Szerkezet** panelen a navigáción belül a legördülő menü, benne a panelblokk és egy hivatkozás áll.

A gyökér HTML-címke alapértelmezetten `li`. A panel pozicionálását a `bricksSubmenuPosition` szkript végzi.

## Alapbeállítások

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **HTML-címke** | A gyökérelem címkéje, a szerkesztő ellenőrzi. | `li` |
| **Szöveg** | A kapcsoló felirata. | Legördülő menü |
| **Link célja** | Opcionális hivatkozás a szöveg körül (lightbox típus kizárva). | Nincs |
| **Attribútum: aria-label** | A kapcsológomb felirata, ha van ikon. | „Lenyíló menü be- és kikapcsolása” (helyőrző) |

## Ikon

| Beállítás | Mit csinál |
| --- | --- |
| Ikon | Ha meg van adva, a kapcsológombban jelenik meg a szöveg mellett. |
| Ikon padding | Az ikongomb 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. |
| Ikon mérete | Az ikon betűmérete. |
| Ikon színe | Az ikon színe. |
| Ikon átalakítása, Ikon átalakítása (nyitott) | Transzformáció zárt, illetve nyitott (`aria-expanded="true"`) állapotban. |
| Ikon átmenete | CSS-átmenet az ikongombon. |

## Nyílhegy

A legördülő panelen egy választható háromszög-nyílhegy jeleníthető meg. Amint a **Méret** nem nulla, az elem megkapja a `caret` osztályt.

| Beállítás | Mit csinál |
| --- | --- |
| Méret | A nyílhegy mérete. |
| Szín | A nyílhegy színe (nullától eltérő méretnél). |
| Átalakítás | Transzformáció a nyílhegyen. |
| Pozíció | A nyílhegy elhelyezése. |

## Tartalom

| Beállítás | Mit csinál |
| --- | --- |
| Pozíció: statikus | A panel a dokumentum folyamában marad (például **Offcanvas** elemen belül). A statikus legördülő mindig kattintásra nyílik, nem rámutatásra. |
| Kapcsolás ezzel | `click` (kattintás), `hover` (rámutatás) vagy `click or hover`. Statikus pozíciónál rejtett, mert csak kattintás van. |
| Legkisebb szélesség | A panel legkisebb szélessége. |
| Átmenet, Átalakítás, Átalakítás (nyitott) | A panel mozgása; a nyitott állapot a `.open` osztályra vonatkozik. |
| Háttér, Szegély, Dobozárnyék, Tipográfia | A panel megjelenése. |

### Tétel

A panelen belüli hivatkozások és almenükapcsolók sorainak stílusa: **Tartalom igazítása**, **Padding**, **Háttér**, **Szegély**, **Tipográfia**, **Átmenet**.

### Aktív

Az aktuális oldalnak megfelelő tétel (`aria-current="page"`) **Háttér**, **Szegély** és **Tipográfia** beállítása.

## Megamenü

| Beállítás | Mit csinál |
| --- | --- |
| Engedélyezés | Teljes szélességű megamenü-panelt (`brx-has-megamenu`) ad. Alapértelmezetten a teljes rendelkezésre álló szélességet lefedi. |
| CSS-választó (vízszintes) | Opcionális: a panel szélességét és vízszintes helyzetét egy másik elemhez igazítja. |
| CSS-választó (függőleges) | Opcionális: a függőleges igazítás viszonyítási eleme. |

## Többszintű

| Beállítás | Mit csinál |
| --- | --- |
| Engedélyezés | Egyszerre egy almenüszint látszik, kattintással nyílik, a beágyazott legördülők öröklik a viselkedést. |
| Vissza: szöveg | A vissza vezérlő felirata (alapérték: „Vissza”). |
| Vissza: tipográfia, Vissza: háttér | A `.brx-multilevel-back` stílusa. |