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

  當(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é)議