进去的页面这个样子，其中可以左右，上下移动，进行拖拽，也可以点击进行页面的隐藏
在菜单这里加了个鼠标移入移出功能，页面是这样
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>home</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
html {
width: 100%;
height: 100%;
}
/* 头部--导航栏 */
.home_top {
width: 100%;
height: 60px;
position: absolute;
background-color: rgb(163, 221, 221, .5);
}
.imgDiv {
width: 250px;
height: 60px;
line-height: 60px;
margin-left: 20px;
}
.imgDiv img {
width: 100%;
height: 100%;
}
.totalButton {
width: 40px;
height: 40px;
border-radius: 50%;
color: white;
font-size: 34px;
font-weight: 100;
line-height: 35px;
text-align: center;
background-color: rgb(64, 150, 209);
position: relative;
top: -50px;
left: 250px;
z-index: 100;
}
/* 中部内容区 */
.home_foot{
width: 100%;
height: 91.6%;
position: absolute;
top:60px;
}
.box {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
display: flex;
}
.left {
width: 20%;
height: 100%;
flex: 1;
overflow: hidden;
background-color: pink;
}
.line {
width: 10px;
background: lightblue;
cursor: col-resize;
}
.line a {
position: absolute;
top: 44%;
display: block;
cursor: pointer;
width: 10px;
height: 100px;
line-height: 100px;
text-align: center;
color: white;
background-color: #666;
}
.right {
position: relative;
width: 80%;
overflow: hidden;
}
.right div {
position: absolute;
width: 100%;
}
.top {
background: green;
height: 100%;
overflow: hidden;
}
.bottom {
height: 100%;
overflow: hidden;
background: yellow;
top: 60%;
margin-top: 10px;
}
.line_2 {
top: 60%;
height: 10px;
overflow: hidden;
background: lightblue;
cursor: row-resize;
display: flex;
justify-content: center;
align-items: center;
}
.line_2 span{
display: block;
height: 10px;
width: 10px;
}
.line1_2, .line1_3{
cursor: pointer;
display: block;
width: 100px;
height: 10px;
line-height: 10px;
text-align: center;
color: white;
background-color: #666;
}
/* 菜单选项 --------------------------------------------------------------------------------- */
.meue {
position: absolute;
top: 50px;
left: 20px;
width: 870px;
height: 420px;
z-index: 100;
display: none;
}
.meue_top {
width: 100%;
height: 30px;
}
.meue_top ul {
width: 100%;
}
.meue_top ul li {
float: left;
color: white;
font-size: 14px;
width: 145px;
text-align: center;
line-height: 30px;
background-color: rgb(64, 150, 209);
}
.meue_foot {
width: 100%;
height: 390px;
background-color: antiquewhite;
}
.meue_foot .ulTags {
float: left;
width: 144px;
height: 100%;
text-align: center;
border-right: 1px solid rgb(64, 150, 209);
}
.meue_foot .ulTags li {
cursor: pointer;
padding: 10px 0;
font-size: 14px;
margin-left: 25px;
display: flex;
justify-content: flex-start;
align-items: flex-start;
}
.meue_foot .ulTags li span {
display: block;
position: relative;
left: -10px;
}
/* 菜单选项 end ---------------------------------------------------------------------------------*/
</style>
</head>
<body>
<div>
<div class="home_top">
<div class="imgDiv">
<img src="img/head.png" />
</div>
<div class="totalButton" onmousemove="Move()" onmouseout="Out()">+</div>
</div>
<div class="home_foot">
<div class="box">
<div class="left"></div>
<!-- 左右的拖拽边 -->
<div class="line">
<a class="line1"><</a>
</div>
<div class="right">
<div class="top"></div>
<div class="bottom"></div>
<!-- 上下的拖拽边 -->
<div class="line_2">
<a class="line1_2">⋁</a>
<span></span>
<a class="line1_3">⋀</a>
</div>
</div>
</div>
</div>
</div>
<!-- 菜单选项 -->
<div class="meue" onmousemove="Move()" onmouseout="Out()">
<div class="meue_top">
<ul>
<li>监控中心</li>
<li>查询中心</li>
<li>管理中心</li>
<li>系统中心</li>
<li>大数据中心</li>
<li>运营中心</li>
</ul>
</div>
<div class="meue_foot">
<div class="ulTags">
<ul>
<li><span>😎</span>实时定位</li>
<li><span>😂</span>轨迹回放</li>
<li><span>😋</span>多车轨迹</li>
<li><span>😆</span>分组监控</li>
<li><span>😅</span>区域监控</li>
<li><span>😄</span>实时视频</li>
<li><span>😃</span>录像回放</li>
<li><span>😍</span>视频轮询</li>
<li><span>💯</span>录像文件</li>
<li><span>☎</span>指令下发</li>
</ul>
</div>
<div class="ulTags">
<ul>
<li><span>👑</span>报表查询</li>
<li><span>✌</span>照片查询</li>
<li><span>✋</span>监控台账</li>
<li><span>👌</span>主动安全</li>
<li><span>👍</span>定点查车</li>
<li><span>👋</span>三方监管</li>
</ul>
</div>
<div class="ulTags">
<ul>
<li><span>💋</span>信息管理</li>
<li><span>👊</span>车辆管理</li>
<li><span>👏</span>标注管理</li>
<li><span>✍</span>区域管理</li>
<li><span>👣</span>规则管理</li>
<li><span>👀</span>费用管理</li>
<li><span>👂</span>通知管理</li>
<li><span>👃</span>服务管理</li>
<li><span>👅</span>查岗企业</li>
<li><span>👄</span>终端升级</li>
</ul>
</div>
<div class="ulTags">
<ul>
<li><span>💍</span>公司设置</li>
<li><span>🌂</span>账号管理</li>
<li><span>⚽</span>日志查询</li>
<li><span>⚾</span>在线用户</li>
<li><span>🎮</span>操作指引</li>
<li><span>🎲</span>设备分析</li>
<li><span>🎷</span>数据字典</li>
</ul>
</div>
<div class="ulTags">
<ul>
<li><span>🎸</span>整体分析</li>
<li><span>🎺</span>大屏展示</li>
</ul>
</div>
<div class="ulTags">
<ul>
<li><span>🎻</span>收费管理</li>
<li><span>🚲</span>安装证明</li>
<li><span>💙</span>安装维修</li>
<li><span>⏰</span>保险管理</li>
<li><span>💰</span>证件管理</li>
</ul>
</div>
</div>
</div>
<!-- 菜单选项的点击事件 -->
<script>
let ulTags = document.getElementsByClassName('ulTags');
let lis;
for (let i = 0; i < ulTags.length; i++) {
lis = ulTags[i].getElementsByTagName('li');
for (let j = 0; j < lis.length; j++) {
lis[j].onclick = function () {
console.log(i, j);
}
}
}
</script>
<!-- 菜单选项的显示与隐藏 -->
<script>
let totalButton = document.querySelector('.totalButton');
let meue = document.querySelector('.meue');
function Move() {
meue.style.display = 'block';
}
function Out() {
meue.style.display = 'none';
}
</script>
<!-- 左右边的拖拽 -->
<script>
function $(id) {
return document.getElementsByClassName(id)[0];
}
var oBox = $("box"),
oLeft = $("left"),
oRight = $("right"),
oLine = $("line"),
oLine1 = $("line1");
var flag = true;
var wid = 0;
// 左右两边的可拖拽区域
oLine.onmousedown = function (e) {
var disX = (e || event).clientX;
var owidth = oBox.clientWidth - oLine.offsetLeft;
document.onmousemove = function (e) {
var iT = owidth - ((e || event).clientX - disX);
var e = e || window.event;
var maxT = oBox.clientWidth - oLine.offsetWidth;
oLine.style.margin = 0;
iT < 30 && (iT = 30);
iT > maxT && (iT = maxT);
wid = iT;
oRight.style.width = iT + "px";
return false
};
document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
oLine.releaseCapture && oLine.releaseCapture()
};
oLine.setCapture && oLine.setCapture();
return false
};
// 左右两边的拖拽条
oLine1.onclick = function () {
let wLeft = oLeft.offsetWidth;
let wRight = oRight.offsetWidth;
if (flag) {
oRight.style.width = wRight + wLeft + 'px';
oLine1.innerHTML = '>'; // 大于号
} else {
oRight.style.width = 80 + '%';
oLine1.innerHTML = '<'; // 小于号
}
flag = !flag;
}
</script>
<!-- 上下边的拖拽 -->
<script>
var iBox = $("right"),
iTop = $("top"),
iBottom = $("bottom"),
iLine = $("line_2"),
iLine1 = $("line1_2");
iLine2 = $("line1_3");
var flag_1 = true;
var wid_1 = 0;
// 上下两边的可拖拽区域
iLine.onmousedown = function (e) {
var disY = (e || event).clientY;
iLine.top = iLine.offsetTop;
document.onmousemove = function (e) {
var iT = iLine.top + ((e || event).clientY - disY);
var maxT = iBox.clientHeight - iLine.offsetHeight;
iLine.style.margin = 0;
iT < 0 && (iT = 0);
iT > maxT && (iT = maxT);
iLine.style.top = iBottom.style.top = iT + "px";
return false
};
document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
iLine.releaseCapture && iLine.releaseCapture()
};
iLine.setCapture && iLine.setCapture();
return false
};
// 上边的图标点击事件
iLine1.onclick = function () {
if (flag_1) {
iBottom.style.top = 98.5 + '%';
iLine.style.top = 98.5 + '%';
iLine1.innerHTML = '⋀';
iLine2.style.display = 'none';
} else {
iBottom.style.top = 60 + '%';
iBottom.style.marginTop = 10 + 'px';
iLine.style.top = 60 + '%';
iLine1.innerHTML = '⋁';
iLine2.style.display = 'block';
}
flag_1 = !flag_1;
}
// 下边的图标点击事件
iLine2.onclick = function () {
if (flag_1) {
iBottom.style.top = 0 + '%';
iLine.style.top = 0 + '%';
iLine2.innerHTML = '⋁';
iLine1.style.display = 'none';
} else {
iBottom.style.top = 60 + '%';
iLine.style.top = 60 + '%';
iLine2.innerHTML = '⋀';
iLine1.style.display = 'block';
}
flag_1 = !flag_1;
}
</script>
</body>
</html>
