帮你打开活字格更神奇的功能：九十三，侧边菜单栏滑出解决方案

相信对于菜单比较关注的小伙伴之前应该都了解谢老板的这个教程

侧边菜单栏的一种处理方式
https://gcdn.grapecity.com.cn/fo ... 2&fromuid=51381
(出处: 葡萄城产品技术社区)

可以实现在活字格页面中滑动显示隐藏菜单的效果，不过这个功能在7.0版本之后，失效了，失效了，失效了~

原因是7.0我们使用了grid布局，很多以前CSS或者JS操作的DOM会发生变化

问题我们发现了，相应的我们也会有对应的解决方案

7.0的发布，让这个功能更加的简单，不需要使用JS代码，只需要CSS就可以控制我们相应的效果
我们先看下效果



实现如下：
1.在母版页中添加菜单，不需要隐藏菜单显示区域


2.在浏览器中获取菜单单元格的id，运行浏览器，F12打开调试控制台



3.当拿到对应菜单的ID之后，就可以通过CSS分分钟解决了

1. #r4c0m_outerdiv{
   
2.     width:10px !important;
   
3.     opacity: 0;
   
4.     -webkit-transition: all 0.3s ease-in;
   
5. }
   
6. 
   
7. #r4c0m_outerdiv:hover{
   
8.     width:100% !important;
   
9.     max-width:200px;
   
10.     opacity: 1;
    
11.     grid-column-end:32 !important;
    
12.     -ms-grid-column-span:31 !important;
    
13.     z-index:999;
    
14. }

复制代码

详细工程文件见附件
滑动显示左侧菜单.fgcc (886.09 KB, 下载次数: 691)

2021-5-24 16:41 上传

点击文件名下载附件