版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/nzzl54/article/details/89240318
百度搜了一下，基本都是上下收缩二级菜单这些的，但是需求是要整个菜单栏都隐藏收起，只能自己弄了，如果不是要这个功能的就别看了，先上效果图（顺便晒晒我家的荷兰猪~~~）
左侧菜单栏未收起
点击左上的左箭头按钮，左侧菜单收起，有动画效果的，这里只展示结果，具体可以复制代码自己看
效果描述：
1、向左侧慢慢收起，历时500ms，展开也历时500ms
2、左下方有个放视频的地方，鼠标移动到那个区域后才会显示，不需要的自行去掉相关代码即可
3、左边的菜单用的是layui的控件，有需要读者可以自己去看layui的相关文档
4、本文tab切换在另一篇文章，这里主要展示左侧菜单栏隐藏收起代码
代码如下：
1、test-expand-left.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1" />
<title>图纸</title>
<style media="screen">
html,body {height:100%}
</style>
<link rel="stylesheet" href="css/expand-left-style.css"/>
<link rel="stylesheet" href="layui/css/layui.css" />
<script src="jq/jquery.min.js"></script>
<script type="text/javascript" src="layui/layui.js"></script>
</head>
<body>
<div id = "expand-div" onclick="expandFun()">
<img id = "expand-img" style="height: 14px;width: 14px; margin-top: 2.5px;" src="images/left-arrow-hide.png"/>
</div>
<div id = "TreeContent" class = "TreeContentShow">
<!--树形结构-->
<ul id="demo" class = "showAmi">
</ul>
</div>
<div id = "MainContent" class = "MainContentShow">
<!--<div id="NavLeft" style="left:20px;">-->
<div id="NavConTwo" class = "UrlShowField" style="font-size: 20px; background: transparent; color: #999;">
这是一个浮在内容上的连接：
<a href="#">连接</a>
</div>
<div id="NavConOne">
<video id = "video" src="20190412083311.mp4" loop="loop" controls="controls" poster="images/test.JPG" width="100%" height="100%" >
您的浏览器不支持 HTML5 技术。
</video>
</div>
<!-- 定义DOM元素，用于内容展示 -->
<div class='main'>
<div class='model' style="background-image: url(images/bg2.jpg) repeat;">
<img src="images/20190403173530.jpg"/>
</div>
</div>
<script type="text/javascript">
var treeData = [
{
name: '我的邮箱'
,id: 1
,spread: true
,children: [
{
name: 'QQ邮箱'
,id: 21
,spread: true
,children: [
{
name: '收件箱'
,id: 211
,children: [
{
name: '所有未读'
,id: 2111
}, {
name: '置顶邮件'
,id: 2112
}, {
name: '标签邮件'
,id: 2113
}
]
}, {
name: '已发出的邮件'
,id: 212
}, {
name: '垃圾邮件'
,id: 213
}
]
}, {
name: '阿里云邮'
,id: 22
,children: [
{
name: '收件箱'
,id: 221
}, {
name: '已发出的邮件'
,id: 222
}, {
name: '垃圾邮件'
,id: 223
}
]
}
]
}
];
layui.use('tree', function(){
layui.tree({
elem: '#demo' //传入元素选择器
,nodes:treeData
});
});
function expandFun(){
console.log("expandFun");
if($('#demo').css('display') == 'none'){
console.log("没有显示的就显示出来");
$('#expand-img').attr('src','images/left-arrow-hide.png');
$('#demo').removeClass('hideAmi');
$('#demo').addClass('showAmi');
$('#TreeContent').removeClass('TreeContentHide');
$('#TreeContent').addClass('TreeContentShow');
$('#MainContent').removeClass('MainContentHide');
$('#MainContent').addClass('MainContentShow');
$('#NavConTwo').css('padding-left','20px');
$('#NavConTwo').css('left','');
treeDemoFun('block');
}else{
console.log("显示中的就收起来");
$('#expand-img').attr('src','images/right-arrow-show.png');
$('#demo').removeClass('showAmi');
$('#demo').addClass('hideAmi');
$('#TreeContent').removeClass('TreeContentShow');
$('#TreeContent').addClass('TreeContentHide');
$('#MainContent').removeClass('MainContentShow');
$('#MainContent').addClass('MainContentHide');
$('#NavConTwo').css('left','50px');
treeDemoFun('none');
}
}
function treeDemoFun(display){
if(display == 'none'){
setTimeout(function() {
$('#demo').css('display',display);
}, 550);
}else{
$('#demo').css('display',display);
}
}
</script>
</body>
</html>2、expand-left-style.css
.main {
display: flex;
flex-direction: column;
overflow: hidden;
height: 100%;
width: 100%;
position: absolute;
float: left;
background: transparent;
z-index: 1;
}
.button {
margin: 5px auto;
width: 90px;
height: 30px;
background: #11DAB7;
color: #FFFFFF;
border-radius:3px;
border: none;
cursor: pointer;
}
.TreeContentShow{
float: left;
width: 12%;
height: 100%;
margin-top: 25px;
-webkit-transition:width 0.5s;
}
#TreeContent #demo{
height: 100%;
width: 100%;
}
.MainContentShow{
width: 88%;
float: left;
height: 100%;
-webkit-transition:width 0.5s;
}
#NavConOne{
width:300px;
height:225px;
position:absolute;
bottom: 10px;
border:1px solid black;
z-index: 2;
opacity:0;
-webkit-transition:opacity 0.5s;
}
#NavConOne:hover{
opacity:1;
-webkit-transition:opacity 0.5s;
}
.UrlShowField{
width:100%;
height:30px;
top: 5px;
padding-left:20px;
position:absolute;
background: transparent;
z-index: 2;
}
#expand-div {
height:20px;
width:20px;
position:absolute;
text-align:center;
line-height:100%;
font-style:normal;
text-decoration:none;
margin:2px;
vertical-align:text-bottom;
zoom:1;
outline:none;
font-size-adjust:none;
font-stretch:normal;
border-radius:50px;
box-shadow:0px 1px 2px rgba(0,0,0,0.2);
color:#ffffff;
border:0.2px solid #f3f3f3;
background-repeat:repeat;
background-size:auto;
background-origin:padding-box;
background-clip:padding-box;
background: linear-gradient(to bottom, #f3f3f3 0%,#a8a8a8 100%);
z-index: 2;
}
#expand-div:hover {
background: #f3f3f3;
}
.TreeContentHide{
margin-top: 25px;
width: 0%;
float: left;
height: 100%;
-webkit-transition:width 0.5s;
}
.MainContentHide{
width: 100%;
float: left;
height: 100%;
-webkit-transition:width 0.5s;
}
.hideAmi{
opacity:0.1;
-webkit-transition:opacity 0.5s;
}
.showAmi{
opacity:1;
-webkit-transition:opacity 0.5s;
}
#video{
box-shadow:5px 5px 5px #333;
}