Создаем шаблон меню Priority+ с прокруткой и выпадающими списками

Создаем шаблон меню Priority+ с прокруткой и выпадающими списками

От автора: статья нашего гостя, Мика Миллер-Эшлемана. Мик создал свою версию концепции меню 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

Источник: https://css-tricks.com/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (1)

  1. Ирина

    Буквально месяц назад заказчик требовал «меню, как на сайте Apple». Сделала, но этот способ лучше. Теперь знаю, где подсмотреть. Спасибо)

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree