Menüépítő

A Bricks teljesen reszponzív, akadálymentes és sokféleképpen testreszabható elemkészletet kínál navigációs menük építéséhez. Öt elemből áll, amelyeket szabadon kombinálhatsz, hogy mindenféle asztali és mobilmenüt megtervezz.

https://minta-bolt.hu/template/fo-fejlec/?bricks=run

A képen az elemkeresés eredménye látszik. A Navigáció (Beágyazható) az új menüépítő fő eleme, a Navigációs menü a klasszikus, WordPress-menüt megjelenítő elem.

A jó akadálymentesség és stílus érdekében érdemes néhány bevált gyakorlatot ismerni, ezeket lentebb olvashatod.

Az öt elem

Nav (beágyazható)

Ez a beágyazható elem tartalmazza az asztali és a mobilmenüt is. Mint bármely beágyazható elembe, ebbe is bármilyen Bricks-elemet beletehetsz, nem korlátoz a régi, „lapos” navigációs menü.

Beépített beállítással kiválaszthatod azt a töréspontot, amelynél a mobilmenü megjelenik. A mobilmenü ugyanazt a jelölést és elemeket használja, mint az asztali menü, csak mobileszközökre és kis képernyőkre van optimalizálva és stílusozva.

Teljesen eltérő tartalmú mobilmenüt is tervezhetsz az Offcanvas és a Kapcsoló elemekkel.

Szöveges hivatkozás

Egyszerű, de nagyon hasznos elem navigációs szöveges hivatkozások létrehozásához (szükség esetén ikonnal). Ez jobb, mint egy Alap szöveg elemet hivatkozássá alakítani. A Szöveges hivatkozást természetesen a webhely bármely más részén is használhatod.

Legördülő menü (beágyazható)

A Legördülő menü elemmel teljesen akadálymentes almenüket építhetsz. Annyi szintet ágyazhatsz egymásba, amennyit szeretnél: a legördülő menüben újabb legördülő menüt helyezhetsz el. Azt is megadhatod, mikor nyíljon a legördülő menü: rámutatáskor, kattintáskor vagy mindkettőnél.

A legördülő szöveg vagy hivatkozás melletti kis nyíl akadálymentesítési okból mindig lehetővé teszi, hogy a billentyűzettel (SZÓKÖZ vagy ENTER) nyisd és zárd a legördülőt.

A legördülő menüt egy kattintással teljes értékű, beágyazható mega menüvé alakíthatod, amely lefedi a nézetablak teljes szélességét, vagy igazodik az oldal bármely más elemének szélességéhez és függőleges helyzetéhez.

Többszintű mobilmenüt is készíthetsz, ahol csak az aktív legördülő csúszik be a nézetbe. A legördülő nyílhoz egyéni nyilat is tervezhetsz a beállításokkal.

Kapcsoló

Ez a teljesen akadálymentes „hamburger” kapcsoló ikon/gomb elsősorban a mobilmenü és/vagy az Offcanvas elemek megjelenítésére és elrejtésére való. Többféle animációs effektus közül választhatsz, és saját kapcsoló ikont is megadhatsz.

A Kapcsoló automatikusan felismeri azt az Offcanvas vagy Nav (beágyazható) környezetet, amelyben áll. Ha több kapcsolható elemed van, vagy egy konkrétat akarsz vezérelni, írd be a CSS-szelektorát a vezérlőmezőbe.

Ennél többre is használható, mert beállításokat nyújt bármely, az oldalon lévő elem bármely HTML-attribútumának átkapcsolásához.

Hasonló kiváltókat az interakciókkal is el lehet érni, de a Kapcsoló beépített akadálymentességgel és menüépítő-logikával jön, ami az egész folyamatot gyorsabbá és egyszerűbbé teszi.

Offcanvas (beágyazható)

Az Offcanvas beágyazható, ezért egyedi mobilmenüket hozhatsz létre vele, amelyeknek a tartalma teljesen eltér az asztali menüétől. Bármilyen elemmel feltöltheted, nem korlátozódik menükre.

Két effektussal érkezik: becsúszó (alapértelmezett) és eltolt. A Kapcsoló elemmel nyitható és zárható. A beállítása az alábbi, az Offcanvas beállításáról szóló részben látható.

A Kapcsoló Offcanvas interakcióval az Offcanvas bármely elemről kapcsolható.

Alapértelmezett menüszerkezet

Ha Nav (beágyazható) elemet adsz a vászonhoz, abban 2 Nav hivatkozás, 1 Legördülő menü és 2 Kapcsoló elem lesz (a mobilmenü megnyitásához és bezárásához).

Mivel beágyazható elem, bármilyen Bricks-elemet beletehetsz a menübe.

A „Nav items” (Navigációs elemek) blokk különleges elem: önállóan nem törölhető, mert az összes felső szintű menüelemet tartalmazza, és ez a mobilmenü burkolója is. Ugyanez igaz a Legördülő menün belüli „Content” (Tartalom) div elemre, amely a legördülő tartalmát fogja össze.

Az összes felső szintű menüelemet a Bricks akadálymentesség miatt automatikusan li HTML-címkébe csomagolja. A „Nav items” ul címkét használ. Ugyanez igaz a legördülő szerkezetére.

Alapértelmezett mobilmenü-szerkezet

Alapból a mobilmenü a „Mobil fekvő” töréspontnál válik láthatóvá. A felső szintű menüelemek helyett egy (hamburger) Kapcsoló jelenik meg, amelyre kattintva megnyílik a mobilmenü. A Nav beágyazható elem szerkesztésekor természetesen bármely más töréspontot is kiválaszthatsz.

A „Toggle (Open: Mobile)” címkéjű Kapcsoló nyitja a mobilmenüt. A Kapcsolón többféle animációt választhatsz, amely kattintáskor lejátszódik.

A „Toggle (Close: Mobile)” Kapcsoló a „Nav items” elemen (a mobilmenü burkolóján) belül van.

Mega menük

A mega menü létrehozása nagyon egyszerű: a kiválasztott Legördülő menü elem szerkesztésekor kapcsold be a mega menü beállítást.

Alapból a legördülő tartalom a teljes (nézetablak) szélességet kitölti. Megadhatsz „CSS-szelektor” értéket is, amelynek szélességéhez és vízszintes helyzetéhez a mega menü igazodik, például a külső Tároló elem id azonosítóját.

A legördülő „Content” div elem, így bármilyen mega menü elrendezést létrehozhatsz, például egyszerű háromoszlopos mega menüt.

WordPress mega menü

A WordPress-menüdhöz is adhatsz mega menüt, ha bekapcsolod a Navigációs menü elem „Mega menü” beállítását. Ezután építsd meg a mega menüt egy új sablonban (sablontípus: Szakasz). Majd lépj a Megjelenés → Menük oldalra, nyisd ki azt a felső szintű menüelemet, amely alatt a mega menüt meg akarod jeleníteni, és a „Mega menü” opcióknál válaszd ki a mega menü sablonodat.

A mega menü sablon ezután az élő oldalon megjelenik, ha az egeret a menüelem fölé viszed.

Többszintű legördülő menük

A többszintű legördülő menü hasonlóan egyszerű. Kapcsold be a „Többszintű” beállítást egyes Legördülő menü elemeken, vagy közvetlenül a Nav (beágyazható) elemen, hogy az összes legördülőre érvényes legyen.

A „Többszintű” azt jelenti, hogy csak az aktív legördülő tartalom látható. Különösen hasznos sok elemet tartalmazó vagy több egymásba ágyazott legördülőt tartalmazó legördülő menüknél, amelyek valószínűleg túlnyúlnának a nézetablakon, főleg mobilon.

Testreszabható „vissza” hivatkozást is beállíthatsz, amely minden legördülőszint első eleme lesz.

Mivel csak az aktív legördülő látható, a többszintű legördülő automatikusan kattintásra nyílik, nem rámutatásra.

A „Többszintű” beállítást a legördülő gyökérszintjén kell bekapcsolni, az összes alsó szintű legördülőnek alapból megvan ez a képessége.

WordPress többszintű menük

A WordPress-almenüidet is többszintű menüvé alakíthatod. Kapcsold be a Navigációs menü elem „Többszintű” beállítását, majd a Megjelenés → Menük oldalon aktiváld a WordPress-menüelemek „Többszintű” beállítását.

Statikus (pozíciójú) legördülő menük

Alapból a legördülő tartalom absolute pozíciójú, vagyis kikerül a dokumentumfolyamból. Ez az elvárt asztali menüben.

Ha viszont például a legördülő egy Offcanvas elemen belül van, valószínűleg nem ezt a viselkedést szeretnéd. Ilyenkor a legördülő tartalmát kattintásra, közvetlenül a legördülő kapcsoló alatt és a normál dokumentumfolyamban akarod megjeleníteni.

Ehhez a kiválasztott Legördülő menü szerkesztésekor kapcsold be a „Pozíció: statikus” beállítást.

WordPress legördülő menük

Ha WordPress-menüt akarsz használni az egyedi beágyazható navigációdban, add hozzá a Navigációs menü elemet a Legördülő menü → „Content” elembe. Szerkeszd, és válaszd ki a legördülőben megjeleníteni kívánt WordPress-menüt.

Ez azt jelenti, hogy minden, a beágyazható navigációdhoz létrehozott WordPress-menünek azokat a menüelemeket kell tartalmaznia, amelyeket egy adott legördülőben meg akarsz jeleníteni. Ez a megoldás lehetővé teszi, hogy teljes mértékben kihasználd a beágyazható navigáció testreszabási lehetőségeit, miközben a menüt továbbra is a WordPressből vezérled.

Ezt a WordPress-menüt a benne lévő Legördülő menü szerkesztésével stílusozhatod, vagy ha az egész menüvel egyformán akarod, módosítsd a Nav (beágyazható) elem legördülő beállításait.

Egyedi mobilmenük (Offcanvas + Kapcsoló)

Az Offcanvas elemmel egyedi mobilmenüket, vagy bármilyen más tartalmat készíthetsz, amelyet a Kapcsoló elemmel a nézetbe csúsztatsz.

1. Adj hozzá egy Offcanvas elemet az oldalhoz.
2. Mivel nem a Nav beágyazható alapértelmezett mobilmenü-nézetét használod, a „Toggle (Close: Mobile)” elemet törölheted.
3. A „Toggle (Open: Mobile)” elemmel nyitod az Offcanvas elemet. Másold ki a panelről az Offcanvas elem azonosítóját, szerkeszd a „Toggle (Open: Mobile)” elemet, és illeszd be a „CSS-szelektor” beállításba.
4. Mentsd a módosításokat, és nézd meg az élő oldalt. A Kapcsoló ikonra kattintva az Offcanvas megnyílik.

Mivel az Offcanvas beágyazható elem, bármilyen elrendezést és elemet beletehetsz. Az Offcanvas előre feltöltve egy bezáró Kapcsolóval érkezik. A háttérre (az Offcanvas kívülre) kattintva is bezárul.

Az Offcanvas szerkesztésekor kapcsold be a „Nyitva tartás stílusozás közben” beállítást, hogy az Offcanvas ne tűnjön el, amikor más elemeket szerkesztesz.

Nem teljes képernyős mobilmenük

Ha az alapértelmezett mobilmenüt a teljes képernyő elfoglalása nélkül akarod megjeleníteni, szerkeszd a Nav (beágyazható) elemet, és a „Mobilmenü” alatt állítsd a „Magasság” értékét fit-content értékre. Így a mobilmenü magassága automatikusan a tartalmához igazodik.

Ezután állítsd be a mobilmenü „Pozícióját” kedved szerint, hogy ne takarja a Kapcsolót.

Mivel a „Nav items” elem a mobilmenü burkolója, szerkesztheted a mobilmenü belső margóját, hátterét stb. Ezeket a stílusmódosításokat azon a töréspontnál végezd, ahol a mobilmenü megjelenik, hogy csak a mobilra vonatkozzanak, az asztali menüre ne.

Mivel a mobilmenü már nem fedi a teljes képernyőt, valószínűleg törölheted a Bricks által alapból hozzáadott „Toggle (Close: Mobile)” elemet.

Tipp: hogy a mobilmenü ne takarja a Kapcsolót (ami bizonyos képernyőméreteknél és elhelyezéseknél előfordulhat), szerkeszd a Kapcsoló elemet, és a Stílus → Elrendezés → Z-index alatt állíts be 1001 vagy nagyobb értéket.

Az egyes elemek részletes beállításairól az Elemek csoport fejezetei szólnak, például az Offcanvas, a Legördülő menü, a Navigáció és a Kapcsoló.