响应式多级菜单

分类栏目:用户体验 - 前端开发

28512

发布于 18 条评论

今天要跟大家分享的是一个流体布局的下拉菜单。

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

MultiLevelMenu

查看预览下载附件

HTML结构代码

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

<div id="dl-menu" class="dl-menuwrapper">
    <button>Open Menu</button>
    <ul class="dl-menu">
        <li>
            <a href="http://www.jiawin.com" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >Item 1</a>
            <ul class="dl-submenu">
                <li class="dl-back"><a href="http://www.jiawin.com" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >back</a></li>
                <li><a href="http://www.jiawin.com" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >Sub-Item 1</a></li>
                <li><a href="http://www.jiawin.com" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >Sub-Item 2</a></li>
                <li><a href="http://www.jiawin.com" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >Sub-Item 3</a></li>
                <li>
                    <a href="http://www.jiawin.com" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >Sub-Item 4</a>
                    <ul class="dl-submenu">
                        <li class="dl-back"><a href="http://www.jiawin.com" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >back</a></li>
                        <li><a href="http://www.jiawin.com" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >Sub-Sub-Item 1</a></li>
                        <li><a href="http://www.jiawin.com" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >Sub-Sub-Item 2</a></li>
                        <li><a href="http://www.jiawin.com" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >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' }
});

查看预览下载附件

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

译文:codrops

全部评论 / 18

  1. Z+

    这个设计确实不错,不知道有没有pc端的效果啊 http://www.amiue.com我的网站也想换个响应式的菜单

    Z+ 2013-04-22
    16
  2. 我的网站也是运用的响应,不过,楼主发的案例之前见过!

    我的博客也是运用响应做的,详情请看:http://www.haorooms.com/

    Aaron 2013-04-22
    15
    1. 我的博客

      http://www.haorooms.com/

      是这个地址,上面没有连接没有问题!

      Aaron 2013-04-22
  3. 附件里的好像和文章的不一样呢

    Pete 2013-04-22
    14
  4. 这个效果在国外网站看过,但是忘记了域名!!

    sunny 2013-04-22
    13
    1. Javin

      文章后面有原作者地址。

      1号 Javin 2013-04-22
  5. 好东西 当然要多多支持

    12
  6. 这个必须收藏啊!太实用了!

    11
  7. 真心想叫声师傅,可否收徒?

    心语难诉 2013-04-22
    10
  8. 我刚想应用的时候,才发现这个是2级才有效果,一般WP博客不太会有这么深的目录吧。

    tiandi 2013-04-22
    9
  9. 最不擅长这些东西,收藏了,几天后果断用。

    tiandi 2013-04-22
    8
  10. 确实挺便宜的,博主可以交换个链接吗

    7
  11. 这个效果很是不错,也是准备最近换上我的导航菜单里去.

    6
  12. 我觉得dock那个效果不错。。

    大发 2013-04-22
    5
  13. 这个效果太帅了。

    4
  14. 学习了,放在新主题里~嘿嘿

    Mu. 2013-04-22
    3
  15. 这款好棒,感谢博主分享,以后会常来。

    2
  16. 不错啊,学习了!

    小林 2013-04-22
    1