我們經(jīng)常在各種Web后臺頁面中看到抽屜式菜單，本文將介紹如何使用axure實現(xiàn)抽屜式菜單效果~~如果你看完學(xué)會了，可以隨手點個贊哦，比心心(#^.^#)

開發(fā)見山，先放效果圖：

抽屜式菜單效果

下面是具體步驟：

一、元件準(zhǔn)備

本案例包括兩個一級菜單、兩個二級菜單，如下圖所示。同時為了更明顯的表示菜單展開和收回的效果，增加了“上箭頭”與“下箭頭”圖標(biāo)。

菜單元件

元件命名

二、 擺好元件位置（位置很重要哦~）

1. 首先將兩個一級菜單按照上下關(guān)系擺好；

一級菜單位置關(guān)系

2. 然后將“用戶管理”子菜單放到“用戶管理”下方，并設(shè)置為“隱藏”狀態(tài)；

子菜單位置（黃色部分）

3. 將“統(tǒng)計分析”子菜單放到“統(tǒng)計分析”菜單下方，并設(shè)置為“隱藏”狀態(tài)。

子菜單位置（黃色部分）

PS：這個步驟就是將各個子菜單放在應(yīng)該出現(xiàn)的正確位置上~

三、添加事件與用例

1. 為“用戶管理”一級菜單設(shè)置選中樣式，這里簡單設(shè)置為更改背景色；

一級菜單選中樣式

2. 為“用戶管理”一級菜單添加OnClick（單擊時）事件，用例為：設(shè)置選中狀態(tài)為toggle(切換)，也就是：菜單可以在選中與未選中之間通過點擊的方式切換。

一級菜單點擊事件與用例

3. 接著為“用戶管理”一級菜單添加OnSelected（選中時）事件，用例為：顯示用戶管理子菜單，同時一定要設(shè)置向下推動元件（push widgets,below）（畫重點哦~）；

一級菜單選中用例

4. 同時為“用戶管理”一級菜單添加UnSelected（未選中）事件，用例為：隱藏用戶管理子菜單，同時要設(shè)置向下拉動元件（pull widgets,below）；

一級菜單未選中用例

5. 同理為“統(tǒng)計分析”一級菜單設(shè)置選中樣式，添加OnClick（單擊時）、OnSelected（選中時）與UnSelected（未選中）事件，這里就不再多說了~

到這里，已經(jīng)實現(xiàn)抽屜菜單效果啦~

最后，為了更明顯的表示菜單展開和收回，我們再加上菜單右側(cè)箭頭變化的效果：

(1) 將“下箭頭”放在“上箭頭”位置，同時設(shè)置“下箭頭”為隱藏狀態(tài)；

放置“下箭頭”位置

（2）為“用戶管理”和“統(tǒng)計分析”一級菜單的OnSelected（選中時）與UnSelected（未選中）事件增加“箭頭”的顯示、隱藏內(nèi)容。

箭頭顯示隱藏設(shè)置

axure實現(xiàn)web頁面抽屜式菜單就介紹完啦，簡單來說就是：擺好各個菜單的位置，并設(shè)置好顯示、隱藏狀態(tài)；然后利用axure中顯示/隱藏元件時的推動、拉動選項，就OK了~