MagyarmagyarHamburger menü widget és blokk
A Hamburger menü widget és blokk használata fejlécben: a Beállítások és a Tartalom rész mezői, a megjelenés a weboldalon.
A Hamburger menü a JetMenu önálló eleme: egy kapcsológomb, amely egy menüt tartalmazó panelt nyit. Elementorban Hamburger menü widgetként, a blokkszerkesztőben Hamburger menü blokként érhető el. A két szerkesztőben a beállítások megegyeznek.
Követelmények
Szekció neve “Követelmények”- Elementor vagy a blokkszerkesztő (Gutenberg).
- A JetMenu aktiválva, és a Megjelenés → Menük oldalon legalább egy menü létrehozva.
- Fejlécsablonhoz a Crocoblock sablonszerkesztője (a menüt oldalra is teheted).
A hamburger menü elhelyezése
Szekció neve “A hamburger menü elhelyezése”Elementorban
Szekció neve “Elementorban”- Nyisd meg a Crocoblock → Theme Templates oldalt, keresd meg a fejlécsablont, és szerkeszd Elementorral. (Egy sima oldalra is ráteheted a widgetet.)
- A widgetpanel Jet Menu csoportjából húzd a Hamburger menü widgetet a fejléc megfelelő oszlopába vagy tárolójába.
- Állítsd be a Tartalom fül Beállítások és Tartalom részét (lásd lent).
- A Stílus fülön alakítsd ki a megjelenést, majd kattints a Közzététel gombra.
A blokkszerkesztőben
Szekció neve “A blokkszerkesztőben”- Nyisd meg a Crocoblock → Theme Builder oldalt, a fejléc melletti három pontra kattintva válaszd a tartalom szerkesztését.
- A blokkszerkesztőben add a fejléchez a Hamburger menü blokkot.
- A jobb oldali panel Options és Content füle ugyanazokat a mezőket adja, mint a widget. Az Advanced fülön a további CSS-osztályokat adhatod meg.
- Mentsd a fejlécet. A blokk megjelenését a JetStyleManager bővítménnyel szabhatod testre.
A blokk csak SVG-ikonokat támogat.
A Beállítások rész
Szekció neve “A Beállítások rész”
A képen a Menü, a Menü mobilra, az Elrendezés, a Kapcsoló pozíciója, a Konténer pozíciója és az almenü mezői láthatók.
| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| Menü | A megjelenítendő menü. | Nincs kiválasztva |
| Menü mobilra | A mobil eszközön megjelenő menü. Lehet ugyanaz, mint a Menü, vagy külön mobilra készített menü. | Nincs kiválasztva |
| Elrendezés | Kicsúszás: a panel az oldal bal vagy jobb szélénél csúszik be, a háttér elsötétül. Legördülő menü és Tolás a többi lehetőség. | Kicsúszás |
| Kapcsoló pozíciója | Alapértelmezett, Rögzítve a képernyő bal felső sarkához vagy Rögzítve a képernyő jobb felső sarkához. | Alapértelmezett |
| Konténer pozíciója | A menüpanel helye: Jobb vagy Bal. | Bal |
| Almenü aktiválásának módja | Rámutatás vagy Kattintás. | Kattintás |
| Kiváltó elem | Mire kell kattintani az almenü nyitásához: Menüpont vagy Almenüikon. | Menüpont |
| Almenü elrendezésének megjelenítése | Becsúszás vagy Legördülő menü. | Becsúszás |
| Close Previously Opened Submenu | Kapcsoló: új almenü nyitásakor a korábban nyitott bezárul. | Ki |
| Bezárás navigáció után | A panel bezárul, ha a látogató egy linkre kattint. | Nem |
| Mega tartalom AJAX-betöltése | A megatartalom AJAX-szal töltődik be. | Nem |
| Lock Page Scroll | Kapcsoló: a menü nyitva tartása alatt az oldal nem görgethető. | Ki |
| Fejlécsablon kiválasztása | A menüpanel tetején megjelenő sablon (például logó). | Nincs |
| Tételek előtti sablonminta kiválasztása | A menüpontok előtt megjelenő sablon. | Nincs |
| Tételek utáni sablonminta kiválasztása | A menüpontok után megjelenő sablon. Ha az előtte és az utána sablont is megadod, az előtte sablon kerül a menüpontok fölé, az utána sablon alájuk. | Nincs |
| Tétel ikonjának láthatósága | A menüelem beállításaiban megadott ikon megjelenítése. | Igen |
| Tétel jelvényének láthatósága | A menüelem jelvényének megjelenítése. | Igen |
| Tétel leírásának láthatósága | A menüelem leírásának megjelenítése. | Nem |
| Menüpont elválasztója látható | Elválasztó vonal a menüpontok között. | Nem |
| Breadcrumb használata? | Útvonaljelző a menün belül, amely megmutatja, hol jár a látogató. | Igen |
| Breadcrumb útvonala | Teljes (a teljes útvonal) vagy Minimalista (csak az egy szinttel feljebbi elem). Csak bekapcsolt breadcrumbnál látszik. | Teljes |
| Kapcsológomb betöltésjelzőjének használata? | Forgó jelzés, ha a menü valamiért nem tud azonnal megnyílni (például lassú kapcsolat miatt). | Igen |
Az ikont, a jelvényt és a leírást a Megjelenés → Menük oldalon, a menüelem Settings gombjára kattintva adhatod meg (A menüelem beállításai). A Betöltésjelző színe a betöltésjelző bekapcsolása után az Advanced stílusrészben állítható.
A Kiváltó elem akkor számít, ha az Almenü aktiválásának módja Kattintás.
A Tartalom rész
Szekció neve “A Tartalom rész”
A képen a kapcsoló, a bezárás, a visszalépés és az almenü ikonjai, valamint a kapcsoló szövege látszik.
| Beállítás | Mit csinál |
|---|---|
| Váltógomb zárt állapotának ikonja | A kapcsológomb ikonja zárt menünél. |
| Váltógomb nyitott állapotának ikonja | A kapcsológomb ikonja nyitott menünél. |
| Kapcsoló szövege | A hamburgerikon mellett megjelenő felirat. |
| Konténer bezárásának ikonja | A panel bezáró gombjának ikonja. |
| Konténer visszalépési ikonja | A visszalépő gomb ikonja. |
| Vissza felirat | A visszalépő gomb mellett megjelenő szöveg. |
| Almenü ikonja | Az almenüre mutató jelző. |
| Breadcrumb elválasztóikonja | Az útvonal elemeit elválasztó ikon. |
| SVG ikonok kitöltése | Az SVG-ikonok átveszik az oldal színbeállításait. |
Minden ikonmezőnél választhatsz: nincs ikon, saját SVG feltöltése, vagy ikon az ikontárból. A blokkban a nyitott almenü ikonja külön is állítható.
A hamburger menü a weboldalon
Szekció neve “A hamburger menü a weboldalon”Nyisd meg az oldalt, amelyen a fejlécet megjelenítetted. A kapcsológomb a beállított szöveggel és ikonnal látszik.
A gombra kattintva kinyílik a menüpanel. A képen Kicsúszás elrendezés látszik, bal oldali konténerrel: a háttér elsötétül, a panel tetején a bezáró ikon, alatta a menüpontok. Ha egy elemhez almenü tartozik, arra kattintva az is megnyílik.
Készült: