在原型設(shè)計中，Axure還可以用于實現(xiàn)可伸縮導(dǎo)航功能，展現(xiàn)出菜單欄或者導(dǎo)航欄都無法完全展現(xiàn)的子菜單。那么，通過什么樣的操作可以實現(xiàn)呢，本文為我們揭曉了答案。

一、場景簡述

我們在進行原型設(shè)計時，經(jīng)常會碰到一些用菜單欄或?qū)Ш綑跓o法完全展示的子菜單，這時，可伸縮的導(dǎo)航是非常不錯的選擇，簡單在網(wǎng)上截幾個圖感受一下：

二、需求分析

1. 鼠標移入菜單時，菜單觸發(fā)強調(diào)效果；
2. 鼠標移入菜單時，子菜單顯示；
3. 鼠標由菜單移入子菜單時，子菜單依舊顯示；
4. 鼠標移出子菜單時，菜單強調(diào)效果消失，子菜單隱藏。

三、功能實現(xiàn)

第一步

1. 拖入矩形+繪制小三角形，如圖，組合命名為菜單，填充淺藍色，字體白色；
2. 設(shè)置選中狀態(tài)（強調(diào)效果）為深藍色、文字加粗；
3. 設(shè)置小三角形為動態(tài)面板，state 1為箭頭向右，state 2為箭頭向左。

如圖所示：

菜單：

動態(tài)面板：

第二步，繪制子菜單

如圖，命名為子菜單，設(shè)置為隱藏（不要把隱藏設(shè)置到熱區(qū)上了）。

第三步，設(shè)置動畫

1. 對“菜單”組合設(shè)置鼠標移入時-選中-當(dāng)前原件-true

-顯示/隱藏-子菜單組合-顯示

-設(shè)置面板狀態(tài)-小三角形-state 2

2. 對“菜單”組合繼續(xù)設(shè)置鼠標移出時–選中–當(dāng)前原件–false

-顯示/隱藏-子菜單組合-隱藏

-設(shè)置面板狀態(tài)-小三角形-state 1

3. 對子菜單上覆蓋一層熱區(qū)，對熱區(qū)重復(fù)以上鼠標移入、移出時的響應(yīng)動作；

對菜單組合設(shè)置動作：

對熱區(qū)設(shè)置動作：

通過以上設(shè)置，可以基本實現(xiàn)以下：

1. 鼠標移入菜單，菜單被強調(diào)，子菜單顯示，若鼠標直接從菜單移出，子菜單消失，菜單恢復(fù)；
2. 鼠標移入菜單，菜單被強調(diào)，子菜單顯示，鼠標從菜單移入子菜單，菜單繼續(xù)被強調(diào)，子菜單繼續(xù)顯示；
3. 鼠標從子菜單移出，子菜單消失，菜單恢復(fù)。

四、問題思考

細心的朋友可能發(fā)現(xiàn)問題，鼠標若是直接從空白區(qū)域移入子菜單，子菜單同樣會顯示，菜單同樣會被強調(diào)，這個又如何解決呢？

我們作如下思考：當(dāng)且僅當(dāng)鼠標移入菜單后再移入子菜單，才能觸發(fā)鼠標移入子菜單時的對應(yīng)動作，因此我們很容易聯(lián)想到條件設(shè)置，也就是case。

因此，我們引入全局變量，作如下設(shè)計：

1. 在鼠標移入菜單時，設(shè)置全局變量OnLoadVariable==1；

2. 對熱區(qū)-鼠標移入設(shè)置-添加條件：

變量值-? if?? OnLoadVariable==1

3. 鼠標移出菜單時，恢復(fù)OnLoadVariable==0

但是，依然存在一個問題，若鼠標移入菜單，再移入空白區(qū)域后，再從空白區(qū)域移入熱區(qū)，依然會導(dǎo)致子菜單出現(xiàn)，菜單被強調(diào)，大家可以思考一下是否有辦法解決。

當(dāng)然，Axure只是表達思想的工具，很多時候我們只需要把自己想要表達的思路、想法演示清楚就行了，無需太過追求完美。

演示鏈接：https://xs0z33.axshare.com

（歡迎留言交流）

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

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