Axure網頁中的菜單欄想要添加一些效果,在某個菜單選中時候,底色能變化,凸顯出選中的效果,該怎么實現呢?下面我們就來看看詳細的教程。
1、先正常打開Axure RP工具,然后新建一個空白頁面,在頁面中放置若干菜單,為每一個菜單設置一個名稱,后續有用,如下所示。
2、選中第一個菜單,在右側屬性中拉到交互樣式設置處,如下截圖標紅所示。
3、單擊上圖中“交互樣式設置“處的“選中”,彈出如下截圖的對話框。
4、在該頁面,可以根據自己的需要設置選定效果,比如選中的菜單字體加粗,加下劃線等,本文已改變背景色為例進行說明。在彈出框中將“填充顏色”前打勾,點擊箭頭,彈出顏色選擇框,設置一個背景顏色。如下截圖所示。
5、選中的效果設置后之后,點擊確定,退出對話框。這時候會發現,標紅的位置可以看到內容,但是頁面并沒有效果。
6、這時候需要增加事件,選中第一個菜單,在屬性中增加鼠標單擊事件,在彈出框中選擇“選中事件”,將該元件設置為選中,其他元件設置為“取消選中”,如下截圖所示。
7、到此第一個菜單的選中效果已經設置完成。后續其他菜單都按照以上第二至第六步的步驟進行設置,就是在設置鼠標單擊事件的時候注意將該元件設置成選中,其他元件設置為取消選中。
8、這時候預覽效果,如下圖所示,單擊買個菜單的時候就可以看到選中項的背景色和其他菜單是不一樣的。
9、這里有點不足的是必須單擊后才顯示背景色,如果頁面一開始就要有默認選中的效果,鼠標單擊后切換選中菜單,這時候需要增加一個事件,就是將鼠標移到默認要選中的菜單處,在屬性中單擊更多事件,如下圖1所示,在出來的選項中單擊“載入時”,彈出新的對話框,設置選中和取消選中事件,如圖3所示,這樣設置之后預覽就可以看到效果了。
新聞熱點
疑難解答
圖片精選