phoben 发表于 2021-9-5 19:46:37

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

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



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

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

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



效果配置：



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

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

https://gcdn.grapecity.com.cn/data/attachment/forum/202111/27/091821ek9zmngwqd7rwwi7.gif

scliudong 发表于 2021-9-5 20:56:48

效果不错，有教程吗？:loveliness:

孤狼 发表于 2021-9-5 21:14:29

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

白菜贝贝 发表于 2021-9-6 10:32:25

:hjyzw:

hubei333 发表于 2021-9-6 13:30:22

酷炫

137294886 发表于 2021-9-10 16:23:50

aatest 发表于 2021-9-12 09:38:13

没工程文件 然并卵···

amtath 发表于 2021-9-12 23:04:47

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

hzgwst 发表于 2021-9-13 09:21:25

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

gczxxu 发表于 2021-9-14 12:39:14

楼主都用到JS了，动画过渡也应该可以解决了。。
页: [1] 2
查看完整版本: 最新滑动收缩侧边栏实现思路