Axure教程(中级):分类导航菜单高亮条的实现

本文档详细介绍了如何使用Axure制作分类导航菜单,并通过【绝对位置】移动效果和函数[[this.x]]、[[Target.y]]实现选中项的高亮条动态移动。步骤包括页面布局、添加交互和预览效果。教程最后提供了示例资源的下载链接。
摘要由CSDN通过智能技术生成

下面这种分类导航菜单效果,大家都见过,接下来将讲解此实现效果。主要是运用【绝对位置】移动效果和函数[[this.x]]、[[Target.y]]来实现。

在这里插入图片描述

一、页面布局

  1. 从左侧拉入一个文本标签,文本为【个性推荐】,宽高为94 *40,行高为40;同理,再复制此文本标签3个,对齐排列,分别为【歌单】、【主播电台】、【排行榜】;

  2. 选择四个文本标签,在右侧【属性】栏中设置【选中】和【悬浮】的交互样式以及设置选项组名称。如下图:

在这里插入图片描述

  1. 将第一个文本标签【个性推荐】,设置为【选中】;如下图:
    在这里插入图片描述
  2. 从左侧拉入一个矩形,命名为【高亮条】,宽高为94*2;并位于分类导航菜单的第一个文本标签下方并左对齐。

二、添加交互

选中第一个文本标签,添加【鼠标单击时】的交互事件;

  1. 设置选中效果:

元件》设置选中》勾

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值