Коротко о меню
- 99% меню HTML5 + CSS3, 1% JavaScript (закрытие открытой категории по клику).
- На мобильных устройствах «горизонтальное» меню становится «аккордеон-меню».
- В первичном состоянии показаны 10 основных пунктов меню из 33, остальные пункты появляются при нажатии на 11-ый (крайне правый пункт) «Ещё...».
- «Время загрузки для взаимодействия» страницы категории с меню и товарами на компьютере 1 секунда, на мобильных 5,2 секунд (по данным developers.google.com).
- «Время загрузки первого контента» страницы категории с меню и товарами на компьютере 0,3 секунды, на мобильных 1 секунда (по данным developers.google.com).
- Категории меню открываются и закрываются по нажатию, после открытия символ "+" меняется на "-".
- При открытии других пунктов меню, открытые ранее закрываются.
- Подпункты-категорий и подпункты-подпунктов-категорий меню на desktop помещаются в область просмотра без полосы прокруток.
Требования к меню
- Открытие меню по нажатию… Про меню с открытием при наведении: при открытие страницы 99% людей пересечет мышкой меню, что вызовет его незапланированное появление закрыв видимую часть экрана тем самым расстроив посетителя. Решить можно включив задержку при наведении (чтоб не открывалось сразу), но тогда меню «тормозное» становится.
- Простое меню для возможной дальнейшей корректировки сотрудниками магазина после инструктажа.
- Меню должно быть адаптивное, страница с меню проходить полную валидацию css3 html5. Скорость загрузки страницы должна оставаться быстрой.
Полную версию меню можно посмотреть codepen.io/andrej-sh/pen/eYOrNEZ
Начало HTML кода
Пояснение к коду JavaScript
Планировал обойтись без JavaScript, но реализация закрытия открытого меню при повторном нажатии на CSS мне не представилась реализуемой для radio + checkbox. А код простой и понятный и даже при его случайном удалении не способен сделать сайт не рабочим (при тестировании меню с jQuery сайт не работал 5 минут из-за того, что сперва подключил скрипт удаленно и в ссылке был http вместо https).
<script>
function clickRadio(el) {
var siblings = document.querySelectorAll("input[type='radio'][name='" + el.name + "']");
for (var i = 0; i < siblings.length; i++) {
if (siblings[i] != el)
siblings[i].oldChecked = false;
}
if (el.oldChecked)
el.checked = false;
el.oldChecked = el.checked;
}</script>Аналогичное меню с использованием jQuery
Первая версия меню была на jQuery, реализована через input «checkbox». Еще через скрипт было настроено появление символов "+ -" при открытии-скрытии меню. По функционалу и внешнему виду абсолютно такое же как и про меню описанному ранее. Но! скорость загрузки была заметно хуже. Например «Максимальная потенциальная задержка FID» становится больше на 1 секунду. «Время загрузки для взаимодействия» больше на 0,6-0,8 секунды. «Время загрузки первого контента» на 0,3-0,4 секунды. Скрипты грузятся на 0,5 секунды дольше.
Изображения с сервисов проверки скорости загрузок
