多级滑动菜单

2016-07-19  本文已影响168人  QIQIBIBI

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

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

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

上一篇下一篇

猜你喜欢

热点阅读