筆者在本文中介紹了如何用Axure實(shí)現(xiàn)菜單下拉效果的操作步驟，以及實(shí)現(xiàn)過程中的一些心得體會，與大家分享。

盡管Axure的基礎(chǔ)元件庫里面已經(jīng)有菜單項(xiàng)了，但是樣式和交互我們不一定喜歡，所以這里自己制作菜單項(xiàng)以滿足不同的需求。

預(yù)覽圖

初始狀態(tài)：

點(diǎn)擊“菜單1”、“菜單2”后：

預(yù)覽地址：https://rrwsy5.axshare.com

所需元件

兩個(gè)菜單矩形、兩個(gè)菜單子項(xiàng)動態(tài)面板、一個(gè)向上箭頭、一個(gè)向下箭頭。

操作步驟

（1）按照上圖給元件命好名，擺放好位置

（2）設(shè)置“菜單1”矩形交互Case1鼠標(biāo)單擊時(shí)

1）編輯條件：當(dāng)“菜單1子項(xiàng)”的可見性為true

2）因?yàn)椴藛?子項(xiàng)此時(shí)是顯示的，所以單擊后應(yīng)該隱藏起來：

3）將向上的箭頭設(shè)置成向下的箭頭：

這里我使用的是FontAwesome字體，所以顯示出來就是個(gè)看不出形狀的框框，這一步不一定要按照我這樣做，可以放兩個(gè)圖標(biāo)去更換就好，不過還是建議大家多去使用FontAwesome字體，原因在我另一篇文章《Axure教程：使用動態(tài)面板實(shí)現(xiàn)收藏→已收藏》的小記里有解釋。

（3）設(shè)置“菜單1”矩形交互Case2鼠標(biāo)單擊時(shí)

1）編輯條件：當(dāng)“菜單1子項(xiàng)”的可見性為false，設(shè)置步驟與上面一樣，就把true改為false即可；

2）因?yàn)椴藛?子項(xiàng)此時(shí)是隱藏的，所以單擊后應(yīng)該顯示出來：

3）將向下的箭頭設(shè)置成向上的箭頭

（4）按照上述步驟相似地設(shè)置“菜單2”矩形

（5）將“菜單2子項(xiàng)”動態(tài)面板隱藏起來

（6）按F5預(yù)覽原型看看效果

小記

1. 后面我還會再制作其他類型的菜單，這是其中一個(gè)非常簡單的案例。
2. 這個(gè)案例里，兩個(gè)菜單項(xiàng)可以同時(shí)展開，可以想想怎么做到有且只有一個(gè)菜單項(xiàng)展開。

#相關(guān)閱讀#

Axure教程：使用動態(tài)面板實(shí)現(xiàn)收藏→已收藏

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

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