導(dǎo)航欄的一個特點是每個導(dǎo)航菜單都是互斥的，一次只能選中一個，當(dāng)選中另一個菜單的時候，前一個被選中的菜單會取消選中，所以這里涉及到一個重要的知識點是“選項組”

知識點

l選項組

l交互樣式：鼠標(biāo)懸停、選中

l鼠標(biāo)單擊時事件

操作步驟

1、將矩形拖入面板中，調(diào)整大小寬度后，復(fù)制幾個，做成如下圖樣式

2、設(shè)置選項組，全選所有菜單，鼠標(biāo)右鍵，選擇選項組

3、輸入選項組名稱，這個名稱可以隨意選取，注意：如果在原型中有多個這樣的選項組，需要取不同的名稱，不然會導(dǎo)致交互效果失效

說明：這一步設(shè)置之后，菜單項就變成了一個整體且是互斥的效果，可以理解為已經(jīng)擁有了單選框的效果

4、接下來要開始設(shè)置交互效果了，全選菜單項，鼠標(biāo)右鍵，點擊交互樣式

5、設(shè)置鼠標(biāo)懸停效果，勾選填充顏色，設(shè)置填充顏色為“#F2F2F2”

說明：設(shè)置此步之后，每個菜單項就擁有了，鼠標(biāo)懸停矩形框背景色變化的效果；

鼠標(biāo)懸停效果可以根據(jù)具體需要設(shè)置背景色、文字顏色、邊框色、邊框線等等效果，這里只是做個簡單示例

6、設(shè)置選中效果，切換到選中頁簽，和上步一樣設(shè)置填充顏色，然后設(shè)置字體顏色為“#EC808D”，設(shè)置完畢后點擊確定按鈕

說明：設(shè)置此步之后，每個菜單項就擁有了，被選中后矩形框背景色和文字顏色變化的效果；

選中效果可以根據(jù)具體需要設(shè)置背景色、文字顏色、邊框色、邊框線等等效果，這里只是做個簡單示例

7、設(shè)置觸發(fā)事件，選中首頁項，點擊右邊的新建交互

說明：以上設(shè)置讓菜單項具有了互斥效果以及鼠標(biāo)懸停和被選中后的交互效果，此時需要動作觸發(fā)這些效果

8、選擇“單擊時”-“設(shè)置選中”-“當(dāng)前元件”

9、點擊“首頁”的單擊時事件，復(fù)制事件效果，然后粘貼到其他菜單項

說明：Axure中只能為單個元件設(shè)置交互動作，不能批量設(shè)置，不過好在Axure可以復(fù)制交互動作，只是需要多次復(fù)制粘貼而已

到此整個導(dǎo)航欄的效果就做好了，以下是演示效果

這是最基礎(chǔ)的導(dǎo)航欄了，沒有進(jìn)行視覺優(yōu)化，但最基本的功能已經(jīng)完成，可以在此基礎(chǔ)上優(yōu)化樣式，變化出更美觀的導(dǎo)航欄。