当前位置:   article > 正文

Axure实现鼠标滑过显示隐藏菜单栏_rp9做一个移入移出显示隐藏一个选择列表

rp9做一个移入移出显示隐藏一个选择列表

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

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

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

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

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

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

 

 

 

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

 

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

 

 

 

 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/AllinToyou/article/detail/110253
推荐阅读
相关标签
  

闽ICP备14008679号