Axure菜單導(dǎo)航怎么添加鼠標(biāo)選中變色的特效?

百度經(jīng)驗(yàn) 發(fā)布時(shí)間：2018-06-15 09:13:10 作者：hbyostc11

Axure菜單導(dǎo)航怎么添加選中變色的特效？Axure中制作的導(dǎo)航菜單，想要添加一些特效，比如鼠標(biāo)經(jīng)過選中時(shí)背景顏色發(fā)生變化，下面我們就來看看詳細(xì)的教程，需要的朋友可以參考下

Axure網(wǎng)頁中的菜單欄想要添加一些效果，在某個(gè)菜單選中時(shí)候，底色能變化，凸顯出選中的效果，該怎么實(shí)現(xiàn)呢？下面我們就來看看詳細(xì)的教程。

原型設(shè)計(jì)工具Axure RP Pro 8.1特別版中文漢化特別版(附漢化包+注冊碼+安裝教程)

類型：輔助設(shè)計(jì)
大小：90.5MB
語言：簡體中文
時(shí)間：2018-05-24

查看詳情

1、先正常打開Axure RP工具，然后新建一個(gè)空白頁面，在頁面中放置若干菜單，為每一個(gè)菜單設(shè)置一個(gè)名稱，后續(xù)有用，如下所示。

2、選中第一個(gè)菜單，在右側(cè)屬性中拉到交互樣式設(shè)置處，如下截圖標(biāo)紅所示。

3、單擊上圖中“交互樣式設(shè)置“處的“選中”，彈出如下截圖的對(duì)話框。

4、在該頁面，可以根據(jù)自己的需要設(shè)置選定效果，比如選中的菜單字體加粗，加下劃線等，本文已改變背景色為例進(jìn)行說明。在彈出框中將“填充顏色”前打勾，點(diǎn)擊箭頭，彈出顏色選擇框，設(shè)置一個(gè)背景顏色。如下截圖所示。

5、選中的效果設(shè)置后之后，點(diǎn)擊確定，退出對(duì)話框。這時(shí)候會(huì)發(fā)現(xiàn)，標(biāo)紅的位置可以看到內(nèi)容，但是頁面并沒有效果。

6、這時(shí)候需要增加事件，選中第一個(gè)菜單，在屬性中增加鼠標(biāo)單擊事件，在彈出框中選擇“選中事件”，將該元件設(shè)置為選中，其他元件設(shè)置為“取消選中”，如下截圖所示。

7、到此第一個(gè)菜單的選中效果已經(jīng)設(shè)置完成。后續(xù)其他菜單都按照以上第二至第六步的步驟進(jìn)行設(shè)置，就是在設(shè)置鼠標(biāo)單擊事件的時(shí)候注意將該元件設(shè)置成選中，其他元件設(shè)置為取消選中。

8、這時(shí)候預(yù)覽效果，如下圖所示，單擊買個(gè)菜單的時(shí)候就可以看到選中項(xiàng)的背景色和其他菜單是不一樣的。

9、這里有點(diǎn)不足的是必須單擊后才顯示背景色，如果頁面一開始就要有默認(rèn)選中的效果，鼠標(biāo)單擊后切換選中菜單，這時(shí)候需要增加一個(gè)事件，就是將鼠標(biāo)移到默認(rèn)要選中的菜單處，在屬性中單擊更多事件，如下圖1所示，在出來的選項(xiàng)中單擊“載入時(shí)”，彈出新的對(duì)話框，設(shè)置選中和取消選中事件，如圖3所示，這樣設(shè)置之后預(yù)覽就可以看到效果了。