本文介紹了分類導(dǎo)航菜單高亮條效果如何實(shí)現(xiàn)，供大家參考學(xué)習(xí)，enjoy~

下面這種分類導(dǎo)航菜單效果，大家都見(jiàn)過(guò)，接下來(lái)將講解此實(shí)現(xiàn)效果。主要是運(yùn)用【絕對(duì)位置】移動(dòng)效果和函數(shù)[[this.x]]、[[Target.y]]來(lái)實(shí)現(xiàn)。

一、頁(yè)面布局

1. 從左側(cè)拉入一個(gè)文本標(biāo)簽，文本為【個(gè)性推薦】，寬高為94 *40，行高為40；同理，再?gòu)?fù)制此文本標(biāo)簽3個(gè)，對(duì)齊排列，分別為【歌單】、【主播電臺(tái)】、【排行榜】；

2. 選擇四個(gè)文本標(biāo)簽，在右側(cè)【屬性】欄中設(shè)置【選中】和【懸浮】的交互樣式以及設(shè)置選項(xiàng)組名稱。如下圖：

3. 將第一個(gè)文本標(biāo)簽【個(gè)性推薦】，設(shè)置為【選中】；如下圖：

4. 從左側(cè)拉入一個(gè)矩形，命名為【高亮條】，寬高為94*2；并位于分類導(dǎo)航菜單的第一個(gè)文本標(biāo)簽下方并左對(duì)齊。

二、添加交互

選中第一個(gè)文本標(biāo)簽，添加【鼠標(biāo)單擊時(shí)】的交互事件；

1. 設(shè)置選中效果：

元件》設(shè)置選中》勾選當(dāng)前元件》值設(shè)置為ture；

2. 設(shè)置高亮條移動(dòng)效果：

元件》移動(dòng)》勾選高亮條》移動(dòng)為【絕對(duì)位置】，X軸為：[[this.x]]，即點(diǎn)擊的文本標(biāo)簽元件的x軸坐標(biāo)）；Y軸為：[[Target.y]]，及高亮條自身的y軸坐標(biāo)，保存不變。如下圖：

將【鼠標(biāo)單擊時(shí)】的交互事件復(fù)制粘貼到其他三個(gè)標(biāo)簽。

三、預(yù)覽效果

學(xué)習(xí)更多教程，可關(guān)注本人公眾號(hào)：艾斯的Axure峽谷。歡迎大家留言評(píng)論，也可以留下你期待看到的交互效果。

示例下載：

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

提取碼: 6fch

示例演示：

作者：火星人～艾斯，公眾號(hào)：艾斯的Axure峽谷

本文由 @火星人～艾斯 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議