光标设置_顶部导航光标定位

f3391b11056297b871a4baec127609cf.png

当鼠标移入顶部菜单时,菜单顶部有光标跟随,当移出时,光标自动回到当前页面菜单位置

如下图:

bae43dc94310865a591feb1da8a8f216.gif
顶部导航光标定位

线上效果图,查看:顶部导航光标定位

制件方法

1、页面与导航栏制作

按平时制作导航与页面的方式制定,先制作好页面与导航栏

2、菜单动态面板

添加动态面板,放在导航栏位置

60d32f17596bde2695427f609f6ff726.png
菜单动态面板

3、制作菜单

进入动态面板,添加4个菜单,并添加光标,并放置于菜单一位置

5a8cdcc17abcd7e849cd2d6ff0d8ccbf.png
菜单制作

4、菜单一交互

针对每个菜单单独做交互效果,菜单一交互设置

aabad75624039aa44fa980eabfa79c93.png
菜单一交互


在菜单一的交互中添加全局变量"blue",并设置值为“菜单一”

d8b9d23e6696f2c9297998e0aa9d5704.png
变量值设置

5、菜单二交互

菜单二交互设置

b8a00fa56fecc17334268a24d3fc1de1.png
菜单二交互


在菜单二的交互中添加全局变量"blue",并设置值为“菜单二”

a14133b47ecc6f5e31e1eeaacbaf8ce9.png
变量值设置


其余菜单按以上方法进行设置

6、动态面板页面交互

在动态面板页面做鼠标移出时的交互效果

3ee86ca6fbd406cf40427bb0b033deac.png
鼠标移出交互

7、母板

多个菜单页面,可将制作的菜单转换为母板,其余3个菜单页面可直接使用

668b5b25994bf26e7b5a01101ce7bde1.png
母板

8、主页面交互设置

在主页面设置页面载入时的交互

73416d0b9675051fe246777a18eeb990.png
页面载入设置
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值