HTML部分
<div id="dl-menu" class="dl-menuwrapper"> <button>Open Menu</button> <ul class="dl-menu"> <li> <a href="https://www.huawenonline.com">Item 1</a> <ul class="dl-submenu"> <li class="dl-back"><a href="https://www.huawenonline.com">back</a></li> <li><a href="https://www.huawenonline.com">Sub-Item 1</a></li> <li><a href="https://www.huawenonline.com">Sub-Item 2</a></li> <li><a href="https://www.huawenonline.com">Sub-Item 3</a></li> <li> <a href="https://www.huawenonline.com">Sub-Item 4</a> <ul class="dl-submenu"> <li class="dl-back"><a href="https://www.huawenonline.com">back</a></li> <li><a href="https://www.huawenonline.com">Sub-Sub-Item 1</a></li> <li><a href="https://www.huawenonline.com">Sub-Sub-Item 2</a></li> <li><a href="https://www.huawenonline.com">Sub-Sub-Item 3</a></li> </ul> </li> <li><!-- ... --></li> <!-- ... --> </ul> </li> <li><!-- ... --></li> <li><!-- ... --></li> <!-- ... --> </ul> </div>
CSS
.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; } }
JavaScript
$( '#dl-menu' ).dlmenu({ animationClasses : { in : 'animation-class-name', out : 'animation-class-name' } });
请注意需要引入jQuery库
<script src="https://www.rengang.com.cn/js/jquery-1.9.1.js"></script> <script src="https://www.rengang.com.cn/js/jquery.dlmenu.js"></script>" />