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

知識點

l選項組

l交互樣式：鼠標懸停、選中

l鼠標單擊時事件

操作步驟

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

2、設置選項組，全選所有菜單，鼠標右鍵，選擇選項組

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

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

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

5、設置鼠標懸停效果，勾選填充顏色，設置填充顏色為“#F2F2F2”

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

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

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

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

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

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

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

8、選擇“單擊時”-“設置選中”-“當前元件”

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

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

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

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