Багаторівневе висувне меню

31

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

Сьогодні ми хочемо поділитися з вами ще одним експериментальним меню. Звичайно, ви вже знайомі з так званої 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

…де кожен рівень обгорнутий в розділ з класом mp-level. У нормі ми застосували б до меню такого роду фіксоване позиціонування, але так як з цим вельми незвичайна «проблема» (перетворення змусять його вести себе як елемент з абсолютним позиціонуванням), то нам доведеться використовувати абсолютне позиціонування, яке поставить нас обличчям до проблеми деякого небажаного поведінки сайту (прокручування меню і залежно від висоти документа). Тому ми застосуємо невелику хитрість, щоб уникнути прокрутки меню і його відсікання, якщо вміст сайту виявиться занадто коротко, взявши наступну структуру сторінки:

Де призначаємо елементів наступні стилі:

html
body,
.container,
.scroller {
height: 100%;
}
.scroller {
overflow-y: scroll;
}
.scroller,
.scroller-inner {
position: relative;
}
.container {
position: relative;
overflow: hidden;
background: #34495e;
}

Це дозволить прокручувати вміст при закритому меню, а ще воно стане 100% від висоти вікна. По суті, ви імітуємо те, чого домігся б тут фіксоване позиціонування. Ось як можна викликати плагін:

new mlPushMenu( document.getElementById( ‘mp-menu’ ), document.getElementById( ‘trigger’ ) );

Або, якщо підменю повинні закривати попередні рівні:

new mlPushMenu( document.getElementById( ‘mp-menu’ ), document.getElementById( ‘trigger’ ), {
type : ‘cover’
} );

Для демо-прикладів ми користуємося прекрасними іконними шрифтами Linicons Сергія Шмідта (Sergey Shmidt), створеними за допомогою програми IcoMoon. Сподіваємося, що це меню вам сподобається і виявиться корисним.