Tạp Chí CNTT

<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 -->

.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 : { 
    classin : 'animation-class-name',
    classout : 'animation-class-name'
  }
});