上一篇文章介绍了下拉导航的设置方法,详见
使用Axure RP 8制作两种导航菜单-下拉导航
本文介绍第二种导航方式悬浮菜单,如图
同样我们先分析一下该种方式中包含的交互:
- 鼠标移入一级菜单图标,出现二级菜单悬浮框;
- 鼠标移入二级菜单图标(非点击),文字颜色变化
- 点击二级菜单,显示选中效果;
- 未选中二级菜单时,鼠标移出一级或者二级菜单,悬浮框隐藏;
下面是详细的制作步骤
1、一级菜单交互
一级菜单只需要设置一种交互效果即可,即鼠标移入时/显示二级菜单
2、二级菜单动态面板
二级菜单主要涉及到菜单选中状态的切换,以及菜单隐藏效果
2.1 隐藏效果
当鼠标移出二级菜单框时,需设置二级菜单隐藏,此处不赘述
2.2 状态
首先,二级菜单有两种状态,一个都不选中,和选中菜单这两种;而选中菜单时,因为二级菜单的数量