响应式多级菜单

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

HTML结构代码

菜单的结构包含一个无序列表，可以有任意数量的子列表：

<div id="dl-menu" class="dl-menuwrapper">
    <button>Open Menu</button>
    <ul class="dl-menu">
        <li>
            <a href="http://www.jiawin.com">Item 1</a>
            <ul class="dl-submenu">
                <li class="dl-back"><a href="http://www.jiawin.com">back</a></li>
                <li><a href="http://www.jiawin.com">Sub-Item 1</a></li>
                <li><a href="http://www.jiawin.com">Sub-Item 2</a></li>
                <li><a href="http://www.jiawin.com">Sub-Item 3</a></li>
                <li>
                    <a href="http://www.jiawin.com">Sub-Item 4</a>
                    <ul class="dl-submenu">
                        <li class="dl-back"><a href="http://www.jiawin.com">back</a></li>
                        <li><a href="http://www.jiawin.com">Sub-Sub-Item 1</a></li>
                        <li><a href="http://www.jiawin.com">Sub-Sub-Item 2</a></li>
                        <li><a href="http://www.jiawin.com">Sub-Sub-Item 3</a></li>
                    </ul>
                </li>
                <li><!-- ... --></li>
                <!-- ... -->
            </ul>
        </li>
        <li><!-- ... --></li>
        <li><!-- ... --></li>
        <!-- ... -->
    </ul>
</div><!-- /dl-menuwrapper -->

定义动画样式

主要还是通过css3的动画属性来实现：

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

希望大家喜欢，并且可以从中得到启发。

如果本文对你有帮助，你可以扫描右边的二维码打赏，谢谢支持

联系优畅：uctheme#qq.com (#改为@)
微信订阅号：优畅主题（uctheme）
官网淘宝店：http://uctheme.taobao.com
版权声明：版权归 优畅主题 所有，转载请注明出处！
转载请保留链接： https://www.uctheme.com/front/882.html