Від автора: експериментальне висувне меню з багаторівневою функціональністю, що дозволяє нескінченне вкладення навігаційних елементів.
Сьогодні ми хочемо поділитися з вами ще одним експериментальним меню. Звичайно, ви вже знайомі з так званої off-canvas-навігацією (прихованою і відкривається на вимогу, наприклад, при натисканні на кнопку) у мобільних додатках і його реалізацією для адаптивних вебсайтів зразок цього, створеного Девідом Бушелом (David Bushell). Ми намагалися дослідити можливість створення вкладеного багаторівневого меню, що могло виявитися вельми до речі для меню з великою кількістю контенту (такого, як навігація онлайн-магазинів). Результатом стало «висувне» меню, здатне (теоретично) містити нескінченні вкладені підменю. При відкритті підрівня навігації весь вміст зсувається ще більше, при цьому залишається видимим шматочок батьківського меню. На вибір – його можна залишити видимим, а можна прибрати, в такому випадку підменю просто закриє батьківський елемент.
Працювати з вкладеними елементами досить складно, тому що, наприклад, при переміщенні батьківського елементу разом з ним, природно, переміщуються і всі дочірні. Тому ми застосуємо кілька прийомів, які будуть підтримувати потрібні 3D-трансляції підменю та їх дочірніх елементів. Основна думка полягає в збільшенні значення для трансляції з тим, щоб гарантувати, що підрівні не будуть відображатися, коли ми всі трохи зрушимо для демонстрації країв батьківських елементів. Звичайно, це не є необхідним у тому випадку, коли підменю закриває батьківський елемент.
Будь ласка, зверніть увагу, що ми використовуємо 3D-перетворення, які працюють тільки в сучасних браузерах. Приклад альтернативного варіанту для неподдерживающих браузерів ви знайдете в кінці файлу component.css, де просто показано меню першого рівня. Те ж саме ми робимо в разі відсутності JS.
Для меню ми використовуємо наступну вкладену структуру:
All Categories
-
Devices
Devices
-
Mobile Phones
Mobile Phones
- Super Smart Phone
- Thin Magic Mobile
- Performance Crusher
- Futuristic Experience
-
Mobile Phones
…де кожен рівень обгорнутий в розділ з класом mp-level. У нормі ми застосували б до меню такого роду фіксоване позиціонування, але так як з цим вельми незвичайна «проблема» (перетворення змусять його вести себе як елемент з абсолютним позиціонуванням), то нам доведеться використовувати абсолютне позиціонування, яке поставить нас обличчям до проблеми деякого небажаного поведінки сайту (прокручування меню і залежно від висоти документа). Тому ми застосуємо невелику хитрість, щоб уникнути прокрутки меню і його відсікання, якщо вміст сайту виявиться занадто коротко, взявши наступну структуру сторінки:
