侧边菜单栏的一种处理方式（新）
本帖最后由 willning 于 2022-8-15 15:35 编辑重要提示
活字格在V8.0中，活字格提供“设置行列布局命令”，通过设置特定列“可见/不可见”，可直接解决该问题
帮助文档
此外，“PC组件包——Element Plus”的EL-导航菜单，内建有折叠功能，也可直接解决该问题
下载 & 文档 效果展示
============以下为旧版本的解决方案，适用于V7.0 Update 1及更早期版本============
各位大佬， 不知道各位小伙伴在开发的过程中有没有过这样的烦恼。因为开发设备的不同，导致我们基本上只能按照720p的屏幕的像素点来进行设计，然后再设置双向拉伸来适配高分辨率的设备（如果按照高分屏开发，在低分辨率的屏幕上的体验极差），鉴于此，屏幕资源就显得额外的重要，每一个列表里面的字段我们都想尽可能的把宽度留宽一点，或者尽可能多的塞进多一些字段。但是，有很多系统为了操作方便，都会在母版页的左边放上一个菜单栏，就像这样：
这样咱们每一个页面就都损失了左边的一大块区域。于是借鉴其他网站的处理方式就是咱们把这个菜单栏隐藏起来，鼠标滑倒左边时呼出菜单，鼠标移出的时候隐藏菜单，设置好的效果就像这样：
在活字格中，做到这样的效果也不是很难，具体步骤如下：
1、在母版页中，在占位区的左边，划一块区域出来放置咱们的菜单，把菜单单元格的名字设置为"treebar"，当然你也可以设置其他的名字。并把这些列设置为隐藏
2、在活字格设置页面，添加js文件/并且设定母版页和页面均水平拉伸（如果工程不设置拉伸，那么我认为屏幕也不会不够用）
js文件在工程附件中。
正常情况应该就可以了，如果有不适合自己的地方，可以在js文件中更改代码，代码注释如下：
//如果在页面中没有以treebar命名，那么要把这里所有的treebar改位你的命名。
setTimeout(treebarfct, 2000);//设置延时，建议不更改，第一次启动页面时需要等待2s才能呼出菜单
function treebarfct() {
$("").css("display", "block");
$("").css("z-index", "999");
$("").mouseleave(function () {
$("").animate({ left: "0px", width: "0px" }, 500);
});
var value = parseFloat($("").height());
var readmore = document.createElement('div');
readmore.setAttribute('id', 'toucharea');
readmore.style.width = "3px";//这里可以设置，数值越大，那么鼠标就不用那么靠近最左侧就可以呼出菜单
readmore.style.height = value+100+'px';
readmore.style.zIndex = '9';
readmore.style.position = "absolute";
readmore.style.display = "block";
readmore.style.left = '0px';
readmore.style.top = '0px';
readmore.style.background = 'rgba(5,15,55,0)';
readmore.onmouseover = function () {
$("").animate({ left: "0px", width: "200px" }, 500);
};
$("").after(readmore);
}
我谢老板还是我谢老板~没错 :hjyzw: :kiss: :hjyzw::hjyzw: 感谢支持～! 哇。。。正好需要这个 哇。。。正好需要这个 谢厅威武 :):):):)
页:
[1]
2