Axure实现鼠标滑过显示隐藏菜单栏

本文详细指导如何使用Axure RP9汉化版创建模仿高级网站的弹出菜单栏交互,通过组合矩形元素、设置鼠标移入触发效果和隐藏显示来演示过程。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

相信进来的小伙伴一定遇到了跟博主一样的问题在某些网上为了突出网站高级感一般会使用这种交互方式,那么Axure怎么实现这种交互方式呢?本次博主使用的是Axure RP9 汉化版来演示,首先看一下博主的做好的吧!

那么这就是博主做好的样子了,是不是你想要的呢?如果你也想要的话,那么废话不多说我们开始吧! 

一、我们首先从元件库选取一个矩形(如图1步骤所示),矩形的大小可以按照自己的喜好,然后我们在选中当前矩形,复制多个相同大小的矩形(具体几个可以根据自己的喜好,那么博主用了5个来演示,如图所示)依次排列在下方。

二、我们选中下面的4个矩形将它们组合在一起(如图2步骤所示),然后点击组合按钮(如图3步骤所示),将他们组合到一起,并给这个组合取一个名字方便后面查找(如图4步骤所示,博主的是“显示菜单栏”)。

三、为方便后边菜单栏的变化能够看清楚 ,我们给这下面的4个矩形换个颜色,博主所用的是个红色(如图步骤5所示)。

 四、然后我们选中最上面的那个矩形,同时在右边的状态栏中选择交互依次点击“新建交互----->鼠标移入时----->显示/隐藏----->显示菜单栏(刚才我们给组合的矩形命的名字)”(如图步骤6,7,8,9所示)。

 

 

 

 五、我们选择“显示菜单栏”的交互样式,选择动画样式(如图步骤10,11所示),在选择“更多选项”在下面的动画效果中选择“弹出效果(如图步骤12,13所示)”。

 

 六、最后我们选中下面的4个矩形组(如图步骤14所示),在状态栏中将小眼睛关闭设它们为隐藏(如图15步骤所示),这样我们就完成了所有的步骤快去预览看看成果吧!

 

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值