摘要：在PC端的產品中我們會常常見到滑動式菜單，當鼠標移入菜單上方，向下或向右自動滑動彈出子菜單，當頁面信息層級較多或功能較多時，在產品設計時經常會用到這種滑動式菜單。今天就和大家分享如下制作滑動式菜單的交互原型。如下圖1為滑動式菜單的示意圖。

圖1-滑動菜單示意圖

元件準備

首先我們利用Axure系統元件完成線框圖的繪制。從元件庫拖動四個矩形至設計區域，編輯矩形文本，這四個矩形作為導航欄的一級菜單，分別命名為菜單一、菜單二、菜單三、菜單四。水平等距離分布四個矩形的距離。如圖2所示。

圖2-一級菜單

拖動四個垂直菜單至一級菜單下方，調整每個菜單項目的寬度與高度，使其與一級菜單的寬高一致。編輯每個子菜單項的文本，四個子菜單分別命名為子菜單1、子菜單2、子菜單3、子菜單4，如圖3所示。將每個子菜單項填充為灰色#D4D4D4，隱藏子菜單。

圖3-子菜單

制作交互

為了視覺上更美觀，我們默認將所有菜單項邊框線進行隱藏。將四個一次菜單設置為為一個選項組，選項組命名為一級菜單。為四個一級菜單設置選中樣式，選中時填充顏色為#0099FF，文字顏色為白色。為子菜單的每個菜單項設置鼠標懸停樣式，懸停時菜單項填充色為#0079FE，文字顏色為白色。將一級菜單及其對應的子菜單分別設置為組合，四個組合分別命名為導航1、導航2、導航3和導航4。

下面我們開始進行交互設置，選中菜單一，添加鼠標移入事件，將當前元件設置為選中狀態，向下滑動顯示當前菜單的子菜單即子菜單1，隱藏另外三個子菜單，交互設置如圖4所示。選中組合導航1，添加鼠標移出事件，將一級菜單即菜單一設置為未選中狀態，隱藏該組導航下的二級子菜單即隱藏子菜單1。交互設置如圖5所示。

圖4-顯示子菜單

圖5-隱藏子菜單

按照同樣的方法為另外三個一級菜單和導航組合設置交互效果。交互設置如圖6所示。

圖6-其他菜單交互

到這里，滑動式菜單交互原型已經制作完畢，點擊預覽在瀏覽器中查看原型。

根據本案例的設計思路，其實我們還可以制作向右滑動彈出的交互效果，原型制作原理是一樣的，如果大家有興趣，不妨嘗試制作。

關注頭條號免費學習更多Axure教程，私信可獲取源文件及Axure RP9安裝包。

總結

以上是生活随笔為你收集整理的axure原型案例_Axure RP9原型案例：制作一个可以滑动的菜单的全部內容，希望文章能夠幫你解決所遇到的問題。

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