Адаптивное многоуровневое меню
Сегодня мы хотим поделиться с вами экспериментальным выпадающим меню. Основная суть заключается в экономии пространства при использовании меню с большим количеством контента и подпунктов. Каждый подуровень данного меню будет отображаться в отдельном блоке, а "родительский" уровень будет исчезать. Это реализовано при помощи незначительной анимации, которая определяется в отдельных классах анимаций. Меню гибкое, и поэтому мы без труда можем использовать его в адаптивных шаблонах.
Примечание: данное меню будет работать только в тех браузерах, которые оснащены поддержкой соответствующих css-свойств.
Структура меню содержит ненумерованный список, в который можно вносить любое количество подсписков:
<div id="dl-menu" class="dl-menuwrapper">
<button>Open Menu</button>
<ul class="dl-menu">
<li>
<a href="#">Item 1</a>
<ul class="dl-submenu">
<li class="dl-back"><a href="#">back</a></li>
<li><a href="#">Sub-Item 1</a></li>
<li><a href="#">Sub-Item 2</a></li>
<li><a href="#">Sub-Item 3</a></li>
<li>
<a href="#">Sub-Item 4</a>
<ul class="dl-submenu">
<li class="dl-back"><a href="#">back</a></li>
<li><a href="#">Sub-Sub-Item 1</a></li>
<li><a href="#">Sub-Sub-Item 2</a></li>
<li><a href="#">Sub-Sub-Item 3</a></li>
</ul>
</li>
<li><!-- ... --></li>
<!-- ... -->
</ul>
</li>
<li><!-- ... --></li>
<li><!-- ... --></li>
<!-- ... -->
</ul>
</div><!-- /dl-menuwrapper -->
Анимации определяются в классах animation:
.dl-menu.dl-animate-out-1 {
animation: MenuAnimOut1 0.4s linear forwards;
}
@keyframes MenuAnimOut1 {
50% {
transform: translateZ(-250px) rotateY(30deg);
}
75% {
transform: translateZ(-372.5px) rotateY(15deg);
opacity: .5;
}
100% {
transform: translateZ(-500px) rotateY(0deg);
opacity: 0;
}
}
.dl-menu.dl-animate-in-1 {
animation: MenuAnimIn1 0.3s 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' }
});
Надеемся, этот эксперимент вам понравился, и вдохновил вас на собственные проекты!
Комментариев 0