找回密码
 立即注册

QQ登录

只需一步,快速开始

phoben 讲师达人认证 悬赏达人认证 活字格认证
论坛元老   /  发表于:2021-9-5 19:46  /   查看:7650  /  回复:19
本帖最后由 phoben 于 2021-11-27 09:22 编辑

菜单自动隐藏.gif

自动隐藏,鼠标划入自动显示,隐藏后留下LOGO和图标
做这个效果花了很久,肯定有人会问,这得用好多CSS吧,其实不瞒大家说,一句CSS也没用。。。

但是JS确实是要用一点的,睡觉活字格竟然不支持鼠标划入事件~~小小吐槽下

其实效果大家只要通过活字格自带的CSS编辑器,细心的调整,也可以达到,例如鼠标放上去的这个酷酷的选中效果。。。

image.png962083435.png

效果配置:

image.png523882750.png

还有一些隐藏细节可能很少人注意,就是菜单自动隐藏之前,会收起已经打开的二级、三级菜单。
等再次显示时,又会重新自动打开下级菜单,这样就不会出现收起状态有很多空行了。
这里就需要一些JS实现了。

另外美中不足的就是没有过渡动画效果,问问官方大佬们,怎么给Grid的Column 改变加上过渡的CSS? 我测试过没用....



评分

参与人数 4金币 +66 满意度 +15 收起 理由
muto + 5
Chelsey.Wang + 66 赞一个!
张順 + 5
孤狼 + 5

查看全部评分

19 个回复

倒序浏览
scliudong
高级会员   /  发表于:2021-9-5 20:56:48
沙发
效果不错,有教程吗?
回复 使用道具 举报
孤狼悬赏达人认证 活字格认证
高级会员   /  发表于:2021-9-5 21:14:29
板凳
求工程文件,希望向高手学习
回复 使用道具 举报
白菜贝贝悬赏达人认证 活字格认证
银牌会员   /  发表于:2021-9-6 10:32:25
地板
回复 使用道具 举报
hubei333
高级会员   /  发表于:2021-9-6 13:30:22
6#
酷炫
回复 使用道具 举报
137294886
金牌服务用户   /  发表于:2021-9-10 16:23:50
7#
image.png968971862.png
回复 使用道具 举报
aatest
高级会员   /  发表于:2021-9-12 09:38:13
8#
没工程文件 然并卵···
回复 使用道具 举报
amtath悬赏达人认证 活字格认证
论坛元老   /  发表于:2021-9-12 23:04:47
9#
60金币已准备,快放链接出来让我买。
回复 使用道具 举报
hzgwst
注册会员   /  发表于:2021-9-13 09:21:25
10#
求工程文件,希望向高手学习
回复 使用道具 举报
gczxxu
银牌会员   /  发表于:2021-9-14 12:39:14
11#
楼主都用到JS了,动画过渡也应该可以解决了。。
回复 使用道具 举报
12下一页
您需要登录后才可以回帖 登录 | 立即注册
返回顶部