Fejlesztőknek
Kezdj bele
Témák/Header mega-menük

Header mega-menük

Hozz létre széles header dropdownokat a menü blokk alá tartozó blokkokból, elemenként állítható megnyitási viselkedéssel.

Ezen az oldalon

A mega-menü egy Lenyíló panel (mega-panel) blokk a header Menü blokkján (menu) belül. Minden panel a blokk által megjelenített menü egyetlen felső szintű linkjéhez kapcsolódik a link id azonosítója alapján, és ez a link az egyszerű dropdown helyett ezt a panelt nyitja meg. A kapcsolódás követi a linket a menü átrendezésekor is. A Tételek közvetlenül a sávban beállítású linkek nem nyitnak meg panelt. Ha egy panel linkjét törlöd, a panel a navigátorban marad hozzárendelés nélkül, amíg nem választasz hozzá egy másik linket.

A témaszerkesztőben válaszd ki a menüt a headerben, és adj hozzá egy Lenyíló panel blokkot. Válaszd ki a Menüpont beállítást, amely alatt megnyílik, majd buildeld fel a tartalmát tetszőleges blokkokból:

  • layout blokkok (stack, grid, columns) az oszlopok layoutjához;
  • link-list egy menüből, egy kategóriából vagy egy saját listából származó linkoszlophoz;
  • link-card egy képpel, címmel és linkkel rendelkező kártyához;
  • product és product-grid (a kategóriaforrás jól működik hozzá) a termékekhez;
  • szöveges blokkok, például heading és text.

Az új panelek a Két oszlop és egy kártya presettel indulnak. A Szélesség értéke Tartalom (az oldal tartalomszélessége) vagy Teljes (a header teljes szélessége). Amíg egy panel vagy bármely benne lévő elem ki van választva, a vászon nyitva tartja. A navigátor a menü blokkja alatt listázza a paneleket.

Egy menü blokk egy header layout fájlban, egy panellel:

{
  "id": "menu-1",
  "type": "menu",
  "settings": { "menu": "primary", "submenu": "mega", "open_on": "hover" },
  "blocks": [
    {
      "id": "mega-panel-1",
      "type": "mega-panel",
      "settings": { "item": "link-k3v9qa", "width": "full" },
      "blocks": [
        {
          "id": "link-list-1",
          "type": "link-list",
          "settings": { "menu": "primary", "heading": "Shop" }
        },
        {
          "id": "link-card-1",
          "type": "link-card",
          "settings": { "title": "New arrivals", "link": "/products" }
        }
      ]
    }
  ]
}

A panellel nem rendelkező elemek megtartják az allinkjeikből álló dropdown menüjüket. A menü blokk Almenü beállítása ezeket kompakt dropdownként vagy a linkek széles paneljeként jeleníti meg.

Megnyitási viselkedés

A menü blokk Megnyílik beállítása határozza meg, hogyan nyílnak meg a dropdown menük asztali gépen. Egy menüpont ezt felülbírálhatja a saját Megnyitás asztali gépen beállításával a menüszerkesztőben:

  • Rámutatásra: az elem akkor nyílik meg, amikor a kurzor fölé ér.
  • Kattintásra: az elem akkor nyílik meg, amikor aktiválják a gombját.

A mobilmenük koppintásra mindig harmonikaszerűen (accordion) nyílnak le. A megnyitási viselkedés minden nyelven közös. A témakódban a @poltura/theme-sdk/navigation csomagból származó minden MenuLink ezt opens értékként hordozza (null esetén a menü beállítását követi), a MainNav pedig figyelembe veszi ezt. A tárolt link így néz ki:

{ "id": "link-k3v9qa", "label": "Shop", "href": "/products", "open": "click", "children": [] }

Minden tárolt menülink rendelkezik egy id azonosítóval. Ha a menüszerkesztő, az AI-asszisztens vagy egy témafájl azonosító nélkül ment egy linket, a mentéskor automatikusan kap egyet.

Hagyd el az open mezőt a menü beállításának örökléséhez. A közvetlenül a fejlécsávban megjelenített elemekhez nem tartozik megnyitható lenyíló menü.

A header mega-menüje különbözik az alapértelmezett téma kezdőlapi „Mega menu” nevű szekciójától. Ez a szekció <Slot /> segítségével jeleníti meg a blokkjait: egy menu_groups blokk oszlopot listáz az elsődleges menü minden eleméhez vagy minden főkategóriához, a menu_column blokkok saját linkekből álló oszlopokat adnak hozzá, a promo_card blokkok pedig ajánlatokat jelenítenek meg. A kereskedők ezek mindegyikét átrendezhetik, módosíthatják a stílusát vagy elrejthetik. Lásd: Szekciók, blokkok és elemstílusok.

Billentyűzetes navigáció

A header menük a fókusz bezárása helyett disclosure navigációt használnak:

  • Tab / Shift+Tab: a normál oldalsorrendet követi, beleértve a látható dropdown linkeket is.
  • Le / Fel a menü triggerén: megnyitja azt, és a fókusz az első / utolsó linkre ugrik.
  • Balra / Jobbra: a szomszédos headerelemek között mozog; a Home / End az első / utolsó elemet választja ki.
  • A dropdownon belül a Le / Fel a linkek között mozog; a Home / End az első / utolsó linket választja ki.
  • Az Escape bezárja a dropdownt, és visszaállítja a fókuszt a triggerére.
  • Az Enter / Space aktiválja a kattintás módú gombokat. A hover módú linkek megtartják az Enteres navigációjukat; a Space billentyű ki-be kapcsolja a dropdownjukat.

Egy másik dropdown megnyitása bezárja az előzőt. A billentyűzetes fókusz látható marad a téma fókuszszínében, és a kurzor mozgatása nem zárja be a dropdownt, amíg a linkjei billentyűzetes fókusszal rendelkeznek.

Következő lépések

Utoljára frissítve