axure版本：8.0

實(shí)現(xiàn)效果：

原型查看：

https://n6n0xr.axshare.com/#c=2

實(shí)現(xiàn)思路：

?????? 通過動(dòng)態(tài)面板實(shí)現(xiàn)菜單選中與未選中的不同效果，通過點(diǎn)擊一級(jí)菜單，設(shè)置二級(jí)子菜單以及緊隨的一級(jí)菜單的移動(dòng)事件，實(shí)現(xiàn)菜單的展開與折疊效果（在子菜單上設(shè)置單擊打開頁面事件）。

?????? 本示例只講解了二級(jí)導(dǎo)航菜單的實(shí)現(xiàn)方式，各位童鞋們可參照相應(yīng)的實(shí)現(xiàn)思路舉一反三。

制作步驟：

1、托入一個(gè)矩形2，作為左側(cè)菜單背景色，并調(diào)整大小和顏色。

2、制作第一個(gè)未選中狀態(tài)的一級(jí)菜單。

3、并將其各個(gè)組件全部選中，轉(zhuǎn)換為動(dòng)態(tài)面板。并復(fù)制一個(gè)狀態(tài)，設(shè)置菜單選中后的樣式。

4、參照第2、3步制作所有的子菜單。

5、在右下角大綱頁面將所有的子菜單進(jìn)行分組并命名，以便于后續(xù)設(shè)置事件。

6、參照上面步驟將所有左側(cè)菜單項(xiàng)全部做完。

7、設(shè)置所有一級(jí)菜單“鼠標(biāo)單擊時(shí)”事件,設(shè)置切換對(duì)應(yīng)的子菜單組合的顯示與隱藏。并可根據(jù)需要設(shè)置顯示和隱藏的動(dòng)畫（如顯示時(shí)向下滑動(dòng)，隱藏時(shí)向上滑動(dòng)）

8、設(shè)置所有一級(jí)菜單“移動(dòng)時(shí)”事件，讓對(duì)應(yīng)的子菜單組合以及下一個(gè)一級(jí)菜單跟隨移動(dòng)。

9、設(shè)置所有的二級(jí)子菜單組合（最后一個(gè)組合不用設(shè)置）“顯示時(shí)”事件，移動(dòng)緊接著的下一個(gè)一級(jí)菜單動(dòng)態(tài)面板，在“移動(dòng)”處選擇到達(dá)

設(shè)置到達(dá)的x值時(shí)，點(diǎn)擊fx，在彈出的對(duì)話框中，選擇插入變量或函數(shù)

在變量中，返擇left

選中后，結(jié)果如下（需要手動(dòng)將默認(rèn)的0刪除），然后點(diǎn)擊確定。

設(shè)置到達(dá)的y值，也是點(diǎn)擊fx函數(shù)，在變量中，選擇bottom

最終結(jié)果如下，點(diǎn)擊確定?？筛鶕?jù)實(shí)際場(chǎng)景，設(shè)置相應(yīng)的動(dòng)畫。

10、設(shè)置所有的二級(jí)子菜單組合（最后一個(gè)組合不用設(shè)置）“隱藏時(shí)”事件，移動(dòng)緊接著的下一個(gè)一級(jí)菜單動(dòng)態(tài)面板，在“移動(dòng)”處選擇到達(dá)。

到達(dá)的x值設(shè)為[[This.left]]，到達(dá)的y值設(shè)為[[This.top]]

11、全選剛才制作的所有元件，點(diǎn)擊右鍵，選擇“轉(zhuǎn)換為母版”，并為該母版取一個(gè)名字

12、在母版窗格中，雙擊打開剛才創(chuàng)建的母版

設(shè)置“頁面載入時(shí)”事件，隱藏所有二級(jí)子菜單組合。

13、制作所有子菜單對(duì)應(yīng)的頁面，并在所有頁面中插入剛才制作的母版。

14、所有的子菜單對(duì)應(yīng)頁面中，設(shè)置“頁面載入時(shí)”事件，等待50毫秒

顯示對(duì)應(yīng)的那個(gè)子菜單組合。

設(shè)置其對(duì)應(yīng)的一級(jí)菜單的面板狀態(tài)為state2，并同時(shí)設(shè)置其對(duì)應(yīng)的二級(jí)子菜單的面板狀態(tài)為state2

15、打開剛才制作的母版，設(shè)置所有的二級(jí)子菜單動(dòng)態(tài)面板，“鼠標(biāo)單擊時(shí)”事件，在當(dāng)前窗口打開對(duì)應(yīng)的頁面。

至此，左側(cè)多級(jí)導(dǎo)航菜單制作完成。