使用Axure实现切换一级菜单效果

axure版本：8.0

实现效果：

原型查看：

https://u7k6gc.axshare.com/#c=2

实现思路：

       通过动态面板实现菜单选中与未选中的不同效果，在页面加载时，将指定菜单的动态面板状态设置为选中状态。由于菜单一般会涉及多个页面，可以通过母版来减少重复工作。

       本示例只讲解了横放的菜单实现，竖放的菜单与此实现一致，各位童鞋们可以举一反三。

制作步骤：

1、制作一个未选中的菜单。添加一个文本框，填写好菜单的名称，设置好样式。

2、将其转换为动态面板。并用State1复制一个状态。

3、双击编辑State2，修改该文本的颜色，并添加一个选中的标记条。（各位可根据UI实现效果，添加其中的图标或者图片）

4、复制该动态面板，并修改相关文字，制作其他几个菜单，分别为每个动态面板取上对应的名字。

5、选中刚才制作的所有菜单的动态面板，点击右键，“转换为母版”，将此母版命名为“顶部菜单”。

6、分别为每个菜单制作相应的页面，并在页面顶部同样的位置插入该母版。

7、分别设置每个页面的页面载入时事件，动作添加为“设置面板状态”。

公司介绍页面，将动态面板“公司介绍”的状态设置为State2，其他动态面板的状态设置为state1;

产品方案页面，将动态面板“产品方案”的状态设置为State2，其他动态面板的状态设置为state1;

联系我们页面，将动态面板“联系我们”的状态设置为State2，其他动态面板的状态设置为state1;

8、添加菜单点击事件。

双击刚才创建的母版，进入母版编辑界面。

分别选中创建的菜单动态面板，添加“鼠标单击时”事件

公司介绍菜单，鼠标单击时在当前窗口打开公司介绍页面;

产品方案菜单，鼠标单击时在当前窗口打开产品方案页面;

联系我们菜单，鼠标单击时在当前窗口打开联系我们页面;

至此，一级菜单的效果已经实现。