侧边菜单栏的一种处理方式（新）

重要提示

活字格在V8.0中，活字格提供“设置行列布局命令”，通过设置特定列“可见/不可见”，可直接解决该问题

帮助文档

此外，“PC组件包——Element Plus”的EL-导航菜单，内建有折叠功能，也可直接解决该问题

下载 & 文档 效果展示

============以下为旧版本的解决方案，适用于V7.0 Update 1及更早期版本============

各位大佬，      不知道各位小伙伴在开发的过程中有没有过这样的烦恼。因为开发设备的不同，导致我们基本上只能按照720p的屏幕的像素点来进行设计，然后再设置双向拉伸来适配高分辨率的设备（如果按照高分屏开发，在低分辨率的屏幕上的体验极差），鉴于此，屏幕资源就显得额外的重要，每一个列表里面的字段我们都想尽可能的把宽度留宽一点，或者尽可能多的塞进多一些字段。但是，有很多系统为了操作方便，都会在母版页的左边放上一个菜单栏，就像这样：

这样咱们每一个页面就都损失了左边的一大块区域。于是借鉴其他网站的处理方式就是咱们把这个菜单栏隐藏起来，鼠标滑倒左边时呼出菜单，鼠标移出的时候隐藏菜单，设置好的效果就像这样：

在活字格中，做到这样的效果也不是很难，具体步骤如下：
1、在母版页中，在占位区的左边，划一块区域出来放置咱们的菜单，把菜单单元格的名字设置为"treebar"，当然你也可以设置其他的名字。并把这些列设置为隐藏

2、在活字格设置页面，添加js文件/并且设定母版页和页面均水平拉伸（如果工程不设置拉伸，那么我认为屏幕也不会不够用）


js文件在工程附件中。
正常情况应该就可以了，如果有不适合自己的地方，可以在js文件中更改代码，代码注释如下：

1. //如果在页面中没有以treebar命名，那么要把这里所有的treebar改位你的命名。
   
2. setTimeout(treebarfct, 2000);//设置延时，建议不更改，第一次启动页面时需要等待2s才能呼出菜单
   
3. function treebarfct() {
   
4.     $("[fgcname='treebar']").css("display", "block");
   
5.     $("[fgcname='treebar']").css("z-index", "999");
   
6.     $("[fgcname='treebar']").mouseleave(function () {
   
7.         $("[fgcname='treebar']").animate({ left: "0px", width: "0px" }, 500);
   
8.     });
   
9.     var value = parseFloat($("[fgcname='treebar']").height());
   
10.     var readmore = document.createElement('div');
    
11.     readmore.setAttribute('id', 'toucharea');
    
12.     readmore.style.width = "3px";//这里可以设置，数值越大，那么鼠标就不用那么靠近最左侧就可以呼出菜单
    
13.     readmore.style.height = value+100+'px';
    
14.     readmore.style.zIndex = '9';
    
15.     readmore.style.position = "absolute";
    
16.     readmore.style.display = "block";
    
17.     readmore.style.left = '0px';
    
18.     readmore.style.top = '0px';
    
19.     readmore.style.background = 'rgba(5,15,55,0)';
    
20.     readmore.onmouseover = function () {
    
21.         $("[fgcname='treebar']").animate({ left: "0px", width: "200px" }, 500);
    
22.     };
    
23.     $("[fgcname='treebar']").after(readmore);
    
24. }

复制代码

我谢老板还是我谢老板~没错

感谢支持～!

哇。。。正好需要这个

哇。。。正好需要这个

谢厅威武