Template:CSS UCL99

<button class="dl-trigger">Open Menu</button>

• <a href="#">Item 1</a>
  • <a href="#">Sub-Item 1</a>
  • <a href="#">Sub-Item 2</a>
  • <a href="#">Sub-Item 3</a>
  • <a href="#">Sub-Item 4</a>
    • <a href="#">Sub-Sub-Item 1</a>
    • <a href="#">Sub-Sub-Item 2</a>
    • <a href="#">Sub-Sub-Item 3</a>

.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' } });