×
响应式多级菜单
优畅主题 前端开发 2014-09-07 19:33 4,351 0 条评论

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

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/882.html
谢谢微信打赏

微信钱包扫描赞助

谢谢支付宝打赏

支付宝扫一扫赞助

品牌创立:2012-11-18优畅主题

优畅主题成立于2012年11月18日,专业Wordpress导购主题开发商,拥有多年Wordpress主题设计经验,专门为淘宝客和导购客站长量身打造高端赚钱模板,我们注重细节,有着严谨的开发态度,一切从客户角度出发,如果你也喜欢 WordPress导购主题,欢迎和我们一起交流!

上一篇 CSS绘制星星评分 WordPress: 数据库换前缀导致的问题和解决 下一篇

7 + 9 = ?

目前还没有评。

切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册