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

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

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

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

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

一、使用場景

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

二、思路分析

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

看到這相比大家會想到一個元件：動態面板。

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

三、Axure制作

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

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

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

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

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

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

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

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

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

本文由 @畫圖仔 原創發布于人人都是產品經理，未經作者許可，禁止轉載。

題圖來自Unsplash，基于CC0協議。