教你如何用动态面板制作下拉菜单(Axure RP8 教程)

如何用动态面板制作下拉菜单(Axure RP8 教程)

本文主要目的是教会小白使用动态面板实现菜单的下拉与收回操作,用动态面板的多状态切换来实现菜单的下拉与收起。

Axure RP8 教程 – 如何用动态面板制作下拉菜单

动态面板是Axure RP 8中的一款高级组件,在隐藏与显示、滑动效果 、拖动效果、多状态效果切换等操作的场景中,动态面板是你的不二选择。

完成后效果如下图,该例子主要依靠动态面板的状态切换来实现菜单状态的下拉与收起,在后台管理系统中普遍运用到

菜单的下拉与收起效果:

Axure RP8 教程 – 如何用动态面板制作下拉菜单

希望大家边学边做,以下是用Axure RP8 实现菜单实例。

1.实例

1.从部件库拉四个动态面板到操作区组合在一起

Axure RP8 教程 – 如何用动态面板制作下拉菜单

2. 双击选中动态面板,命名面板名称并且添加两个状态,分别命名为“状态1”与“状态2”.

Axure RP8 教程 – 如何用动态面板制作下拉菜单

3. 双击“状态1”,添加矩形并且命名为目录一

Axure RP8 教程 – 如何用动态面板制作下拉菜单

4. 双击“状态2”编辑其状态

Axure RP8 教程 – 如何用动态面板制作下拉菜单

5. 复制状态1的矩形并且添加三个矩形作为子目录,并且分别命名为“子目录1,2 , 3”。

Axure RP8 教程 – 如何用动态面板制作下拉菜单

6. 回到Home页,目录已经被编辑好。

Axure RP8 教程 – 如何用动态面板制作下拉菜单

7. 按照编辑动态面板1的步骤把下面三个面板依次命名,接下来为目录一添加用例。

Axure RP8 教程 – 如何用动态面板制作下拉菜单

8. 按照图中操作依次实现的效果为:单击目录一时会由状态1变展开成状态2。

Axure RP8 教程 – 如何用动态面板制作下拉菜单

9. 回到Home,则目录一的用例1已近建立完毕,选择更多事件,选择更多事件。

Axure RP8 教程 – 如何用动态面板制作下拉菜单

10. 选择鼠标移出时,为实现收起效果。

Axure RP8 教程 – 如何用动态面板制作下拉菜单

11. 按照图中操作依次实现的效果为:鼠标移开目录一时,会由状态2变展开成状态1。

Axure RP8 教程 – 如何用动态面板制作下拉菜单

12. 目录一的下拉与收起用例都已近创建完毕。

Axure RP8 教程 – 如何用动态面板制作下拉菜单

13. 按照目录一的方法创建目录二的下拉和收起用例

Axure RP8 教程 – 如何用动态面板制作下拉菜单

14. 点击右上角预览,单机目录一,子目录展现,移开鼠标子目录收回。

Axure RP8 教程 – 如何用动态面板制作下拉菜单

Axure RP8 教程 – 如何用动态面板制作下拉菜单

本文来自投稿,不代表重蔚自留地立场,如若转载,请注明出处https://www.cwhello.com/182723.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

(0)
创业小编创业小编管理团队
上一篇 2022年12月23日
下一篇 2022年12月23日

相关推荐

联系我们

QQ:951076433

在线咨询:点击这里给我发消息邮件:951076433@qq.com工作时间:周一至周五,9:30-18:30,节假日休息