手抄报 安全手抄报 手抄报内容 手抄报图片 英语手抄报 清明节手抄报 节约用水手抄报

【Axure】利用动态面板和热区实现天猫导航栏

时间:2024-10-14 10:48:29

1、 启动软件,新建文件,往【index】页拖入一个动态面板【class1】-->双击修改【state1】为【normal】,为【class1】新建一个状态田肖倦娄【rollover】-->在【normal】中加入矩形部件,命名【Class1NormalRectangle】

【Axure】利用动态面板和热区实现天猫导航栏

2、 在【index】中再加一个动态面板【subclass1】-->勾选右边的【隐藏】-->双击进入【subclass1】的【state1】拖入矩形,命名为【subclass1Rectangle】

【Axure】利用动态面板和热区实现天猫导航栏
【Axure】利用动态面板和热区实现天猫导航栏

3、 添加文字链:在【class1】的【normal】状态添加矩形,然后双击输入文字【男装】,设置好颜色位置等,同理添加【女装】等-->交互样式设置。同理给田肖倦娄【class1】的【rollover】状态添加相同内容。给【subclass1】的【state1】也添加内容。

【Axure】利用动态面板和热区实现天猫导航栏

4、 添加热区:在【subclass1】和【class1】四周添加一定宽度的热区,并进行如下设置。

【Axure】利用动态面板和热区实现天猫导航栏
【Axure】利用动态面板和热区实现天猫导航栏

5、 为面板添加事件。

【Axure】利用动态面板和热区实现天猫导航栏

6、 复制【class1】得到【class2】,复制【subclass1】得到【subclass2】,并设置对应的热区。

【Axure】利用动态面板和热区实现天猫导航栏

7、 按【F5】预览效果。

【Axure】利用动态面板和热区实现天猫导航栏

8、如果您觉得有用,记得在下方点击投票、点赞、关注、留言,小编会定期奉上更多的惊喜哦,您的支持才是小编继续努力的动力,么么哒。

【Axure】利用动态面板和热区实现天猫导航栏
© 手抄报圈