【Axure原型圖】—— 3. NAVIGATION MENU（導(dǎo)航菜單）

制作導(dǎo)航菜單

Step0: 下載練習(xí)文件

在這里下載AxureTraining.rp文件，并用Axure RP打開

Step1: GET STARTED

1. 打開"Navigation menu" 頁面
2. 該頁面包含了多個(gè)菜單組件HOME, MANAGE, PROFILE, HELP等，他們已經(jīng)有了mouseOver和選中交互樣式
3. 選中所有的這些組件，右鍵，“Convert to Master”
4. 將創(chuàng)建的master重命名為“KiKiHeader”，并且右鍵勾選“Lock to Master Location” 然后點(diǎn)擊繼續(xù)
5. 在master的任意地方雙擊一下，打開編輯

Step2: Configure navigation links

1. 點(diǎn)擊"HOME"組件, 在Properties中雙擊"OnClick"， 添加一個(gè)新的Onclick case
2. 左邊欄，選擇“Open Link” --> Current Window action，
3. 最右邊, 選擇頁面內(nèi)連接，選擇“Navigation menu”
4. 點(diǎn)擊“OK”
5. 給“MANAGE”, "PROFILE", "HELP"也做同樣的操作，不過需要連接到相對(duì)應(yīng)的頁面
6. PS：點(diǎn)擊"HOME"之后，可以直接點(diǎn)擊Properties中的CreateLink來創(chuàng)建鏈接

Step3: SET THE SELECTED MENU ITEM ON EACH PAGE

在每個(gè)頁面上設(shè)置所選菜單項(xiàng)

1. 打開Navigation menu頁面
2. 在頁面查看器中雙擊“OnPageLoad”， 添加一個(gè)OnPageLoad case編輯器
3. 選中"Set Selected/Checked" --> "Selected" action
4. 在"Configure actions"列，點(diǎn)擊Header中的"Home"部件
5. 點(diǎn)擊ok
6. 將KiKiHeader master添加到"Manager", "Profile" 和"Help" 頁面中去，然后為manage, profile, help頁面重復(fù)上面1-5步驟
   

Step4: PIN MENU TO TOP OF PAGE

1. 在master窗格中雙擊 "KiKiHeader"進(jìn)行編輯
2. 選取所有master中的元素， 右鍵選擇“Convert to Dynamic Panel”
3. 在屬性標(biāo)簽中， 點(diǎn)擊"Pin to Browser"
4. 在"Pin to Browser"會(huì)話框中，選中"Pin to browser window"， 勾選水平"Center"， 垂直"Top"
5. 點(diǎn)擊ok

注: 本人Axure系列的翻譯blog僅供個(gè)人記錄學(xué)習(xí)，侵刪.