編輯導(dǎo)語：無論在什么頁面，導(dǎo)航欄都起著一個提示的作用，能夠讓用戶第一時間找到自己所需要的欄目。本文以Axure為例，從三點(diǎn)講解如何制作與使用導(dǎo)航欄的展開與伸縮，希望對你有幫助，一起來看看。

本文主要給大家講解一下如何在Axure中制作導(dǎo)航欄的展開與收縮。

本文主要從三點(diǎn)帶大家分析如何使用與制作：

1. 使用場景
2. 思路分析
3. Axure制作

演示效果：https://slegsq.axshare.com

一、使用場景

我們在做一些B端產(chǎn)品項(xiàng)目時，大多的后臺管理系統(tǒng)頁面多為左側(cè)或頂部放置導(dǎo)航欄，如果導(dǎo)航欄在一側(cè)同時展示會顯得比較繁瑣，所以，使用導(dǎo)航欄的展開與收縮即可合理的將相關(guān)的分類放置同一級導(dǎo)航下，這樣既節(jié)省了時間又可快速尋找到相應(yīng)的頁面。

二、思路分析

我們需要先思考Axure如何展示導(dǎo)航欄展開與收縮呢？需要滿足什么條件呢？是否需要顯示隱藏呢？如何劃分多級元件進(jìn)行分開展示呢？

看到這相比大家會想到一個元件：動態(tài)面板。

在Axure中動態(tài)面板的使用性是非常高的，接下來我將為大家詳細(xì)介紹如何利用動態(tài)面板做出我們想要的導(dǎo)航欄~

三、Axure制作

首先咱們先創(chuàng)建一個矩形，參數(shù)設(shè)置為 長度：256，高度：54，填充顏色：#001529，并去掉該線寬設(shè)置為：0，左側(cè)邊距：40，點(diǎn)擊右鍵設(shè)置選項(xiàng)組并命名：導(dǎo)航欄（參數(shù)可根據(jù)自身需要設(shè)置）。

點(diǎn)擊右鍵設(shè)置交互樣式，選擇【選中】設(shè)置了填充和字色的樣式，設(shè)置后保存，點(diǎn)擊右鍵選擇【轉(zhuǎn)換為動態(tài)面板】（樣式可根據(jù)自身需要設(shè)置）。

雙擊動態(tài)面板復(fù)制內(nèi)部面板分別命名為：導(dǎo)航欄一 合并、導(dǎo)航欄一 展開。選擇【導(dǎo)航欄一 展開】，再復(fù)制三個矩形框內(nèi)部文字描述為（二級導(dǎo)航欄）（樣式可根據(jù)自身需要設(shè)置）。

以上基礎(chǔ)步驟設(shè)置完畢后，接下來我們進(jìn)行交互設(shè)置。

選擇動態(tài)面板內(nèi)【導(dǎo)航欄一 合并】點(diǎn)擊矩形框，交互內(nèi)容為：單擊時-設(shè)置面板狀態(tài)-目標(biāo):已有的動態(tài)面板、STATE：導(dǎo)航欄一 展開、推動和拉動元件。

選擇動態(tài)面板內(nèi)【導(dǎo)航欄一 展開】點(diǎn)擊第一個矩形框，交互內(nèi)容為：單擊時-設(shè)置面板狀態(tài)-目標(biāo):已有的動態(tài)面板、STATE：導(dǎo)航欄一 合并、推動和拉動元件。

選擇動態(tài)面板內(nèi)【導(dǎo)航欄一 展開】點(diǎn)擊第二個矩形框，交互內(nèi)容為：單擊時-設(shè)置選中-當(dāng)前元件。并分別對下方兩個元件設(shè)置同樣交互。

最后一步：選擇已創(chuàng)建的第一個動態(tài)面板進(jìn)行復(fù)制兩次依次放置下方，查看預(yù)覽演示就完成啦~

希望內(nèi)容可以幫助到您，會不斷更新內(nèi)容，大家一起學(xué)習(xí)~

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

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