js手机相应导航，可以在自适应屏幕的时候运用，当网站屏幕小到一定程度是，让该导航出现，该导航效果如下图：多级导航！

   主要的设计思路是：在菜单中往往会有很多内容或者有多个层次的子菜单，为了更加简洁和节省空间，在这个下拉菜单中将每个子菜单都隐藏在一个主导航按钮下方，当点击的时候通过细微的动画显示出来；当再次点击层级菜单时，可以再次以不同形式的动画展示下一级菜单。因为此菜单是流体布局的，所以可以很容易的适应于响应式布局当中。

   html代码：

					<div id="dl-menu" class="dl-menuwrapper">
						<button>Open Menu</button>
						<ul class="dl-menu">
							<li>
								<a href=http://www.mamicode.com/"#">Fashion>

动画样式
.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' }
});

demo下载：http://download.csdn.net/detail/confidence68/7633057