Legördülő menü elem

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) elemben vagy hasonló szerkezetekben.

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.