新聞中心

详细内容

Axure教程:頂部導(dǎo)航光標(biāo)定位

  當(dāng)鼠標(biāo)移入頂部菜單時(shí),菜單頂部有光標(biāo)跟隨,當(dāng)移出時(shí),光標(biāo)自動(dòng)回到當(dāng)前頁面菜單位置。這種效果應(yīng)該怎么實(shí)現(xiàn)呢?

  當(dāng)鼠標(biāo)移入頂部菜單時(shí),菜單頂部有光標(biāo)跟隨,當(dāng)移出時(shí),光標(biāo)自動(dòng)回到當(dāng)前頁面菜單位置。這種效果應(yīng)該怎么實(shí)現(xiàn)呢?

  如下圖:

  

  頂部導(dǎo)航光標(biāo)定位

  線上效果圖,查看:頂部導(dǎo)航光標(biāo)定位

  制件方法 1. 頁面與導(dǎo)航欄制作

  按平時(shí)制作導(dǎo)航與頁面的方式制定,先制作好頁面與導(dǎo)航欄。

  2. 菜單動(dòng)態(tài)面板

  添加動(dòng)態(tài)面板,放在導(dǎo)航欄位置。

  

  菜單動(dòng)態(tài)面板

  3. 制作菜單

  進(jìn)入動(dòng)態(tài)面板,添加4個(gè)菜單,并添加光標(biāo),并放置于菜單一位置。

  

  菜單制作

  4. 菜單一交互

  針對(duì)每個(gè)菜單單獨(dú)做交互效果,菜單一交互設(shè)置。

  

  菜單一交互

  在菜單一的交互中添加全局變量”blue”,并設(shè)置值為“菜單一”。

  

  變量值設(shè)置

  5. 菜單二交互

  菜單二交互設(shè)置:

  

  菜單二交互

  在菜單二的交互中添加全局變量“blue”,并設(shè)置值為“菜單二”。

  

  變量值設(shè)置

  其余菜單按以上方法進(jìn)行設(shè)置。

  6. 動(dòng)態(tài)面板頁面交互

  在動(dòng)態(tài)面板頁面做鼠標(biāo)移出時(shí)的交互效果:

  

  鼠標(biāo)移出交互

  7. 母板

  多個(gè)菜單頁面,可將制作的菜單轉(zhuǎn)換為母板,其余3個(gè)菜單頁面可直接使用。

  

  母板

  8. 主頁面交互設(shè)置

  在主頁面設(shè)置頁面載入時(shí)的交互:

  頁面載入設(shè)置

  本文由 @ 五百英里 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載

  題圖來自Unsplash,基于CC0協(xié)議

在線表單提交
更多
您的姓名
聯(lián)系方式
留言內(nèi)容

在線留言 / 我們的客服人員收到您的留言后將第一時(shí)間向您取得聯(lián)系

傳真:(0755) 29939876

聯(lián)系電話:0755-29939993  29939994

24h銷售熱線:13828818369

24h售后服務(wù)熱線:13590149467



email:mindray@126.com

地址:深圳市寶安區(qū)沙井鎮(zhèn)新橋第三工業(yè)區(qū)金元二路19號(hào)

Copyright @ 2018 . All rights reserved. 

技术支持: 凡客科技 | 管理登录
seo seo