首先我們利用Axure系統元件完成線框圖的繪制。從元件庫拖動四個矩形至設計區域，編輯矩形文本，這四個矩形作為導航欄的壹級菜單，分別命名為菜單壹、菜單二、菜單三、菜單四。水平等距離分布四個矩形的距離。如圖2所示。
拖動四個垂直菜單至壹級菜單下方，調整每個菜單項目的寬度與高度，使其與壹級菜單的寬高壹致。編輯每個子菜單項的文本，四個子菜單分別命名為子菜單1、子菜單2、子菜單3、子菜單4，如圖3所示。將每個子菜單項填充為灰色#D4D4D4，隱藏子菜單。
為了視覺上更美觀，我們默認將所有菜單項邊框線進行隱藏。將四個壹次菜單設置為為壹個選項組，選項組命名為壹級菜單。為四個壹級菜單設置選中樣式，選中時填充顏色為#0099FF，文字顏色為白色。為子菜單的每個菜單項設置鼠標懸停樣式，懸停時菜單項填充色為#0079FE，文字顏色為白色。將壹級菜單及其對應的子菜單分別設置為組合，四個組合分別命名為導航1、導航2、導航3和導航4。
下面我們開始進行交互設置，選中菜單壹，添加鼠標移入事件，將當前元件設置為選中狀態，向下滑動顯示當前菜單的子菜單即子菜單1，隱藏另外三個子菜單，交互設置如圖4所示。選中組合導航1，添加鼠標移出事件，將壹級菜單即菜單壹設置為未選中狀態，隱藏該組導航下的二級子菜單即隱藏子菜單1。交互設置如圖5所示。
按照同樣的方法為另外三個壹級菜單和導航組合設置交互效果。交互設置如圖6所示。
到這裏，滑動式菜單交互原型已經制作完畢，點擊預覽在瀏覽器中查看原型。
根據本案例的設計思路，其實我們還可以制作向右滑動彈出的交互效果，原型制作原理是壹樣的，如果大家有興趣，不妨嘗試制作。