Axure教程（中级）：分类导航菜单高亮条的实现

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

一、页面布局

从左侧拉入一个文本标签，文本为【个性推荐】，宽高为94 *40，行高为40；同理，再复制此文本标签3个，对齐排列，分别为【歌单】、【主播电台】、【排行榜】；
选择四个文本标签，在右侧【属性】栏中设置【选中】和【悬浮】的交互样式以及设置选项组名称。如下图：

将第一个文本标签【个性推荐】，设置为【选中】；如下图：
从左侧拉入一个矩形，命名为【高亮条】，宽高为94*2；并位于分类导航菜单的第一个文本标签下方并左对齐。

二、添加交互

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

设置选中效果：

元件》设置选中》勾选当前元件》值设置为ture；

设置高亮条移动效果：

元件》移动》勾选高亮条》移动为【绝对位置】，X轴为：[[this.x]]，即点击的文本标签元件的x轴坐标）；Y轴为：[[Target.y]]，及高亮条自身的y轴坐标，保存不变。如下图：

将【鼠标单击时】的交互事件复制粘贴到其他三个标签。

三、预览效果

学习更多教程，可关注本人公众号：艾斯的Axure峡谷。欢迎大家留言评论，也可以留下你期待看到的交互效果。

示例下载：百度云盘

提取码: 6fch

示例演示：

Axure教程（中级）：分类导航菜单高亮条的实现相关推荐

jQuery 分类导航菜单条点击变色
JQuery 分类导航菜单条点击变色,当点击导航菜单则当前点击选中导航菜单变色其它还原,依次类推. <script type="text/javascript" src=&q ...
php左测导航栏,商城左侧大分类导航菜单教程完整代码
提示:本页面右侧代码编辑器中的代码纯属展示调试代码本代码最终的效果请用下面的的完整代码,复制到本地运行完整代码html> 商城左侧大分类导航菜单 *{ margin:0; padding:0 ...
亚巴逊首页分类导航菜单触发区域控制原理窥视
对于大型电子商务网站,不论是平台型电商还是垂直型电商,由于商品品类丰富,入口繁多,为方便用户快速定位及查询,在首页一般会挂出一个分类导航的菜单.例如国内的天猫,京东,当当,凡客,苏宁易购...国外的A ...
jquery实现电商网站分类导航菜单
一.HTML部分 <!DOCTYPE html> <html lang="zh"> <head> <meta charset=" ...
html仿写京东左侧,jQuery模仿京东/天猫商品左侧分类导航菜单效果
现在天猫或者京东商品分类模块的默认的效果是这样的: 当鼠标滑过任意一栏导航分类时,就会出现相关详细分类模块,例如: 当鼠标移出蓝色框以外的区域,就会恢复默认的效果显示!然而使用jQuery的鼠标滑过事 ...
html 导航栏选中状态,CSS导航菜单高亮选中菜单项
我开发了一个CSS导航菜单,并为每个导航项我写了php.file.CSS导航菜单高亮选中菜单项 homepage.php My First Try Of CSS Navigation Bar /* B ...
【Axure教程】分类筛选卡片（订单卡片案例）
卡片是系统常用的展示方式,采用卡片式布局能更直观的用户界面.所以作者今天就和大家分享如何在Axure中制作出分类筛选卡片的原型模板,我们已订单卡片为案例,包括以下交互效果: 1.筛选:可以根据卡片不同 ...
element-ui页面$router.push(“xxx“)跳转后，导航菜单高亮和 el-menu 传值
<el-menu :default-active="activeIndex" mode="horizontal" @select="handle ...
Creator星球教程文章分类导航
公众号最近有不少新伙伴加入,对公众号的教程文件.案例资源.视频内容等不太熟悉.通过后台和个人微信与大家交流,获得了非常重要的反馈,Shawn将从2017年9月公众号开张时的文章.教程.视频做了一个归类 ...

Axure教程（中级）：分类导航菜单高亮条的实现

一、页面布局

二、添加交互

三、预览效果

Axure教程（中级）：分类导航菜单高亮条的实现相关推荐

最新文章

热门文章