Організм · рівень 3

Мега-меню

Цей файл не можна прочитати без header.css. Корінь .wfh-mega описують три файли: хедер дає панелі коробку, цей файл - нутрощі, а filter-rail.css навмисно бере той самий клас для флайаута рейки й переписує його. Панель заміряно 940x595 при 1280 і 0x0 при 390: нижче 860 її не існує.

рівень 3design/system/components/mega-menu.css56 рядків39 селекторів86 оголошень134 екрани

З чого складається

Таблиця нижче показує кільце. Мега-меню складає хедер, а хедер складає мега-меню - обидва рядки правдиві, і це найчистіший у шарі приклад того, чому таблиця складу взагалі неоднозначна: одинадцять класів ms-* і mg* лежать усередині цієї панелі, а описані в сусідньому файлі.

Файл	Класів	Які саме
`header.css`	11	`.mgl` `.mgt` `.mph` `.ms-fb` `.ms-feat` `.ms-fh` `.ms-fs` `.ms-ftag` ...
`chip.css`	1	`.mgchip`

2 класи всередині кореня мають більш ніж одного власника, тож із коду не видно, чий вони: .uiv-ic .uiv-trail

Анатомія

Розмітка тут - не переписана від руки. Її знято з design/index.html у цій же сесії, обробники зняті, посилання підняті на рівень. Цей організм у спокої не існує - він display: none, доки щось не додасть open, - тож стенд додає цей клас сам. Показано на сцені: трансформований предок стає для position: fixed тим блоком, від якого рахується його inset, тож панель не накриває сторінку й не втрачає жодного свого оголошення.

Показано в рамці шириною 1180, і ширина названа не для краси: вона з'являється тільки від 860. Медіа-умова читає в'юпорт, а не контейнер, тож жодне правило самого стенда цього не вирішує - тільки справжній в'юпорт, а він є лише в рамки. Сам організм у рамці обмежено до 940px - це ширина, яку він займає в продукті на 1280. Витягнутий зі своєї колонки, він розтягнувся б на всю рамку, і кнопка на 294 стала б кнопкою на 1490.

1Ліва колонка .mega-cats - max-height:74vh з власним прокручуванням, фон --bg-surface, рамка справа. Перший рядок .mega-cat-goals - «За ціллю», і він відділений рамкою знизу: цілі йдуть перед категоріями

2Рядок категорії .mega-cat - при наведенні й при .on однаково: фон --bg-page і inset 2px 0 0 var(--line-action), а знак .mci у 24px іде в --text-action

3Середина .mega-mid - ті самі 74vh; всередині лежать усі .mega-panel одразу, сховані, і видно ту, що має .on. Перемикає їх wfMega(k) по data-k на mouseenter

4Картки цілей .mega-goalcard у сітці .mega-goalgrid 1fr 1fr - рамка --line-strong, при наведенні --line-action. Колонки підкатегорій .mega-grp мають дно min-width:150px і переносяться

5Права колонка .mega-side - цей файл дає їй рамку зліва, фон і падінги, і на цьому спиняється. Усе, що в ній видно - .ms-lead, .ms-link, .ms-feat, .ms-ph, .ms-ftag, .ms-fh, .ms-fs, .ms-fb - описано в header.css

6Єдина медіа-умова - @media (max-width: 859px), і в ній немає ані слова про мега-меню. Там тільки .wf-tab, тобто таб-бар

Половина знахідок цього файлу - про інший компонент

Файл описує .wf-tab[aria-current="page"] і .wf-tab.catov-open - поточну вкладку нижнього таб-бару. Той самий .wf-tab описує і tabbar.css, який вантажиться пізніше й каже про підпис вкладки те, що цей файл каже про саму вкладку. Клас має двох власників, і жоден із них не таб-бар цілком. Причина видима: .catov-open позначає вкладку «Каталог», поки відкрито мобільну накладку каталогу, - на телефоні мега-панелі немає, і її роль виконує cat-overlay.css. Рядок про це осів там, де писали десктопний шлях. .catov-open - єдиний власний клас файлу, якого немає на жодному кольоровому екрані: його кладе openCatOverlay() у момент відкриття.

Стани

Стан	Що робить	Чому так
панель закрита	усі `.mega-panel` у `display:none`	панелі всіх дванадцяти категорій лежать у розмітці одразу - перемикання не ходить на сервер
категорія обрана `.on`	фон `--bg-page`, смужка `inset 2px 0 0` у колір дії, знак у `--text-action`	той самий малюнок, що й у наведення: у меню, яке відкривається наведенням, це один стан
наведення `:hover`	на рядку категорії - як `.on`; на `.mega-sub`, `.ms-link` і `.mph` - колір дії плюс підкреслення	єдиний псевдоклас у файлі; переходи 120ms, щоб швидке ковзання колонкою не блимало
відкрито	вмикає `display:grid` клас `.mega-open` на `.wfh`	у файлу немає власного стану відкриття: він живе на батькові з іншого файлу
до 859	панель не малюється: заміряно 0x0	мобільний шлях веде `cat-overlay.css`, і цей файл про нього мовчить - крім одного рядка про вкладку таб-бару

Межі

У файлі 1 медіа-умова, і кожна з них - межа, якої стандартні ширини перепису (360 / 390 / 720 / 1280) не бачать зсередини смуги. Заміряти їх треба власними ширинами, по одній з кожного боку.

@media (max-width: 859px)

Холостий контроль

Сторінка звіряє себе з файлом: 12 власних класів і 2 стани.

.catov-open стоїть у станах, а не в класах: його дописує classList.add на вкладку каталогу в нижній панелі, поки відкрито оверлей, - тобто на чужий елемент, якого на цій сторінці немає взагалі. Клас живе рівно стільки, скільки триває дія, і показати його в спокої можна було б лише підробкою.

ПОВЕДІНКА НА ШИРИНІ - етап 10, крок 4

Від якого порогу: --bp-shell-wide дзеркалом 859, уже реєстрове. Що саме міняється: нижче точки меги немає взагалі - її роботу робить шухляда. Раунд організмів нічого не складав.

Рух

Робота: ВІДПОВІДЬ. Рухається: фон, колір і тінь пункту, рамка картки. Тривалість --dur-fast (150ms), крива --ease-standard. Значення читаються через var(): підміна токена в браузері веде за собою кожне з них. При prefers-reduced-motion рух зникає, а стан лишається.

Найбільший носій руху в продукті: перепис знайшов 7 560 елементів на .12s - одне оголошення, розкочене мега-меню. Тепер це --dur-fast, як і кожна інша відповідь. Сама поява панелі - крок 4: вона відкривається перемиканням display.

Крок 4, і це не поява, а ВІДПОВІДЬ. Панель перемикається, коли мега-меню вже відкрите, а вказівник уже йде колонкою категорій: людина не чекає на поверхню, вона отримує відповідь на наведення. Тому --dur-fast і --ease-standard - робота ВІДПОВІДЬ на єдиній із двадцяти поверхонь, яка не робить ЗВ'ЯЗОК. На --dur-base курсор, що збігає п'ятьма категоріями, лишав би за собою чергу недоведених панелей.

Токени

Прочитані з mega-menu.css: 11 семантичних ролей і 15 примітивів.

Семантичні ролі (11)	Примітиви (15)
`--bg-page` `--bg-surface` `--line-action` `--line-hair` `--line-strong` `--mark-faint` `--text-action` `--text-body` `--text-muted` `--text-primary` `--text-secondary`	`--fs-12` `--fs-14` `--fs-18` `--fw-black` `--fw-bold` `--fw-semibold` `--lh-snug` `--radius-8` `--size-24` `--space-12` `--space-16` `--space-2` `--space-24` `--space-4` `--space-8`
–	`--dur-fast` `--ease-standard`

Що знайшов вирішувач

По всіх 28 селекторах вирішувач знайшов одне оголошення, яке збігається з елементами й ніколи не виграє, і три, які не збігаються ні з чим. Усі чотири - про таб-бар. Мертве: @media (max-width: 859px){ .wf-tab[aria-current="page"]{ color: var(--text-primary) } }, 15 збігів, б'є його той самий селектор у колірному блоці нижче в цьому ж файлі. Незбіглі: три оголошення .wf-tab.catov-open, і це не мертвий код, а стан, який ставлять у момент відкриття накладки.

Про власні 43 рядки вирішувачу сказати нічого: кожне оголошення про саму панель виграє там, де збігається. Файл малий і чистий; уся його неоднозначність - не в оголошеннях, а в тому, кому належать імена.

Немає в коді -> етап 09

Чого бракує

У мега-меню немає власного кольорового екрана. Кольорових екранів 40, серед них немає жодного megamenu.html; стан «закріплено відкритим» є лише на чотирьох сірих сторінках. Демо вище довелось загорнути в .wfh.mega-open: власного стану відкриття в панелі немає, і стенд дає їй батька, а не вигадує їй клас
.wf-tab без власника. Два файли описують одну вкладку; рядок про поточну має жити там, де живе таб-бар
Нижче 860 файл нічого не каже. Панелі там немає, а її роль бере інший компонент - зв'язок між ними ніде не записаний
74vh двічі. Жодна ширина перепису не міняє висоту вікна, тож поведінка колонок на низькому екрані незаміряна
Межа 859 / 860 незаміряна власними ширинами - переписом видно 720 і 1280, а не те, що діється по обидва боки самої межі

Не домальовано наперед і не замовчано: етап 09 стартує з цього списку, зведеного в design/kit/docs/architecture.md.