編輯導語：在日常工作中，經(jīng)常會用到中繼器進行頂部導航的設(shè)計操作，那我們可以如何使用Axure來進行相關(guān)操作呢？本篇文章里，作者利用中繼器為我們展示了頂部導航操作，讓我們一起來看一下。

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

所需原件：

1. 中繼器
2. 文本標簽

通過上一次的左側(cè)導航教程，相信大家已經(jīng)知道通過中繼器怎么制作左側(cè)導航了，今天我們來試試另外的方式，來實現(xiàn)頂部導航吧~

一、導航制作

如上圖所示，拖入 6 個文本標簽，其中一個作為一級導航默認顯示狀態(tài)，其余 5 個作為二級導航，且設(shè)置成組并默認隱藏狀態(tài)。

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

二、交互設(shè)置

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

三、細節(jié)優(yōu)化（同左側(cè)導航）

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

此外，我們需要為二級菜單設(shè)置一個選中狀態(tài)，并在點擊時將該二級菜單設(shè)置為選中。

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

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

題圖來自Unsplash, 基于CC0協(xié)議。