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

知識(shí)點(diǎn)

l選項(xiàng)組

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

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

操作步驟

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

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

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

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

4、接下來(lái)要開(kāi)始設(shè)置交互效果了，全選菜單項(xiàng)，鼠標(biāo)右鍵，點(diǎn)擊交互樣式

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

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

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

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

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

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

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

說(shuō)明：以上設(shè)置讓菜單項(xiàng)具有了互斥效果以及鼠標(biāo)懸停和被選中后的交互效果，此時(shí)需要?jiǎng)幼饔|發(fā)這些效果

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

9、點(diǎn)擊“首頁(yè)”的單擊時(shí)事件，復(fù)制事件效果，然后粘貼到其他菜單項(xiàng)

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

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

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