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

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

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

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

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

一、使用場景

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

二、思路分析

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

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

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

三、Axure制作

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

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

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

以上基礎步驟設置完畢后，接下來我們進行交互設置。

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

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

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

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

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

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

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