axure商城

【Axure 教程】中繼器中級教程-頂部導航

通過上一次的左側導航教程,相信大家已經知道通過中繼器怎么制作左側導航了,今天我們來試試另外的方式,來實現頂部導航吧~

原型展示:https://hb04g4.axshare.com

所需原件:

  1. 中繼器
  2. 文本標簽

通過上一次的左側導航教程,相信大家已經知道通過中繼器怎么制作左側導航了,今天我們來試試另外的方式,來實現頂部導航吧~

一、導航制作

如上圖所示,拖入 6 個文本標簽,其中一個作為一級導航默認顯示狀態,其余 5 個作為二級導航,且設置成組并默認隱藏狀態;

同時,在中繼器的數據表中進行賦值設置,在這里,我以“N 1”作為一級菜單,“N1_1”作為二級菜單的第一個選項,以此類推來設置其余的 5 個二級菜單;

二、交互設置

如上圖所示,我們設置【鼠標移入】一級菜單時,顯示二級菜單(不同于左側導航),同時在更多選項中設置【彈出效果】,預覽即可看到鼠標移入一級菜單時,會彈出二級菜單,鼠標移出后會自動收起二級菜單;

三、細節優化(同左側導航)

在完成步驟二的交互設置后,我們會發現如果二級菜單為空值,菜單也會展示,這樣就無法達到我們預期的理想狀態,所以需要為二級菜單增加【載入時】如果二級菜單為空值,那么隱藏該菜單,且拉起下方組件,如上圖的設置所示;

此外,我們需要為二級菜單設置一個選中狀態,并在點擊時將該二級菜單設置為選中;

設置完成后,我們選中所有二級菜單并將它們設置為【二級菜單】的選項組,這樣就可以讓我們在做二級菜單的選中時,達到“單選”的效果;


更多內容,微信搜索“愛學兒”,一起交流探討吧!

給TA買糖
共{{data.count}}人
人已贊賞
基礎教程

Axure教程:【實例】文本自動獲取日期、時間

2021-5-31 18:28:00

基礎教程

【Axure 教程】中繼器中級教程-下拉搜索

2021-6-2 10:23:52

axure商城
0 條回復 A文章作者 M管理員
    暫無討論,說說你的看法吧
?
個人中心
購物車
優惠劵
今日簽到
有新私信 私信列表
搜索
俄罗斯videoxxxoo