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

 我来答
机器1718
2022-07-06 · TA获得超过6838个赞
知道小有建树答主
回答量:2805
采纳率:99%
帮助的人:161万
展开全部

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、添加菜单点击事件。

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


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


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

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

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


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

已赞过 已踩过<
你对这个回答的评价是?
评论 收起
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式