网页下拉菜单

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
开发工具与关键技术：Axure与交互命令
作者：神威未得偏爱
撰写时间：2021年8月18日
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

 我们在网页中常常能看到（图上)类似的选项栏，鼠标移入时还能加载出指定目标的下方内容（下图），废话不多说，今天我们就来完成这一门操作。

 一、外框大小

1.可以依照（下图）来新建一个矩形W：1200  H：40，颜色可根据情况。

二、交互对象

1.接下来就是做出里面相应的数据，如果出现（下图）的这种对不准的现象，我们可以先选中全部，确定你的首尾的位置，然后点击，工具栏里的分布，点击水平分布,就可以很好的分布开来。（内容可自行更改，可无需照图上的内容写）

 

2.然后我们的画面中还有内容中每个对应的小三角，依照刚才那样，先确定首尾的位置，然后先居个中，在选中全部三角，点击工具栏的的分布—点击水平分布。

 3.然后就是导入图片的环节，导入自己喜欢的图片，然后对齐左边，然后选中你导入的所有图片，点击属性栏最右边的隐藏选项并勾选。（我们做什么都好，先给对应的图片命名，这样会更好找）

 三、交互效果
1.在元件库里拖出一个热区，放在某个内容上。

 三、交互效果

1.在元件库里拖出一个热区，放在某个内容上。

2.点击鼠标移入时，然后编辑用例。 

3.首先我们要实现，图片显示，和三角倒立起来。点击显示选择对应内容的图片，然后，动画设置为：向下滑动。然后再点击旋转，选择对应的三角图形，旋转选择：绝对位置，角度为：180fx，可以来个过渡动画，选择：摇摆。然后点击确定。

 4.我们出现效果有了，接下来就是退出动画效果，同样方式。点击鼠标移出时，选择隐藏，找到对应的图片，动画选向上滑动，然后再选择旋转，找到对应的三角，旋转设为：绝对位置，角度写上：360fx，动画来个过渡，选择摇摆。点击确定

 然后剩下的也这么操作，如果我们想好看一些，我们还可以添加一些小细节在里面，比如在首页的后面添加一块颜色较深的矩形，还可以，在每个内容后面添加一个选择动画，选中他他那一块颜色会加深，当然交互还是显示/隐藏。

 

 好了，今天我们这个小案例就算这样完成了。