От автора: Идея следующая: показывать столько горизонтальных пунктов меню, сколько помещается по ширине страницы, и добавлять переключатель пользовательского интерфейса для отображения всех остальных пунктов. Мне нравится такая идея. Зачем скрывать все за переключателем, когда есть место для отображения наиболее важных пунктов? Варианты того, как это должно выглядеть и работать, могут быть разными. Давайте посмотрим на некоторые примеры!
Вот визуальный демо-пример данного шаблона:
В этом демо-примере навигация имеет два состояния: 1) отображение всех ссылок 2) отображение только трех ссылок + ссылка «Больше».
Идея для данной статьи возникла, когда я размышлял над тем, существует ли простое CSS решение для того, чтобы при недостатке места «сокращать» количество пунктов меню, скрывая их за переключателем. Моя идея заключалась в том, чтобы создать навигацию фиксированной высоты, указав свойство overflow:hidden и обернув все пункты меню. Поскольку каждый пункт меню будет обернут, он будет визуально скрыт. Вот пример этого принципа:
Переключателем в данном случае является трехлинейная иконка меню, но им также легко могут быть ссылки «Больше» или «+» или еще что-нибудь. Переключение в данном случае обрабатывает JavaScript, но вы также можете обойтись без JS, используя трюк с чекбоксами.
Единственное, что мне не нравится, – это фиксированная высота. В CSS это всегда должно настораживать. Когда нам приходится работать с текстом, то подобные случаи приводят к использованию магических чисел. Данный момент можно немного улучшить, используя единицы измерения em или rem, чтобы высота могла меняться при увеличении текста. Но все равно.
В качестве альтернативного варианта можете даже задействовать еще больше кода на JavaScript, чтобы суммировать ширину каждого пункта меню и сравнивать полученное значение с доступной шириной. Если полученное значение будет слишком большим, то нужно будет скрыть пункты меню за переключателем, чтобы оставшиеся пункты входили по ширине.
Бен Каллахан (Ben Callahan) продемонстрировал мне несколько «живых» примеров использования данного приема. Вот пример сайта NCSBN.org:
И сайта Wonderful Machine:
Люк Джексонн (Luke Jacksonn) создал демо-пример под названием «Жадная навигация». Самое интересное заключается в том, как вычисляется то, сколько пунктов меню скрыто.
На сайте AWS также применяется данный шаблон, реализованный Томом Хортоном (Tom Horton):
Джон Окстон Кинг (John Oxton King) придумал интересную разновидность данного шаблона, которую он назвал Бесконечная горизонтальная навигация:
Есть мнение о том, что впервые подобный подход был реализован на сайте The Guardian. Посмотрите:
Используете ли вы данный шаблон? Нравится ли он вам или нет?
Автор: Chris Coyier
Источник: //css-tricks.com/
Редакция: Команда webformyself.
