译文仅为团队内部分享,对外不对质量负责。
期望:多层级菜单,延迟滑动动画效果,附送面包屑功能以及返回按钮。
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