JS实现网页页面的框架（demo）

采用JS实现网页页面的框架

采用的技术点有html，css，JS，jQuery

成品：

HTML：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="./css/home.css">
		<link rel="stylesheet" href="./css/aaaaaaa.css">
		
		<script src="js/jquery-3.7.0.js"></script>
	</head>
	<body>
		<!-- 注释的东西到时候可以添加导航栏 -->
		<div class="frame">
			<div class="frame_left">
				<!-- 头部一会要换掉 -->
				<div class="frame_left_title">
					<img src="./img/bcb1ecb0-f75d-4ff9-8fde-c0213535183d.png" alt="">
					<p class="left_show">礼盒商城</p>
				</div>
				<div class="frame_list">


					<div class="frame_item">
						<div class="frame_item_prent" onclick="listOpen(event)">
							<div>
								<img src="./img/123.png" alt="">
								<p class="left_show">账号管理</p>
							</div>
							<img class="left_show" src="./img/向上箭头.png" alt="">
						</div>
						<div class="frame_item_child">


							<div class="frame_child_item">
								<img src="./img/123.png" alt="">
								<p>人员管理</p>
							</div>
							<div class="frame_child_item">
								<img src="./img/123.png" alt="">
								<p>人员管理</p>
							</div>
							<div class="frame_child_item">
								<img src="./img/123.png" alt="">
								<p>人员管理</p>
							</div>


						</div>
					</div>


				</div>

			</div>
			<div class="frame_top">
				<div class="frame_info">
					<div class="frame_info_i">
						<img src="./img/展开列.png" alt="" onclick="isToggle()">
						<p>数据统计</p>
					</div>

					<div class="frame_info_in">
						<div class="frame_fr">
							<img src="./img/搜索 (2).png" alt="">
							<img src="./img/文字.png" alt="">
							<img src="./img/日间模式.png" alt="">
							<img src="./img/设置.png" alt="">
							<div class="zzzz">
								<div>admin</div>
								<img src="./img/0775639c-c82c-4a29-937f-d2a3bae5151a.png" alt="" width="40px"
									height="40px" id="touxiang">

								<button id="quit">退出登录</button>
							</div>
						</div>
					</div>


				</div>


				<div class="frame_nav">
					<div class="nav_home" onclick="isHref('数据统计','/','')">数据统计</div>
					<div class="nav_list">
						<!-- <div class="nav_item">
							<p>页面</p>
							<img src="./img/删除.png" alt="">
						</div>
						<div class="nav_item">
							<p>页面</p>
							<img src="./img/删除.png" alt="">
						</div>
						<div class="nav_item">
							<p>页面</p>
							<img src="./img/删除.png" alt="">
						</div> -->
					</div>
				</div>

			</div>
			<div class="frame_content">

				

			
				
			</div>
		</div>

		<!-- 退出登录 -->
		<div class="box_x" style="display: none;">
			<div id="xiugai"
				style="background-color: #000;opacity: 40%;width: 100%;height: 100%;position: fixed;top: 0;left: 0; z-index: 5;">
			</div>
			<div class="hint">
				<div class="hint-h">
					<p>提示操作</p>
				</div>
				<div class="hint-i">
					<img src="./img/307感叹号-圆框.png" alt="" width="20px" height="20px">
					<p>您确定要退出运营管理公司?</p>
				</div>
				<div class="hint-n">
					<button id="quxiao">取消</button>
					<button id="queding">确定</button>
				</div>
			</div>
		</div>
		<script src="js/home.js"></script>

	</body>
</html>

CSS：

/* 注释的东西到时候可以添加导航栏 */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.frame {
	width: 100%;
	height: 100vh;
	overflow: hidden;
	position: relative;
}

.frame_left {
	width: 220px;
	height: 100%;
	background-color: #eeeeee;
	overflow-y: scroll;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	scrollbar-width: none;
	-ms-overflow-style: none;
	transition: all 1s;
}

.frame_left ::-webkit-scrollbar {
	display: none;
}

.frame_left_title {
	width: 240px;
	height: 60px;
	display: flex;
	/* justify-content: center; */
	align-items: center;
}

.frame_left_title img {
	width: 60px;
	/* height: 60px; */
}

.frame_left_title p {
	font-size: 20px;
	margin-left: 10px;
}

.frame_list {
	width: 100%;
	width: 220px;
}

.frame_item_prent {
	width: 100%;
	height: 70px;
	display: flex;
	justify-content: space-between;
	padding: 0 20px;
	align-items: center;
}

.frame_item_prent:hover {
	background-color: #CCCCCC;
	color: #fff;
}

.frame_item_prent div {
	display: flex;
}

.frame_item_prent img {
	width: 30px;

}

.frame_item_prent p {
	line-height: 30px;
	margin-left: 20PX;
}

.frame_item_prent>img {
	width: 18px;
	transform: rotate(180deg);
}

.frame_item {
	width: 100%;
	position: relative;
}

.frame_item_hover {
	display: none;
	position: absolute;
	z-index: 10;
	top: 0px;
	left: 70px;
	background-color: #fff;
	box-shadow: 0px 2px 5px 2px #b5b5b5;

}

.frame_item_hover .frame_child_item {
	padding: 0px 20px;
}

.frame_child_item:hover {
	background-color: #cccccc;
	color: #3796FF;
}

.frame_item_child {
	width: 100%;
	display: none;
	white-space: nowrap;
}

.frame_child_item {
	width: 100%;
	padding-left: 40px;
	height: 50px;
	display: flex;
	align-items: center;
}

.frame_child_item img {
	width: 30px;
	height: 30px;
}

.frame_child_item p {
	margin-left: 10px;
	white-space: nowrap;
}

.frame_top {
	width: calc(100% - 220px);
	height: 50px;
	/* line-height: 60px; */
	background-color: #EEEEEE;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 5;
	transition: all 1s;
	/* 	display: flex;
	justify-content: space-between; */
}

.frame_info {
	width: 100%;
	height: 50px;
	/* background-color: #eeeeee; */
	display: flex;
	align-items: center;
	justify-content: space-between;
	/* border-bottom: 1px solid #DCDFE6; */
	/* position: absolute; */
}

.frame_info img {
	width: 25px;
	height: 25px;
	margin: 10px 20px;
}

.frame_info_i {
	width: 160px;
	display: flex;
	/* justify-content: space-between; */
	align-items: center;
}


/* 
.frame_fr{
	display: flex;
	justify-content: space-between;
} */
.frame_info_in {}


.frame_fr {
	padding-right: 1%;
	display: flex;
	width: 450px;
	justify-content: space-evenly;
	align-items: center;

}


/* 退出弹窗 */
.zzzz {
	width: 100px;
	display: flex;
	justify-content: space-between;
	position: relative;
	align-items: center;
}


#quit {
	background-color: white;
	box-shadow: 5px 5px 20px #2c3e50;
	width: 90px;
	height: 35px;
	border: 1px solid #e2e2e2;
	opacity: 0;
	transition: 0.5s;
	top: 50px;
	position: absolute;
	right: 5px;
	z-index: 4;
	border-radius: 5px;
}

/* 提示弹窗 退出登录 批量删除 */
.hint {
	background-color: white;
	width: 450px;
	height: 150px;
	position: fixed;
	top: 45%;
	left: 40%;
	border-radius: 10px;
	z-index: 6;
}

.hint-h p {
	padding: 10px;
	font-size: 22px;
}

.hint-i {
	display: flex;
	padding: 10px;
}

.hint-i p {
	margin-left: 15px;

}

.hint-n {
	padding: 10px;
	margin-left: 60%;
}

.hint-n button {
	width: 72px;
	height: 35px;
	border-radius: 5px;
	border: 1px solid #e2e2e2;
}

#queding {
	background-color: #409EFF;
	color: white;

}

.frame_nav {
	/* top: 60px; */
	width: 100%;
	height: 50px;
	display: flex;
	/* line-height: 50px; */
	/* position: fixed; */
	/* padding: 0 20px; */
	/* margin-top: 15px; */
	background-color: #eeeeee;
}

.frame_content {
	width: calc(100% - 220px);
	height: calc(100% - 100px);
	/* 原本为100高度,现在为50,删除了导航栏的高度 */
	background-color: #F2F3F5;
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: 1;
	padding: 20px;
	transition: all 1s;
	/* overflow: scroll; */
}

/* 面包屑,头顶导航栏 */

.nav_list {
	/* width: 100%; */
	height: 50px;
	padding: 5px 0;
	display: flex;
}

.nav_item {
	padding: 0 10px;
	display: flex;
	align-items: center;
	margin-right: 10px;
	background-color: #ccc;

}

.nav_item img {
	width: 20px;
}

.nav_item p {
	/* margin-right: 8px; */
}

.nav_home {
	padding: 0 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: 10px;
	background-color: #ccc;
	height: 40px;
	line-height: 40px;
	margin: 5px 5px;
}

.nav_home img {
	width: 20px;
}

.nav_home p {
	margin-right: 8px;
}

.active {
	background-color: #fff;
	color: #3796FF;
}

JS：

// 所有的名称是下划线还是横线要注意
// 二级列表展开事件
function listOpen(e) {
	$(e.target).next(".frame_item_child").toggle(500);
}

// 菜单折叠事件
function isToggle() {
	if ($(".frame_left").width() < 220) {
		$(".frame_left").css('width', '220px');
		$(".frame_top").css('width', 'calc(100% - 220px)');
		$(".frame_content").css('width', 'calc(100% - 220px)');
		$(".left_show").show()
		$(".frame_left").css({
			'z-index': '1',
			'overflow-y': 'scroll'
		});
		$(".frame_left_title").css('width', '220px');
		$(".frame_item").css('width', '220px');
		$(".frame_item_hover").hide()
		$(".frame_item_hover").attr('class', 'frame_item_child');
	} else {
		$(".frame_left").css('width', '80px');
		$(".frame_top").css('width', 'calc(100% - 80px)');
		$(".frame_content").css('width', 'calc(100% - 80px)');
		$(".left_show").hide();
		$(".frame_left").css({
			'z-index': '9',
			'overflow-y': 'visible'
		});
		$(".frame_left_title").css('width', '80px');
		$(".frame_item").css('width', '80px');
		$(".frame_item_child").hide();
		$(".frame_item_child").attr('class', 'frame_item_hover');
	}
}

// 这是一个登录请求的接口,请求成功后返回一个树形菜单的数组,下面需要用到
let list = []
$.ajax({
	type: "POST",
	url: 地址
	data: {
		需要请求的参数
	},
	success: (res) => {
		console.log(res);
		list = res.data.menu;
		console.log(list);
		renders()
	}
})

function renders() {
	let name = sessionStorage.getItem("name") || '';
	let parent = sessionStorage.getItem("parent") || '';
	console.log(list);
	let str = '';
	for (let i = 0; i < list.length; i++) {
		if (list[i].children && list[i].children.length > 1) {
			str += `
				<div class="frame_item">
					<div class="frame_item_prent ${list[i].meta.locale == name && parent != name ? 'active' : ''}" onclick="listOpen(event)">
						<div>
							<img src="./img/123.png" alt="">
							<p class="left_show">${list[i].meta.locale}</p>
						</div>
						<img class="left_show" src="./img/向上箭头.png" alt="">
					</div>
					<div class="frame_item_child" style="display:${parent == list[i].meta.locale ? 'block' : 'none'}">
			`;

			for (let k = 0; k < list[i].children.length; k++) {
				str += `
					<div class="frame_child_item ${list[i].children[k].meta.locale == name ? 'active' : ''}" onclick="isHref('${list[i].children[k].meta.locale}','${list[i].children[k].meta.path}','${list[i].meta.locale}')">
						<img src="./img/123.png" alt="">
						<p>${list[i].children[k].meta.locale}</p>
					</div>
				`;
			}

			str += `</div>
					</div>`;
		} else {
			str += `
				<div class="frame_item" onclick="isHref('${list[i].meta.locale}','${list[i].meta.path}','${list[i].meta.locale}')">
					<div class="frame_item_prent ${list[i].meta.locale == name ? 'active' : ''}">
						<div>
							<img src="./img/123.png" alt="">
							<p class="left_show">${list[i].meta.locale}</p>
						</div>
					</div>
				</div>
				<div class="frame_item_child"></div>
			`;
		}
	}

	$('.frame_list').html(str);
	a ()
}

function a (){
	for (let i = 0; i < $('.frame_item').length; i++) {
		$('.frame_item').eq(i).on('mouseover', function() {
			$('.frame_item_hover').eq(i).show()
		})
		$('.frame_item').eq(i).on('mouseout', function() {
			$('.frame_item_hover').eq(i).hide()
		})
	}
}

function isHref(name,path,parent){
	if (path == '/') {
		location.href = './home.html';
		return
	}
	let nav = JSON.parse(sessionStorage.getItem('nav')) || [];
	
	let status = false;
	sessionStorage.setItem("name", name);
	sessionStorage.setItem("parent", parent);
	for (let i = 0; i < nav.length; i++) {
		if (nav[i].name == name) {
			status = true;
			break;
		}
	}
	if (!status) {
		nav.push({
			name: name,
			path: path,
			parent: parent
		})
		sessionStorage.setItem("nav", JSON.stringify(nav));
	}
	location.href = '.' + path + '.html';
	console.log(name);
	console.log(path);
}


renderNav()

function renderNav() {
	let name = sessionStorage.getItem("name") || '';
	let nav = JSON.parse(sessionStorage.getItem('nav')) || [];
	let str = '';
	for (let i = 0; i < nav.length; i++) {
		str += `
		<div class="nav_item ${name == nav[i].name ? 'active' : ''}">
			<p onclick="isHref('${nav[i].name}','${nav[i].path}','${nav[i].parent}')">${nav[i].name}</p>
			<img src="./img/删除.png" alt="" onclick="del(${i})">
		</div>
		`;
	}
	document.getElementsByClassName("nav_list")[0].innerHTML = str;

	if (name == '数据统计') {
		$(".nav_home").addClass("active");
	} else {
		$(".nav_home").removeClass("active");
	}
}

// 删除
function del(i) {
	let nav = JSON.parse(sessionStorage.getItem('nav')) || [];
	nav.splice(i, 1);
	sessionStorage.setItem("nav", JSON.stringify(nav));

	let name, parent;

	if (nav[i - 1]) {
		name = nav[i - 1].name;
		parent = nav[i - 1].parent;
	} else if (nav[0]) {
		name = nav[0].name;
		parent = nav[0].parent;
	} else {
		name = '数据统计';
		parent = '';
	}

	sessionStorage.setItem("name", name);
	sessionStorage.setItem("parent", parent);

	renderNav();
	renders();
}


// 退出登录、切换登录
let quit = document.getElementById("quit");
let zzzz = document.getElementsByClassName("zzzz")[0];
let box = document.getElementsByClassName("box_x")[0];
// 鼠标放上去显示退出登录
zzzz.addEventListener("mouseenter", () => {
	quit.style.opacity = "1"
})
zzzz.addEventListener("mouseleave", () => {
	quit.style.opacity = "0"
})

// 退出登录/切换用户
quit.addEventListener("click", () => {
	box.style.display = "block"
})

quxiao.addEventListener("click", () => {
	box.style.display = "none"
})

xiugai.addEventListener("click", () => {
	box.style.display = "none"
})

queding.addEventListener("click", () => {
	sessionStorage.removeItem('nav')
	sessionStorage.removeItem('info')
	location.href = './index.html'
})