/** * Simple Main Menu Module - Frontend styles * * BEM naming: .wh-mainmenu__* * Desktop: horizontal bar with dropdown + kolumny kaskadowe (poziom 3+) * Mobile: hamburger → drawer z drill-down (panele poziomow) * * @author Woohoo.pl * @copyright 2025 Woohoo.pl * @license https://opensource.org/licenses/AFL-3.0 */ /* ═══════════════════════════════════════════ Reset & base ═══════════════════════════════════════════ */ .wh-mainmenu, .wh-mainmenu *, .wh-mainmenu *::before, .wh-mainmenu *::after { box-sizing: border-box; } .wh-mainmenu ul { list-style: none; margin: 0; padding: 0; } .wh-mainmenu a { text-decoration: none; color: inherit; } .wh-mainmenu button { border: none; background: none; cursor: pointer; font: inherit; color: inherit; padding: 0; } /* ═══════════════════════════════════════════ Desktop menu ═══════════════════════════════════════════ */ .wh-mainmenu__desktop { display: none; position: relative; } .wh-mainmenu__list { display: flex; align-items: stretch; gap: var(--wh-menu-gap, 0px); margin: 0; padding: 0; } .wh-mainmenu__item { position: static; display: flex; align-items: stretch; } .wh-mainmenu__link { display: inline-flex; align-items: center; gap: 10px; padding: 14px 16px; font-size: var(--wh-menu-font-size, 12px); font-weight: var(--wh-menu-font-weight, var(--wh-font-weight-medium, 500)); color: var(--wh-menu-color, var(--wh-color-text-primary, #40362E)); line-height: 1.4; white-space: nowrap; border-bottom: 2px solid transparent; transition: color 0.2s, border-color 0.2s; } .wh-mainmenu__link:focus-visible { color: var(--wh-menu-hover-color, var(--wh-color-accent, #000)); border-bottom-color: var(--wh-menu-hover-border, var(--wh-color-primary, #40362E)); } @media (hover: hover) { .wh-mainmenu__link:hover { color: var(--wh-menu-hover-color, var(--wh-color-accent, #000)); border-bottom-color: var(--wh-menu-hover-border, var(--wh-color-primary, #40362E)); } } .wh-mainmenu__link--label { cursor: default; } .wh-mainmenu__item--active > .wh-mainmenu__link { color: var(--wh-menu-active-color, var(--wh-color-accent, #000)); border-bottom-color: var(--wh-menu-active-border, var(--wh-color-primary, #40362E)); } /* Ikona pozycji menu (plik wskazany przez admina w polu `icon_path`). ⚠️ Do 1.11.3 ta klasa nie miala ZADNEJ reguly — obrazek renderowal sie w rozmiarze wlasnym pliku. Skutki: uklad "skakal" po zaladowaniu ikon (CLS, audyt DM-2239 3.6), a wgranie wiekszego pliku rozpychalo cale menu. Wymiaru nie da sie policzyc w PHP: `icon_path` bywa adresem zewnetrznym, wiec ramy stawia CSS. Branza moze je przestawic tokenem. */ .wh-mainmenu__icon { flex-shrink: 0; width: var(--wh-menu-icon-size, 20px); height: var(--wh-menu-icon-size, 20px); object-fit: contain; } .wh-mainmenu__chevron { flex-shrink: 0; width: 10px; height: 10px; transition: transform 0.25s ease; opacity: 0.6; } /* DM-1660: chevron poza przeplywem (absolute w prawym paddingu linka) -> nie zjada szerokosci poziomego menu, zapobiega przepelnieniu poza ekran. Scope: tylko desktopowy link poziomu 1 (mobile uzywa .wh-mainmenu__drawer-drill). */ .wh-mainmenu__item--has-children > .wh-mainmenu__link { position: relative; padding-right: 18px; } .wh-mainmenu__item--has-children > .wh-mainmenu__link .wh-mainmenu__chevron { position: absolute; right: 0; top: 50%; transform: translateY(-50%); margin: 0; } /* Dropdown – full-width (Hummingbird style) */ .wh-mainmenu__dropdown { position: absolute; top: 100%; left: 0; right: 0; z-index: 1000; background: var(--wh-menu-dropdown-bg, var(--wh-color-white, #fff)); border-top: 1px solid var(--wh-menu-dropdown-border, var(--wh-color-border-subtle, #e8e4df)); border-bottom: 1px solid var(--wh-menu-dropdown-border, var(--wh-color-border-subtle, #e8e4df)); /* Punkt zaczepienia dla branzy. Fallback zostaje wartoscia z designu, bo skala cieni palety nie ma odpowiednika: --wh-shadow-md to 0 4px 6px, --wh-shadow-lg to 0 10px 15px — oba WEZSZE i mocniejsze niz ten miekki 0 6px 20px przy alfie 0.06. Podstawienie ktoregokolwiek zmienialoby wyglad, wiec branza, ktora chce ujednolicic, robi to swiadomie przez ten token. */ box-shadow: var(--wh-menu-dropdown-shadow, 0 6px 20px rgba(0, 0, 0, 0.06)); opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity 0.2s, visibility 0.2s, transform 0.2s; pointer-events: none; /* Performance: skip layout/paint while hidden */ contain: layout style; content-visibility: auto; } /* Open state. `:focus-within` to droga klawiatury, nie ozdobnik. Panel jest domyslnie `visibility: hidden`, a element niewidoczny NIE przyjmuje fokusu — dopoki wiec nie otworzy go co najmniej fokus na pozycji paska, Tab przeskakuje cale podmenu i nie ma jak do niego wejsc. Klasa `--open` (JS) robi to samo bogaciej; ten selektor zostaje jako droga awaryjna, gdy JS nie wstanie. */ .wh-mainmenu__item--open > .wh-mainmenu__dropdown, .wh-mainmenu__item--has-children:focus-within > .wh-mainmenu__dropdown { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; content-visibility: visible; } .wh-mainmenu__item--open > .wh-mainmenu__link .wh-mainmenu__chevron, .wh-mainmenu__item--has-children:focus-within > .wh-mainmenu__link .wh-mainmenu__chevron { transform: translateY(-50%) rotate(180deg); } /* Submenu row – 2-column layout */ .wh-mainmenu__submenu-row { display: flex; gap: 0; min-height: 100px; } /* Left column – menu links (vertical) */ .wh-mainmenu__submenu-left { display: flex; flex-direction: column; flex: 0 0 25%; max-width: 25%; padding: 12px 0; border-right: 1px solid var(--wh-menu-dropdown-border, var(--wh-color-border-subtle, #e8e4df)); } .wh-mainmenu__submenu-link { display: block; padding: 9px 24px; font-size: var(--wh-menu-font-size, 12px); font-weight: var(--wh-menu-font-weight, var(--wh-font-weight-medium, 500)); color: var(--wh-menu-color, var(--wh-color-text-primary, #40362E)); white-space: nowrap; text-decoration: none; border-left: 3px solid transparent; transition: color 0.15s, background-color 0.15s, border-color 0.15s; } .wh-mainmenu__submenu-link:focus-visible { background-color: var(--wh-menu-dropdown-hover-bg, var(--wh-color-bg-subtle, #f7f5f3)); color: var(--wh-menu-hover-color, var(--wh-color-accent, #000)); border-left-color: var(--wh-menu-hover-border, var(--wh-color-primary, #40362E)); } @media (hover: hover) { .wh-mainmenu__submenu-link:hover { background-color: var(--wh-menu-dropdown-hover-bg, var(--wh-color-bg-subtle, #f7f5f3)); color: var(--wh-menu-hover-color, var(--wh-color-accent, #000)); border-left-color: var(--wh-menu-hover-border, var(--wh-color-primary, #40362E)); } } .wh-mainmenu__submenu-link--active { color: var(--wh-menu-active-color, var(--wh-color-accent, #000)); font-weight: var(--wh-font-weight-semibold, 600); background-color: var(--wh-menu-dropdown-active-bg, var(--wh-color-bg-subtle, #f7f5f3)); border-left-color: var(--wh-menu-active-border, var(--wh-color-primary, #40362E)); } .wh-mainmenu__submenu-link--label { cursor: default; color: var(--wh-menu-label-color, var(--wh-color-text-muted, #888)); } /* ===== Poziom 3+ — kolumny kaskadowe (od 1.8.0) ===== Kazdy glebszy poziom to kolumna wysuwana W PRAWO od rodzica, jak w botland. Poziom 2 renderuje sie bez zmian, wiec sklepy z menu 2-poziomowym (domyslne WH_MENU_MAX_DEPTH = 2) nie widza tu zadnej roznicy. */ /* ⚠️ Kontekstem pozycjonowania kolumn jest KOLUMNA PIERWSZA, nie pojedyncza pozycja. Gdy `position: relative` siedzialo na `.wh-mainmenu__branch`, kolumna wyskakiwala na wysokosci najechanej pozycji i nachodzila na produkty — zamiast ustawic sie rowno od gory panelu, jak w botland. */ .wh-mainmenu__branch { position: static; } .wh-mainmenu__submenu-left { position: relative; } .wh-mainmenu__col { position: absolute; /* top:0 wzgledem kolumny nadrzednej = rowno z gora panelu. Poziom 4 liczy sie wzgledem kolumny poziomu 3 (tez absolutnej, tez przy top:0), wiec caly rzad kolumn stoi w jednej linii. */ top: 0; left: 100%; z-index: 2; display: none; width: 260px; /* Kolumna siega co najmniej do dolu panelu — inaczej krotka lista podkategorii dawalaby "wystajacy" prostokat w polowie wysokosci. */ min-height: 100%; padding: var(--wh-space-12, 12px) 0; background-color: var(--wh-menu-dropdown-bg, var(--wh-color-bg-base, #fff)); border-left: 1px solid var(--wh-menu-dropdown-border, var(--wh-color-border-subtle, #e8e4df)); } /* Otwarcie: hover, fokus klawiatury LUB klasa --open nadawana przez JS. ⚠️ Klasa nie jest ozdobnikiem — bez niej kaskada ma ZEROWA tolerancje: kafelki produktow leza po prawej stronie kolumny, wiec droga myszy do nich prowadzi ukosem przez sasiednie pozycje, a kazde takie musniecie zamykalo wszystko natychmiast (zgloszenie 2026-07-24: „nie moge najechac na produkty"). JS trzyma --open jeszcze chwile po zjechaniu — jak botland. `:hover` zostaje jako zabezpieczenie, gdyby JS sie nie zaladowal. */ .wh-mainmenu__branch:focus-within > .wh-mainmenu__col, .wh-mainmenu__branch--open > .wh-mainmenu__col { display: block; } @media (hover: hover) { .wh-mainmenu__branch:hover > .wh-mainmenu__col { display: block; } } /* Wejscie w podkategorie ZASTEPUJE zawartosc po prawej, a nie dokłada sie do niej. Bez tego kafelki poziomu 1 i poziomu 2 rysowaly sie jednoczesnie jeden na drugim — widoczne na zrzucie z 2026-07-24. `:has()` celuje tylko w sytuacje, gdy najechana pozycja FAKTYCZNIE ma co pokazac (kolumne lub produkty); najechanie na pozycje bez niczego zostawia produkty poziomu 1 na miejscu, zamiast zostawiac pusty panel. */ .wh-mainmenu__submenu-left:has(.wh-mainmenu__branch:focus-within > .wh-mainmenu__col) ~ .wh-mainmenu__submenu-right, .wh-mainmenu__submenu-left:has(.wh-mainmenu__branch--open > .wh-mainmenu__col) ~ .wh-mainmenu__submenu-right, .wh-mainmenu__submenu-left:has(.wh-mainmenu__branch:focus-within > .wh-mainmenu__pro-only) ~ .wh-mainmenu__submenu-right, .wh-mainmenu__submenu-left:has(.wh-mainmenu__branch--open > .wh-mainmenu__pro-only) ~ .wh-mainmenu__submenu-right { visibility: hidden; } @media (hover: hover) { .wh-mainmenu__submenu-left:has(.wh-mainmenu__branch:hover > .wh-mainmenu__col) ~ .wh-mainmenu__submenu-right, .wh-mainmenu__submenu-left:has(.wh-mainmenu__branch:hover > .wh-mainmenu__pro-only) ~ .wh-mainmenu__submenu-right { visibility: hidden; } } /* TA SAMA zasada o poziom nizej. Produkty kolumny i produkty jej dziecka siadaja w tym samym miejscu (oba przy prawej krawedzi tej kolumny), a przy wejsciu w dziecko rodzic NADAL jest najechany — bez tego nazwy i ceny dwoch poziomow rysowaly sie jedna na drugiej (zlapane na zrzucie z poziomu C). Chowamy produkty rodzica, gdy dziecko ma co pokazac. */ .wh-mainmenu__col:has(> .wh-mainmenu__branch:focus-within > .wh-mainmenu__col) > .wh-mmpro, .wh-mainmenu__col:has(> .wh-mainmenu__branch:focus-within > .wh-mainmenu__pro-only) > .wh-mmpro, .wh-mainmenu__col:has(> .wh-mainmenu__branch--open > .wh-mainmenu__col) > .wh-mmpro, .wh-mainmenu__col:has(> .wh-mainmenu__branch--open > .wh-mainmenu__pro-only) > .wh-mmpro { visibility: hidden; } @media (hover: hover) { .wh-mainmenu__col:has(> .wh-mainmenu__branch:hover > .wh-mainmenu__col) > .wh-mmpro, .wh-mainmenu__col:has(> .wh-mainmenu__branch:hover > .wh-mainmenu__pro-only) > .wh-mmpro { visibility: hidden; } } /* Pozycja bez podkategorii, ale z produktami — kafelki zajmuja cala wolna przestrzen panelu, zaczynajac dokladnie tam, gdzie zaczelaby sie kolumna. Dzieki temu uklad jest jednakowy od lewej do prawej niezaleznie od tego, czy pozycja ma podkategorie, czy same produkty. */ .wh-mainmenu__pro-only { position: absolute; top: 0; left: 100%; /* ⚠️ Szerokosc z TRESCI, nie procentowa — i to jest istotne. Kontekstem pozycjonowania jest raz kolumna pierwsza (25% panelu), a raz kolumna glebszego poziomu (260px), wiec ta sama wartosc procentowa znaczy co innego na kazdym poziomie. `width: 300%` dzialalo na poziomie 2, ale na poziomie 4 dawalo 777px przy 407px wolnego miejsca — kontener wychodzil 370px POZA panel (zmierzone w Chrome). Wczesniej bylo tu `right: 0`, ktore z kolei dawalo ZEROWA szerokosc i lamalo kafelki pionowo. `max-content` rozwiazuje oba przypadki. Tla ani obramowania NIE dajemy: pod spodem jest biale tlo panelu, wiec kontener konczacy sie na tresci nie zostawia widocznej krawedzi. */ width: max-content; display: none; padding: var(--wh-space-12, 12px) var(--wh-space-md, 16px); } .wh-mainmenu__branch:focus-within > .wh-mainmenu__pro-only, .wh-mainmenu__branch--open > .wh-mainmenu__pro-only { display: block; } @media (hover: hover) { .wh-mainmenu__branch:hover > .wh-mainmenu__pro-only { display: block; } } /* Strzalka w prawo sygnalizuje, ze pozycja ma glebszy poziom. */ .wh-mainmenu__chevron--right { margin-left: auto; flex: 0 0 auto; } .wh-mainmenu__submenu-link--has-children { display: flex; align-items: center; gap: var(--wh-space-sm, 8px); } /* Ostatnia kolumna, ktora nie miesci sie w oknie, wychodzi w LEWO. Klase nadaje JS po zmierzeniu pozycji — bez tego menu przy prawej krawedzi ekranu powodowaloby poziomy scroll. */ .wh-mainmenu__col--flip { left: auto; right: 100%; } /* Right column – reserved for future content */ .wh-mainmenu__submenu-right { flex: 1; min-width: 0; padding: 12px 24px; } /* ═══════════════════════════════════════════ Mobile: hamburger ═══════════════════════════════════════════ */ .wh-mainmenu__mobile { display: block; } .wh-mainmenu__hamburger { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 40px; height: 40px; padding: 8px; } .wh-mainmenu__hamburger-line { display: block; width: 22px; height: 2px; background-color: currentColor; border-radius: 1px; transition: transform 0.3s, opacity 0.3s; } /* Hamburger → X animation */ .wh-mainmenu__hamburger[aria-expanded="true"] .wh-mainmenu__hamburger-line:nth-child(1) { transform: translateY(7px) rotate(45deg); } .wh-mainmenu__hamburger[aria-expanded="true"] .wh-mainmenu__hamburger-line:nth-child(2) { opacity: 0; } .wh-mainmenu__hamburger[aria-expanded="true"] .wh-mainmenu__hamburger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ═══════════════════════════════════════════ Mobile: overlay ═══════════════════════════════════════════ */ .wh-mainmenu__overlay { position: fixed; inset: 0; z-index: 9998; /* Przyciemnienie tla pod menu mobilnym. Zostaje lokalne — paleta trzyma kolory BEZ kanalu alfa, wiec nie ma czego tu podstawic. Branza z jasnym motywem moze chciec slabszego przyciemnienia, stad token. */ background: var(--wh-menu-overlay-bg, rgba(0, 0, 0, 0.45)); opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; } .wh-mainmenu__overlay--visible { opacity: 1; visibility: visible; } /* ═══════════════════════════════════════════ Mobile: drawer ═══════════════════════════════════════════ */ .wh-mainmenu__drawer { position: fixed; top: 0; z-index: 9999; width: 300px; max-width: 85vw; /* Pelna wysokosc ekranu. Drawer jest teleportowany do w front.js — inaczej #header (will-change/transform sticky) tworzy containing block dla `fixed` i 100% liczy sie od headera, nie viewportu. dvh = mobile bez paska adresu. */ height: 100%; height: 100dvh; background: var(--wh-menu-drawer-bg, var(--wh-color-white, #fff)); overflow-y: auto; /* ⚠️ overflow-x MUSI byc jawny. Same `overflow-y: auto` daje w osi X wartosc `auto` (spec: visible + auto -> auto), a panele glebszych poziomow czekaja poza ekranem na `translateX(100%)`. Transform, inaczej niz przesuniecie pozycja, WLICZA sie do obszaru przewijania rodzica — wiec drawer miewal scrollWidth 600 px przy szerokosci 300 px i pokazywal poziomy pasek przewijania (zgloszenie 2026-07-24). */ overflow-x: hidden; -webkit-overflow-scrolling: touch; transition: transform 0.3s ease; } .wh-mainmenu__drawer--left { left: 0; transform: translateX(-100%); } .wh-mainmenu__drawer--right { right: 0; transform: translateX(100%); } .wh-mainmenu__drawer--open { transform: translateX(0); } /* Drawer header */ .wh-mainmenu__drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--wh-menu-drawer-border, var(--wh-color-border-subtle, #e5e5e5)); } .wh-mainmenu__drawer-title { font-size: var(--wh-font-size-base, 16px); font-weight: var(--wh-font-weight-semibold, 600); } .wh-mainmenu__drawer-close { display: flex; align-items: center; justify-content: center; /* RESET UA: