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

18

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

Метод: тестуємо елементи на наявність контейнера-обгортки

У цій версії застосовується JQuery (для полегшення навігації по DOM) і Lodash (для усунення повторних натискань). Ці бібліотеки досить вагомі, і, швидше за все, ви б не стали їх використовувати для меню, однак це мій проект, і я буду їх використовувати.

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

Звичайно, ще потрібно все це втілити в код. Але, маючи уявлення про те, які елементи повинні зникати з поля зору, ми можемо клонувати їх. І будьте готові до того, що вам доведеться робити це не один раз при кожному зміні розміру вікна, але не занадто часто (ось тут і з’являється ефект смикання).

Метод вимірювання ширини

Цей метод я бачив дуже часто, він полягає у визначенні ширини. У Johan van Tongeren є своя версія цього методу:

Код досить-таки короткий. Необхідно виміряти вільний простір і розміри елементів. Якщо місця для елементів не достатньо, один пункт меню відривається від решти й іде з поля зору. Так повторюється до тих пір, поки елементи не вмістяться в потрібний розмір. В даному методу дуже багато розрахунків, особливо пов’язаних з рекурсією, але тим не менш він добре працює.

Luke Jacksonn зробив свою версію меню:

Метод: Визначення прихованих елементів заздалегідь

Michel Scharnagl написав демо без використання JavaScript’а.

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

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

Висновок

Я думаю, це саме той випадок, коли ви можете просто взяти чужий код і переробити його під себе. У багатьох випадках це хороша ідея. Але інколи для того, щоб розкрити додаткові можливості коду набагато крутіше копнути трохи далі і спробувати написати щось самому. Я не думаю, що моя версія щось краще за інших, зате я вивчив цю проблему і зрозумів, як вирішити її різними способами.