美文网首页
多级滑动菜单

多级滑动菜单

作者: 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

相关文章

  • 多级滑动菜单

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

  • 菜单工具插件

    菜单工具插件可以通过 创建多级内联或弹出式菜单,支持通过键盘方向键控制菜单滑动,允许为菜单的各个选项添加图标,调用...

  • XQMultistageTableView - iOS多级列表

    XQMultistageTableView - 多级列表 可以自定义子节点的多级菜单 1. 多级菜单 2. 多选/...

  • SwiftUI 2.0 中的菜单组件 —— Menu

    普通菜单 分栏菜单 多级嵌套菜单 Menu + Picker

  • iOS14 长按返回按钮 backButtonDisplayMo

    iOS 14中长按返回按钮会显示多级菜单,滑动后可以返回对应的页面。 在App上长按后title为空 backBu...

  • CSS常用菜单(三)

    3、多级菜单 下面我们来实现如下图所示的多级菜单 html代码: css代码: body { margin: 0;...

  • 多级菜单

  • 多级菜单

    1 二级菜单: 以上是CSS的样式,重点在于.menu a和.menu li的样式,一开始将定位放在.menu a...

  • 多级菜单

    Ps:

  • 多级菜单

    关于用Axure做折叠菜单,这里if语句,一旦满足一个值为空它就直接返回,不执行下面if语句了,然后本来想把空的菜...

网友评论

      本文标题:多级滑动菜单

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