От автора: мы уже писали статьи на тему шаблона Priority+. По ссылке вы найдете кучу рабочих примеров. Если бы он попался мне раньше, однако совсем недавно я наткнулся на приоритетное меню от Gijs Rogé. Его способ довольно-таки неплох: полностью независим, чистый код, много настроек и легко изменить дизайн. Такие показатели уже сами по себе не мало, но кроме того там же еще и множество вспомогательных функций. В общем, я решил улучшить его версию.
Метод: тестируем элементы на наличие контейнера-обертки
В этой версии применяется JQuery (для облегчения навигации по DOM) и Lodash (для устранения повторных нажатий). Эти библиотеки довольно весомы, и, скорее всего, вы бы не стали их использовать для меню, однако это мой проект, и я буду их использовать.
Я слегка изменил сам подход к построению меню. Вместо того, чтобы измерять ширину контейнера и каждого пункта меню, чтобы вместить их, я просто делаю для каждого элемента блок-обертку. При изменении размера окна браузера я проверяю позиции элементов, и если я могу определить позиции блоков-оберток этих элементов, то лишние элементы скрываются из поля зрения. Таким образом, вы даже не заметите, что элементы дополнительно обернуты контейнерами.
Конечно, еще нужно все это воплотить в код. Но, имея представление о том, какие элементы должны исчезать из поля зрения, мы можем клонировать их. И будьте готовы к тому, что вам придется делать это не один раз при каждом изменении размера окна, но не слишком часто (вот тут и появляется эффект дергания).
Метод: измерение ширины
Этот метод я видел очень часто, он заключается в определении ширины. У Johan van Tongeren есть своя версия этого метода:
Код довольно-таки короткий. Необходимо измерить свободное пространство и размеры элементов. Если места для элементов не достаточно, один пункт меню отрывается от остальных и уходит из поля зрения. Так повторяется до тех пор, пока элементы не вместятся в требуемый размер. В данном метода очень много расчетов, особенно связанных с рекурсией, но тем не менее он хорошо работает.
Luke Jacksonn сделал свою версию меню:
Метод: Определение скрытых элементов заранее
Michel Scharnagl написал демо без использования JavaScript’а.
Демо работает на селекторе :target, значения hide/show применяются для того, чтобы скрывать и показывать ссылки. Для изменения количества ссылок на различных экранах он использует специальные классы alpha/beta/gamma вместе с медиа запросами.
Вывод
Я думаю, это именно тот случай, когда вы можете просто взять чужой код и переделать его под себя. Во многих случаях это хорошая идея. Но иногда для того, чтобы раскрыть дополнительных возможности кода намного круче копнуть немного дальше и постараться написать что-то самому. Я не думаю, что моя версия чем-то лучше других, зато я изучил эту проблему и понял, как решить ее различными способами.
Автор: Chris Coyier
Источник: //css-tricks.com/
Редакция: Команда webformyself.
