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

如下圖：

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

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

制件方法

1. 頁(yè)面與導(dǎo)航欄制作

按平時(shí)制作導(dǎo)航與頁(yè)面的方式制定，先制作好頁(yè)面與導(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)面板頁(yè)面交互

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

鼠標(biāo)移出交互

7. 母板

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

母板

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

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

頁(yè)面載入設(shè)置

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

題圖來(lái)自Unsplash，基于CC0協(xié)議