原標題：Axure教程：實現菜單下拉效果

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

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

預覽圖

初始狀態：

點擊“菜單1”、“菜單2”后：

預覽地址： https://rrwsy5.axshare.com

所需元件

兩個菜單矩形、兩個菜單子項動態面板、一個向上箭頭、一個向下箭頭。

操作步驟

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

(2)設置“菜單1”矩形交互Case1鼠標單擊時

1)編輯條件：當“菜單1子項”的可見性為true

2)因為菜單1子項此時是顯示的，所以單擊后應該隱藏起來：

3)將向上的箭頭設置成向下的箭頭：

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

(3)設置“菜單1”矩形交互Case2鼠標單擊時

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

2)因為菜單1子項此時是隱藏的，所以單擊后應該顯示出來：

3)將向下的箭頭設置成向上的箭頭

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

(5)將“菜單2子項”動態面板隱藏起來

(6)按F5預覽原型看看效果

小記

后面我還會再制作其他類型的菜單，這是其中一個非常簡單的案例。

這個案例里，兩個菜單項可以同時展開，可以想想怎么做到有且只有一個菜單項展開。

Axure教程：使用動態面板實現收藏→已收藏

本文由 @Nilz 原創發布于人人都是產品經理，未經許可，禁止轉載

題圖來自 Unsplash ，基于 CC0 協議返回搜狐，查看更多

責任編輯：

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的axure中的拐弯箭头_Axure教程：实现菜单下拉效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。