От автора: статья нашего гостя, Мика Миллер-Эшлемана. Мик создал свою версию концепции меню Priority+ и применил ее на сайте колледжа, с которым вместе работал. Мне всегда нравилось рассуждать на тему создания шаблонов, особенно если потом он применяется в реальной жизни.
На маленьких экранах довольно сложно разместить очень длинное меню. Сейчас повсюду используют иконку-гамбургер, хотя зачастую так делать не советуют. А уместить все пункты меню на разных разрешениях почти нереально. Особенно это касается разработчиков шаблонов, которым необходимо уместить произвольное количество элементов меню.
Шаблон Priority+ старается уместить как можно больше элементов меню на экране произвольной ширины, а остальные пункты становятся доступны по клику мыши. Сегодня я покажу вам пример данного шаблона, который я разработал для колледжа Goshen. В меню есть выпадающие списки и горизонтальная прокрутка, которую я не видел ни на одном сайте:
Горизонтальная прокрутка с прилипающими пунктами меню на чистом CSS
Начнем с простого меню с горизонтальной прокруткой:
Кому интересно: для именования классов я использовал BEM и для большего удобства PostCSS для вложенности и переменных. Обратите внимание на то, как в демо выше изменяется первый пункт «GC Admissions» при изменении ширины окна (больше/меньше 480px). Эффект достигается при помощи двух блоков-оберток: внешнего, в котором хранятся все пункты меню, прокручивающиеся на ширине <480px, и внутреннего блока, в котором хранятся все свободные пункты меню, прокручивающиеся на ширине >480px.
Добавляем кнопки и выпадающие списки
Я дополнил предыдущее демо выпадающими списками и кнопками для прокрутки. Для прокрутки пришлось прибегнуть к JS.
Зависимости: для работы в IE9+ я частично прописал в разметке classList, performance.now и полифил requestAnimationFrame. Для проверки успешной загрузки шрифта Source Sans Pro font используется Font Face Observer. JQuery делает доступными пункты меню с выпадающими списками через клавишу tab при помощи обработки состояния :focus на дочерних ссылках с помощью focusin() и focusout(). Загружайте асинхронно (или найдите легковесную замену).
Кнопки для прокрутки
Кнопки нужны не только, чтобы пользователи с клавиатурой и мышью могли прокручивать меню, но и для того, чтобы показать, что прокрутка вообще возможна. Концепция была взята со страницы iPhone сайта Apple.com:
В основе принципа лежит обновление свойства scrollLeft соответствующего контейнера по клику на кнопку. Для плавности запускается функция анимации.
Также вы заметите некую логику в том, какую кнопку показывать, а какую скрывать в зависимости от прокручиваемого блока и т.д. Для этого нам необходимо считывать позицию скрола и ширину окна.
Выпадающие списки и горизонтальная прокрутка
Создание пунктов меню с выпадающими списками и прокруткой – самая сложная часть нашего проекта. Базовая HTML структура: прокручиваемый контейнер с пунктами меню, в некоторых из которых есть выпадающие списки. Пункты меню имеют относительное позиционирование, а выпадающие списки спозиционированы абсолютно. Так они прокручиваются, как единое целое, но не влияют на ширину друг друга.
Чтобы выпадающие пункты меню не отрезались, необходимо задать явную высоту блока-обертки. Тут мы сталкиваемся с проблемой, когда очень высокий блок-обертка будет толкать или перекрывать контент:
Я решил держать меню закрытым до тех пор, пока с ним никто не взаимодействует. А во время взаимодействия мы сразу же переходим на состояние №3 (и наоборот). Эффект достигается за счет обработки событий mouseover и touchstart на компоненте и обертке.
В демо для простоты используется всего один блок-обертка. В демо с несколькими обертками я переключаю свойство overflow (hidden/visible) компонента .nav, а не высоту отдельных контейнеров. Но концепция одна и та же. Если вы знаете более изящный способ, я весь внимание!
Автор: Micah Miller-Eshleman
Источник: //css-tricks.com/
Редакция: Команда webformyself.
Комментарии (1)