美文网首页
多级滑动菜单

多级滑动菜单

作者: QIQIBIBI | 来源:发表于2016-07-19 16:25 被阅读168次

    译文仅为团队内部分享,对外不对质量负责。

    期望:多层级菜单,延迟滑动动画效果,附送面包屑功能以及返回按钮。

    Demo:http://tympanus.net/Blueprints/MultiLevelMenu/

    这个多层级菜单的设计目的为:展开子级时,父级隐藏,并且有过渡动画;动画从所点对象开始,由它引领,其他邻居节点跟随其运动产生延迟特效。子级菜单的特效跟随与父级相同的逻辑。更深层的子菜单使用 data 属性来引用和关联。

    其他可选元素包括:1) 面包屑;2) 回退钮(demo内暂未显示)。

    移动端使用媒体查询的方法将菜单缩为左上角的 toggle menu。

    末尾可以使用简易的 callback。

    原代码

    编辑器插入代码段落不便的原因,请直接到原页面正文后参考相关 HTML/CSS/JavaScript:
    http://tympanus.net/codrops/2015/11/17/multi-level-menu/

    代码包下载:
    http://tympanus.net/Blueprints/MultiLevelMenu/MultiLevelMenu.zip

    相关文章

      网友评论

          本文标题:多级滑动菜单

          本文链接:https://www.haomeiwen.com/subject/uddzhttx.html