Від автора: стаття нашого гостя, Міка Міллер-Эшлемана. Мік створив свою версію концепції меню 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, а не висоту окремих контейнерів. Але концепція одна і та ж. Якщо ви знаєте більш витончений спосіб, я весь увага!
