最新滑动收缩侧边栏实现思路

muto

本帖最后由 phoben 于 2021-11-27 09:22 编辑

菜单自动隐藏.gif

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

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

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

image.png962083435.png

效果配置：

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

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

scliudong · scliudong

效果不错，有教程吗？

孤狼 · 孤狼

求工程文件，希望向高手学习

白菜贝贝 · 白菜贝贝

hubei333 · hubei333

酷炫

回复 · 137294886

aatest · aatest

没工程文件然并卵···

amtath · amtath

60金币已准备，快放链接出来让我买。

hzgwst · hzgwst

求工程文件，希望向高手学习

gczxxu · gczxxu

楼主都用到JS了，动画过渡也应该可以解决了。。

		自动登录	找回密码
密码			立即注册

[资源分享] 最新滑动收缩侧边栏实现思路

评分

19 个回复

时代开发者征文活动

微信认证勋章

悬赏达人

讲师达人

活字格认证

活字格高级认证

圣诞拼拼乐