如何用Axure实现菜单下拉效果的操作步骤

2019-12-1009:08:06原型设计Comments3,240 views字数 639阅读模式

Axure的基础元件库里面已经有菜单项了,但是样式和交互我们不一定喜欢,所以这里自己制作菜单项以满足不同的需求。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/17575.html

如何用Axure实现菜单下拉效果的操作步骤文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/17575.html

预览图

初始状态:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/17575.html

如何用Axure实现菜单下拉效果的操作步骤文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/17575.html

点击“菜单1”、“菜单2”后:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/17575.html

如何用Axure实现菜单下拉效果的操作步骤文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/17575.html

预览地址:https://rrwsy5.axshare.com文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/17575.html

所需元件

两个菜单矩形、两个菜单子项动态面板、一个向上箭头、一个向下箭头。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/17575.html

如何用Axure实现菜单下拉效果的操作步骤文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/17575.html

操作步骤

(1)按照上图给元件命好名,摆放好位置文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/17575.html

(2)设置“菜单1”矩形交互Case1鼠标单击时文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/17575.html

1)编辑条件:当“菜单1子项”的可见性为true文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/17575.html

如何用Axure实现菜单下拉效果的操作步骤文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/17575.html

2)因为菜单1子项此时是显示的,所以单击后应该隐藏起来:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/17575.html

如何用Axure实现菜单下拉效果的操作步骤文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/17575.html

3)将向上的箭头设置成向下的箭头:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/17575.html

如何用Axure实现菜单下拉效果的操作步骤文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/17575.html

这里我使用的是FontAwesome字体,所以显示出来就是个看不出形状的框框,这一步不一定要按照我这样做,可以放两个图标去更换就好,不过还是建议大家多去使用FontAwesome字体,原因在我另一篇文章《Axure教程:使用动态面板实现收藏→已收藏》的小记里有解释。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/17575.html

(3)设置“菜单1”矩形交互Case2鼠标单击时文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/17575.html

1)编辑条件:当“菜单1子项”的可见性为false,设置步骤与上面一样,就把true改为false即可;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/17575.html

2)因为菜单1子项此时是隐藏的,所以单击后应该显示出来:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/17575.html

如何用Axure实现菜单下拉效果的操作步骤文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/17575.html

3)将向下的箭头设置成向上的箭头文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/17575.html

(4)按照上述步骤相似地设置“菜单2”矩形文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/17575.html

(5)将“菜单2子项”动态面板隐藏起来文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/17575.html

如何用Axure实现菜单下拉效果的操作步骤文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/17575.html

(6)按F5预览原型看看效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/17575.html

小记

  1. 后面我还会再制作其他类型的菜单,这是其中一个非常简单的案例。
  2. 这个案例里,两个菜单项可以同时展开,可以想想怎么做到有且只有一个菜单项展开。
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/17575.html
  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/yuanxing/17575.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定