Trong bài hướng dẫn này, chúng tôi muốn chia sẻ đến các bạn một Drop Menu. Chúng tiết kiệm không gian cho các menu có nhiều nội dung.
Cấu trúc của menu như sau:
<div id="dl-menu" class="dl-menuwrapper">
<button class="dl-trigger">Open Menu</button>
<ul class="dl-menu">
<li><a href="#">Item 1</a>
<ul class="dl-submenu">
<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><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 -->
Cấu hình CSS làm chuyển động như sau:
.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;
}
}
Thêm plugin jQuery và gọi thực hiện:
$( '#dl-menu' ).dlmenu({
animationClasses : {
classin : 'animation-class-name',
classout : 'animation-class-name'
}
});
