使用Axure RP 8制作两种导航菜单-悬浮菜单

上一篇文章介绍了下拉导航的设置方法，详见
使用Axure RP 8制作两种导航菜单-下拉导航
本文介绍第二种导航方式悬浮菜单，如图

同样我们先分析一下该种方式中包含的交互：

1. 鼠标移入一级菜单图标，出现二级菜单悬浮框；
2. 鼠标移入二级菜单图标（非点击），文字颜色变化
3. 点击二级菜单，显示选中效果；
4. 未选中二级菜单时，鼠标移出一级或者二级菜单，悬浮框隐藏；
   下面是详细的制作步骤

1、一级菜单交互

一级菜单只需要设置一种交互效果即可，即鼠标移入时/显示二级菜单

2、二级菜单动态面板

二级菜单主要涉及到菜单选中状态的切换，以及菜单隐藏效果

2.1 隐藏效果

当鼠标移出二级菜单框时，需设置二级菜单隐藏，此处不赘述

2.2 状态

首先，二级菜单有两种状态，一个都不选中，和选中菜单这两种；而选中菜单时，因为二级菜单的数量是大于1个的，还需要在各个菜单中进行切换，所以选中菜单里面还需要添加一个动态面板
1、未选中
未选中状态下，我们仅展示二级菜单文字即可


2、选中
选中状态下的动态面板中，有几个二级菜单，就有几种切换，也就有几种状态，如图，并且需要绘制你需要的选中状态

2.3 交互

1、鼠标悬停的交互效果
二级菜单未选中状态时，鼠标悬停时展示文字选中的效果，比如文字颜色变化等其他效果，所以我们在对应文本框-属性-交互样式设置里面设置想要的效果，这里我设置字体颜色，如图：
每一个二级菜单的文本都需要设置

2、鼠标点击的交互效果
当鼠标点击时，需选中二级菜单，所以我们需要设置：
鼠标单击时/切换面板状态/对应的二级菜单选中的状态

至此制作完成