Axure教程(中級):分類導航菜單高亮條的實現

1 評論 6156 瀏覽 28 收藏 4 分鐘

本文介紹了分類導航菜單高亮條效果如何實現,供大家參考學習,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協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 看完一篇原型設計文章啦,感覺還是不太會?

    想從0基礎開始學習Axure么?推薦你找Axure實戰班的助教小可愛@CC-起點學院(微信:qidiancc520),回復關鍵詞:大禮包

    ?? 領取原型設計大禮包,多學多練,你也能成為原型設計高手哦!

    來自廣東 回復