Axure RP9原型案例：製作一個可以滑動的選單

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

圖1-滑動選單示意圖

元件準備

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

圖2-一級選單

拖動四個垂直選單至一級選單下方，調整每個選單專案的寬度與高度，使其與一級選單的寬高一致。編輯每個子選單項的文字，

四個子

選單分別命名為子選單1、子選單2、子選單3、子選單4，如圖3所示。將每個子選單項填充為灰色#D4D4D4，隱藏子選單。

圖3-子選單

製作互動

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

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