今天我们将分享一个响应式多级菜单，主要目的是减少那些含有很多内容和子菜单的菜单占用的页面空间。每个子菜单将在当前菜单容器中显示，同时隐藏父菜单。

在线演示  源码下载

菜单带有一些滑入淡出的动画，这些定义在单独的animation类里面，正因为这样的显示效果，菜单可以很好的显示在各种大小的窗口上，应用在响应式布局里面。

所有主流浏览器支持包括IE10，ie9和更低版本不支持动画效果。

HTML结构：

html结构由一个可以随意包含子列表的无序列表组成。

查看代码

1. <div id="dl-menu" class="dl-menuwrapper">
2.     <button>Open Menu</button>
3.     <ul class="dl-menu">
4.         <li>
5.             <a href="#">Item 1</a>
6.             <ul class="dl-submenu">
7.                 <li class="dl-back"><a href="#">back</a></li>
8.                 <li><a href="#">Sub-Item 1</a></li>
9.                 <li><a href="#">Sub-Item 2</a></li>
10.                 <li><a href="#">Sub-Item 3</a></li>
11.                 <li>
12.                     <a href="#">Sub-Item 4</a>
13.                     <ul class="dl-submenu">
14.                         <li class="dl-back"><a href="#">back</a></li>
15.                         <li><a href="#">Sub-Sub-Item 1</a></li>
16.                         <li><a href="#">Sub-Sub-Item 2</a></li>
17.                         <li><a href="#">Sub-Sub-Item 3</a></li>
18.                     </ul>
19.                 </li>
20.                 <li><!-- ... --></li>
21.                 <!-- ... -->
22.             </ul>
23.         </li>
24.         <li><!-- ... --></li>
25.         <li><!-- ... --></li>
26.         <!-- ... -->
27.     </ul>
28. </div>

CSS动画样式：

查看代码

1. .dl-menu.dl-animate-out-1 {
2.     animation: MenuAnimOut1 0.4s linear forwards;
3. }
4.  
5. @keyframes MenuAnimOut1 {
6.     50% {
7.         transform: translateZ(-250px) rotateY(30deg);
8.     }
9.     75% {
10.         transform: translateZ(-372.5px) rotateY(15deg);
11.         opacity: .5;
12.     }
13.     100% {
14.         transform: translateZ(-500px) rotateY(0deg);
15.         opacity: 0;
16.     }
17. }
18.  
19. .dl-menu.dl-animate-in-1 {
20.     animation: MenuAnimIn1 0.3s linear forwards;
21. }
22.  
23. @keyframes MenuAnimIn1 {
24.     0% {
25.         transform: translateZ(-500px) rotateY(0deg);
26.         opacity: 0;
27.     }
28.     20% {
29.         transform: translateZ(-250px) rotateY(30deg);
30.         opacity: 0.5;
31.     }
32.     100% {
33.         transform: translateZ(0px) rotateY(0deg);
34.         opacity: 1;
35.     }
36. }

加载菜单方法：

查看代码

1. $( '#dl-menu' ).dlmenu({
2.     animationClasses : { in : 'animation-class-name', out : 'animation-class-name' }
3. });

英文原文链接：http://tympanus.net/codrops/2013/04/19/responsive-multi-level-menu/