显示隐藏二级菜单时一级菜单的颜色切换

AxureRP7.0教程 小楼一夜听春语 18904℃ 0评论

有个问题,其实看见过很多次了。今天有空,把这个解决方案写出来,给大家参考。

这个问题就是,鼠标移入一级菜单时,弹出二级菜单,鼠标离开一级菜单与二级菜单时,二级菜单消失。
看到这里,可能有的同学会想到,一级菜单【鼠标移入时】,【显示】二级菜单,【更多选项】里选择【弹出效果】就能实现了。
没错,不过问题不在这里。

在鼠标移入一级菜单时,菜单要呈现选中状态(变色),鼠标离开一级菜单与二级菜单时,一级菜单要恢复初始状态。

效果截图:

yx

相信很多同学,在思考了。
我先说说,我通常看到的一种思路,实现过程是下面这样的。
首先,是交互样式设置,在属性的交互样式设置中,设置【选中】的样式。
然后,是一级菜单的交互。

事件:【鼠标移入时】
动作A:【显示】二级菜单,【更多选项】选择【弹出效果】;
动作B:【选中】一级菜单;
事件:【鼠标移出时】
动作:【取消选中】一级菜单

最后,是二级菜单的交互。

事件:【鼠标移入时】
动作:【选中】一级菜单
事件:【鼠标移出时】
动作:【取消选中】一级菜单

这种做法,看上去没有什么问题,但是实际操作时,会发现有Bug(大家可以尝试鼠标指针从二级菜单的左侧缓慢移出时,一级菜单的选中效果并未消失)。这是因为这种做法和弹出效果产生了冲突。那么,如何解决呢?

我们只需要,把思路做一些更改,不但没有问题,实现过程也更加简单清晰。

这个思路,很简单。一句话,一级菜单的选中状态其实是和二级菜单的显示与隐藏同步的。那么,交互就改成下面这个样子。

首先,同样是交互样式的设置,在属性的交互样式设置中,设置【选中】的样式。

然后,一级菜单的交互。
事件:【鼠标移入时】
动作:【显示】二级菜单,【更多选项】选择【弹出效果】;

最后,是二级菜单的交互。
事件:【显示时】
动作:【选中】一级菜单
事件:【隐藏时】
动作:【取消选中】一级菜单

通过上面的修改,不但减少了步骤,而且也能够正确实现需要的效果了。
这个原型的实现,其实我挺有感触。很多同学,其实能够一眼就看懂正确的步骤,但是自己做的时候,就是总找不到这个突破口。
其实,在Axure的学习过程中,很多同学都有这样的问题,就是学会了一个案例,就只是会这一个案例。
所以,我在我的《AxureRP7.0从入门到精通》这本书中,就一再强调,做原型要做好两点,扎实的基础知识和灵活的思路。但是灵活的思路从何而来?就是对基础知识的深刻理解。

很多人,写教程只是步骤的演示,点这里,戳那里,填个什么。
所以,你学了之后,也只会点这里,戳那里,填个什么。
但却不知道,为什么要点这里,戳那里,为什么填这个。

如果你不能阅尽天下好片,做到心中无码,那就不如踏踏实实的,对一部经典神作深刻理解。

奉上源文件:http://pan.baidu.com/s/1pK2ezUj


~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~

小楼老师再出新作,倾力打造Axure RP 8精品课程系列,以最短的时间高效完成学习目标,入门进阶与实战案例并重,是0基础的新手从入门到精通的必备课程。

《AxureRP 8 入门与实战 - 入门篇》------从零入门进阶的最佳课程------【点此查看详情】

《AxureRP 8 入门与实战 - 案例篇》------实战手册图书的同步视频------【点此查看详情】


转载请注明:Axure原创教程网 » 显示隐藏二级菜单时一级菜单的颜色切换

喜欢 (36)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(10)个小伙伴在吐槽
  1. 感谢楼神,思路一下开拓了!
    何夕2016-03-05 09:43 回复
  2. 小楼老师好淫荡,充分暴露了骚年的本质
    re2016-03-29 15:10 回复
  3. 小楼老师 一级菜单样式直接用“鼠标悬停”就行了 都不需要切换选中 只要做个移入以后显示二级菜单就支持了!
    ryan2016-04-15 15:05 回复
    • 确实是,鼠标悬停最简单
      举个栗子2016-07-12 12:43 回复
  4. 怎么弹出二级菜单的时候没有换颜色呢~
    Aussieve2016-05-13 09:55 回复
  5. 棒棒哒
    1377209942@qq.com2016-05-23 20:56 回复
  6. 小楼老师,有一点没有怎么弄明白,当鼠标移开二级菜单时,为什么二级菜单会自动消失了?哪个命令是对应这个动作的啊?
    billy2016-05-24 09:44 回复
    • 小楼一夜听春语
      弹出效果
      小楼一夜听春语2016-05-24 20:07 回复
  7. 小楼老师,当一级菜单有多个时,怎么把后面的二级菜单都向下移动啊?尤其是一二级菜单数量不固定的时候,每个都要用y移动的方式写吗
    lee2016-06-27 14:33 回复
  8. 有视频教程吗,怎么找不到,求教在哪?
    我叫什么2016-07-08 16:37 回复