本文介紹了分類導航菜單高亮條效果如何實現，供大家參考學習，enjoy~

下面這種分類導航菜單效果，大家都見過，接下來將講解此實現效果。主要是運用【絕對位置】移動效果和函數[[this.x]]、[[Target.y]]來實現。

一、頁面布局

1. 從左側拉入一個文本標簽，文本為【個性推薦】，寬高為94 *40，行高為40；同理，再復制此文本標簽3個，對齊排列，分別為【歌單】、【主播電臺】、【排行榜】；

2. 選擇四個文本標簽，在右側【屬性】欄中設置【選中】和【懸浮】的交互樣式以及設置選項組名稱。如下圖：

3. 將第一個文本標簽【個性推薦】，設置為【選中】；如下圖：

4. 從左側拉入一個矩形，命名為【高亮條】，寬高為94*2；并位于分類導航菜單的第一個文本標簽下方并左對齊。

二、添加交互

選中第一個文本標簽，添加【鼠標單擊時】的交互事件；

1. 設置選中效果：

元件》設置選中》勾選當前元件》值設置為ture；

2. 設置高亮條移動效果：

元件》移動》勾選高亮條》移動為【絕對位置】，X軸為：[[this.x]]，即點擊的文本標簽元件的x軸坐標）；Y軸為：[[Target.y]]，及高亮條自身的y軸坐標，保存不變。如下圖：

將【鼠標單擊時】的交互事件復制粘貼到其他三個標簽。

三、預覽效果

學習更多教程，可關注本人公眾號：艾斯的Axure峽谷。歡迎大家留言評論，也可以留下你期待看到的交互效果。

示例下載：

鏈接: https://pan.baidu.com/s/1mMFXiLs_WiIDl4LLADAF4g

提取碼: 6fch

示例演示：

作者：火星人～艾斯，公眾號：艾斯的Axure峽谷

本文由 @火星人～艾斯 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議