使用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、添加菜单点击事件。
双击刚才创建的母版,进入母版编辑界面。
分别选中创建的菜单动态面板,添加“鼠标单击时”事件
公司介绍菜单,鼠标单击时在当前窗口打开公司介绍页面;
产品方案菜单,鼠标单击时在当前窗口打开产品方案页面;
联系我们菜单,鼠标单击时在当前窗口打开联系我们页面;
至此,一级菜单的效果已经实现。