Створюємо шаблон меню Priority+ з прокруткою і злущується списками

35

Від автора: стаття нашого гостя, Міка Міллер-Эшлемана. Мік створив свою версію концепції меню Priority+ і застосував її на сайті коледжу, з яким разом працював. Мені завжди подобалося міркувати на тему створення шаблонів, особливо якщо потім він застосовується в реальному житті.

На маленьких екранах досить складно розмістити дуже довге меню. Зараз всюди використовують іконку-гамбургер, хоча часто так робити не радять. А вмістити всі пункти меню на різних дозволах майже нереально. Особливо це стосується розробників шаблонів, яким необхідно вмістити довільну кількість елементів меню.

Шаблон Priority+ намагається вмістити якомога більше елементів меню на екрані довільної ширини, а інші пункти стають доступні по кліку миші. Сьогодні я покажу вам приклад даного шаблону, який я розробив для коледжу Goshen. В меню є випадаючі списки і горизонтальна прокрутка, яку я не бачив ні на одному сайті:

Горизонтальна прокрутка з прилипающими пунктами меню на чистому CSS

Почнемо з простого меню з горизонтальною прокруткою:

Кому цікаво: для іменування класів я використовував BEM і для більшої зручності PostCSS для вкладеності і змінних. Зверніть увагу на те, як в демо вище змінюється перший пункт «GC Admissions» при зміні ширини вікна (більше/менше 480px). Ефект досягається за допомогою двох блоків-обгорток: зовнішнього, в якому зберігаються всі пункти меню, прокручивающиеся на ширині 480px.

Додаємо кнопки і випадаючі списки

Я доповнив попередній демо випадаючими списками і кнопками прокрутки. Для прокручування довелося вдатися до JS.

Залежності: для роботи в IE9+ я частково прописав в розмітці classList, performance.now і полифил requestAnimationFrame. Для перевірки успішного завантаження шрифту Source Sans Pro font використовується Font Face Observer. JQuery робить доступними пункти меню з випадаючими списками через клавішу табуляції, за допомогою обробки стану :focus на дочірніх посиланнях за допомогою focusin() і focusout(). Завантажуйте асинхронно (або знайдіть і легку заміну).

Кнопки прокрутки

Кнопки потрібні не тільки, щоб користувачі з клавіатурою і мишею могли прокручувати меню, але і для того, щоб показати, що прокрутка взагалі можлива. Концепція була взята зі сторінки iPhone сайту Apple.com:

В основі принципу лежить оновлення властивості scrollLeft відповідного контейнера по кліку на кнопку. Для плавності запускається функція анімації.

Також ви помітите якусь логіку в тому, яку кнопку показувати, а яку приховувати в залежності від прокручуваного блоку і т. д. Для цього нам необхідно зчитувати позицію скрола і ширину вікна.

Випадаючі списки і горизонтальна прокрутка

Створення пунктів меню з випадаючими списками і прокруткою – найскладніша частина нашого проекту. Базова структура HTML: прокручуємо контейнер з пунктами меню, в деяких з яких є випадаючі списки. Пункти меню мають відносне позиціонування, а випадаючі списки спозиционированы абсолютно. Так вони прокручуються, як єдине ціле, але не впливають на ширину один одного.

Щоб випадають пункти меню не відрізалися, необхідно задати явну висоту блоку-обгортки. Тут ми стикаємося з проблемою, коли дуже високий блок-обгортка буде штовхати або перекривати контент:

Я вирішив тримати меню закритим до тих пір, поки з ним ніхто не взаємодіє. А під час взаємодії ми відразу ж переходимо на стан №3 (і навпаки). Ефект досягається за рахунок обробки подій mouseover і touchstart на компоненті і обгортці.

У демо для простоти використовується всього один блок-обгортка. У демо з кількома обгортками я перемикаю властивість overflow (hidden/visible) компонента .nav, а не висоту окремих контейнерів. Але концепція одна і та ж. Якщо ви знаєте більш витончений спосіб, я весь увага!