Швидке, зручне, адаптивне меню для 1075 категорій (36000 товарів)

Коротко про меню

 

  • 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>

 

Читайте також  42 оператора розширеного пошуку Google (повний список)

Аналогічне меню з використанням jQuery

Перша версія меню була на jQuery, реалізована через input «checkbox». Ще через скрипт було налаштоване поява символів “+ -” при відкритті-відображення меню. За функціоналом і зовнішнім виглядом абсолютно таке ж як і про меню описаному раніше. Але! швидкість завантаження була помітно гірше. Наприклад «Максимальна потенційна затримка FID» стає більше на 1 секунду. «Час завантаження для взаємодії» більше на 0,6-0,8 секунди. «Час завантаження контенту» на 0,3-0,4 секунди. Скрипти вантажаться на 0,5 секунди довше.

Зображення з сервісів перевірки швидкості завантажень

Степан Лютий

Обожнюю технології в сучасному світі. Хоча частенько і замислююся над тим, як далеко вони нас заведуть. Не те, щоб я прям і знаюся на ядрах, пікселях, коллайдерах і інших парсеках. Просто приходжу в захват від того, що може в творчому пориві вигадати людський розум.

You may also like...

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *