Пріоритетність і шаблон навігації

15

Від автора: Ідея наступна: показувати стільки горизонтальних пунктів меню, скільки вміщується по ширині сторінки і додавати перемикач користувальницького інтерфейсу для відображення всіх інших пунктів. Мені подобається така ідея. Навіщо приховувати всі за перемикачем, коли є місце для відображення найбільш важливих пунктів? Варіанти того, як це має виглядати і працювати, можуть бути різними. Давайте подивимося на деякі приклади!

Ось візуальний демо-приклад даного шаблону:

Пріоритетність і шаблон навігації

У цьому демо-прикладі навігація має два стани: 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. Подивіться:

Пріоритетність і шаблон навігації

Чи використовуєте ви даний шаблон? Чи подобається він вам чи ні?