Самописное меню на шаблоне Priority+

Самописное меню на шаблоне Priority+

От автора: мы уже писали статьи на тему шаблона Priority+. По ссылке вы найдете кучу рабочих примеров. Если бы он попался мне раньше, однако совсем недавно я наткнулся на приоритетное меню от Gijs Rogé. Его способ довольно-таки неплох: полностью независим, чистый код, много настроек и легко изменить дизайн. Такие показатели уже сами по себе не мало, но кроме того там же еще и множество вспомогательных функций. В общем, я решил улучшить его версию.

Метод: тестируем элементы на наличие контейнера-обертки

В этой версии применяется JQuery (для облегчения навигации по DOM) и Lodash (для устранения повторных нажатий). Эти библиотеки довольно весомы, и, скорее всего, вы бы не стали их использовать для меню, однако это мой проект, и я буду их использовать.

Я слегка изменил сам подход к построению меню. Вместо того, чтобы измерять ширину контейнера и каждого пункта меню, чтобы вместить их, я просто делаю для каждого элемента блок-обертку. При изменении размера окна браузера я проверяю позиции элементов, и если я могу определить позиции блоков-оберток этих элементов, то лишние элементы скрываются из поля зрения. Таким образом, вы даже не заметите, что элементы дополнительно обернуты контейнерами.

Конечно, еще нужно все это воплотить в код. Но, имея представление о том, какие элементы должны исчезать из поля зрения, мы можем клонировать их. И будьте готовы к тому, что вам придется делать это не один раз при каждом изменении размера окна, но не слишком часто (вот тут и появляется эффект дергания).

Метод: измерение ширины

Этот метод я видел очень часто, он заключается в определении ширины. У Johan van Tongeren есть своя версия этого метода:

Код довольно-таки короткий. Необходимо измерить свободное пространство и размеры элементов. Если места для элементов не достаточно, один пункт меню отрывается от остальных и уходит из поля зрения. Так повторяется до тех пор, пока элементы не вместятся в требуемый размер. В данном метода очень много расчетов, особенно связанных с рекурсией, но тем не менее он хорошо работает.

Luke Jacksonn сделал свою версию меню:

Метод: Определение скрытых элементов заранее

Michel Scharnagl написал демо без использования JavaScript’а.

Демо работает на селекторе :target, значения hide/show применяются для того, чтобы скрывать и показывать ссылки. Для изменения количества ссылок на различных экранах он использует специальные классы alpha/beta/gamma вместе с медиа запросами.

Вывод

Я думаю, это именно тот случай, когда вы можете просто взять чужой код и переделать его под себя. Во многих случаях это хорошая идея. Но иногда для того, чтобы раскрыть дополнительных возможности кода намного круче копнуть немного дальше и постараться написать что-то самому. Я не думаю, что моя версия чем-то лучше других, зато я изучил эту проблему и понял, как решить ее различными способами.

Автор: Chris Coyier

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

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

Курс по HTML5: основы

Изучите HTML5 с нуля!

Смотреть курс

Метки:

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

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

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

Ваш 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