快好知 kuaihz

Axure教程:鼠标移入时切换菜单

上一篇文章《Axure教程:实现菜单下拉效果》里使用了最简单的方式实现了菜单下拉效果,这个案例实现的是当鼠标移入菜单项的时候切换菜单且有且只有一个菜单项是展开的。

预览图

鼠标移入“菜单2”后:

预览地址:https://64y9da.axshare.com

所需元件

两个菜单矩形、两个菜单子项动态面板、一个向上箭头、一个向下箭头。

操作步骤

(1)设置“菜单1”矩形的第一个交互:鼠标移入时,让菜单变为选中状态

(2)设置“菜单1”矩形的第二个交互:选中改变时,分两种情况去隐藏和显示动态面板

1)Case1:当“菜单1”非选中时,隐藏“菜单1子项”动态面板:

2)Case2:当“菜单1”选中时,显示“菜单1子项”动态面板:

(3)同样地设置好矩形2的交互

(4)将“菜单1”矩形和“菜单2”矩形设置成同一选项组

(5)按F5预览原型看看

小记

1. 这里可以“菜单1”矩形和“菜单2”矩形只用一个交互动作即实现鼠标移入切换菜单且有且只有一个菜单项是展开的效果。

2. 为什么不这样做?

因为这个案例里就只有两个菜单,如果有10个,那你就得在显示一个菜单子项时将其他9个菜单子项隐藏起来,那就会非常麻烦而Axure提供的选项组功能在这里就可以派上用场。

选项组的功能就是让在一个选项组里的所有元件有且只有一个是选中状态,利用这个功能就我们虽然多了一个交互但却节省了很多的工作。

3. 当你快速在两个菜单项里来回切换的时候会出现这种情况,可以去试试非常有趣哈哈:

4. 至于为什么会出现这种情况是因为在设置“菜单矩形交互的显示隐藏效果时没有将动画效果取消掉,当你快速切换时,页面反应不过来就把矩形一直往下推了

附上无bug原型地址:https://gx8op7.axshare.com

#相关阅读#

Axure教程:实现菜单下拉效果

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:移入  移入词条  切换  切换词条  菜单  菜单词条  鼠标  鼠标词条  教程  教程词条  
原型

 Axure教程:三维阵列图片的自...

如何利用元件的尺寸变化、移动变化等实现三维列阵图片的自动切换展示?笔者在此给出了详细教程,与大家分享~~今天分享实现五张三维阵列图片切换的方法,主要是利用元件的...(展开)

原型

 用 Axure 设计60S倒计时

很多互联网平台,采用手机号注册时,都要获取验证码,如何在原型中做到点击获取验证码按钮,上面会和真实注册一样,出现倒计时?倒计时60S结束后,文案又恢复为获取验证...(展开)

原型

 Axure 教程:不可见滚动条的...

在设计产品原型的过程中,经常会遇到这样的一种场景——所要展示的内容,超出了当前可视页面范围。遇到这种情况,通常使用Axure动态面板的滚动条设置来解决。产品原型...(展开)