Адаптивне багаторівневе меню

26

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

Сьогодні ми хочемо поділитися з вами експериментальним випадаючим меню. Основна ідея полягає в економії місця меню, що має багато контенту і підрівнів. Кожен підрівень показуватися, змушуючи батьківський рівень зникати. Це відбувається з невеликою анімацією, визначеної в окремих класах анімації. Меню рухоме, так що може легко використовуватися в адаптивній розмітці.

Адаптивне багаторівневе менюАдаптивне багаторівневе меню

Адаптивне багаторівневе меню

Будь ласка, зауважте: воно працює як годиться тільки в браузерах, які підтримують відповідні властивості CSS.

Структура меню містить ненумерованний список, в якому може бути довільна кількість вкладених списків:

Open Menu

  • Item 1

    • back
    • Sub-Item 1
    • Sub-Item 2
    • Sub-Item 3
    • Sub-Item 4

      • back
      • Sub-Sub-Item 1
      • Sub-Sub-Item 2
      • Sub-Sub-Item 3

Анімація визначається в класах animation:

.dl-menu.dl-animate-out-1 {
animation: MenuAnimOut1 0.4 s linear forwards;
}
@keyframes MenuAnimOut1 {
50% {
transform: translateZ(-250px) rotateY(30deg);
}
75% {
transform: translateZ(-372.5 px) rotateY(15deg);
opacity: .5;
}
100% {
transform: translateZ(-500px) rotateY(0deg);
opacity: 0;
}
}
.dl-menu.dl-animate-in-1 {
animation: MenuAnimIn1 0.3 s linear forwards;
}
@keyframes MenuAnimIn1 {
0% {
transform: translateZ(-500px) rotateY(0deg);
opacity: 0;
}
20% {
transform: translateZ(-250px) rotateY(30deg);
opacity: 0.5;
}
100% {
transform: translateZ(0px) rotateY(0deg);
opacity: 1;
}
}

А плагін викликається як тут:

$( ‘#dl-menu’ ).dlmenu({
animationClasses : { in : ‘animation-class-name’, out : ‘animation-class-name’ }
});

Сподіваємося, вам сподобався цей маленький експеримент і ви вважаєте його надихає!