做一个简单的页面布局
web-layout.png
基本结构如下
<body>
<!-- svg图标 -->
<div style="display: none;">
<svg>
<symbol id="menu" viewBox="0 0 1024 1024">
<path d="M376.832 474.112H130.048c-33.792 0-61.44-27.648-61.44-61.44V165.888c0-33.792 27.648-61.44 61.44-61.44h247.296c33.792 0 61.44 27.648 61.44 61.44v247.296c-0.512 33.792-27.648 60.928-61.952 60.928zM130.048 165.888v247.296h247.296V165.888H130.048zM739.84 525.312c-16.384 0-31.744-6.144-43.52-17.92L521.728 332.8c-11.776-11.776-17.92-27.136-17.92-43.52s6.144-31.744 17.92-43.52L696.32 71.168c11.776-11.776 27.136-17.92 43.52-17.92s31.744 6.144 43.52 17.92L957.952 245.76c11.776 11.776 17.92 27.136 17.92 43.52s-6.144 31.744-17.92 43.52L783.36 507.392c-11.776 11.776-27.136 17.92-43.52 17.92z m0-411.136l-174.592 174.592 174.592 174.592 174.592-174.592-174.592-174.592zM376.832 960.512H130.048c-33.792 0-61.44-27.648-61.44-61.44v-247.296c0-33.792 27.648-61.44 61.44-61.44h247.296c33.792 0 61.44 27.648 61.44 61.44v247.296c-0.512 34.304-27.648 61.44-61.952 61.44z m-246.784-308.224v247.296h247.296v-247.296H130.048zM863.232 960.512h-247.296c-33.792 0-61.44-27.648-61.44-61.44v-247.296c0-33.792 27.648-61.44 61.44-61.44h247.296c33.792 0 61.44 27.648 61.44 61.44v247.296c0 34.304-27.136 61.44-61.44 61.44z m-246.784-308.224v247.296h247.296v-247.296h-247.296z" p-id="3130"/>
</symbol>
<symbol id="arrow" viewBox="0 0 1024 1024">
<path d="M310.613333 393.386667a32 32 0 0 0-45.226666 45.226666l213.333333 213.333334a32 32 0 0 0 45.226667 0l213.333333-213.333334a32 32 0 0 0-45.226667-45.226666l-190.72 190.72-190.72-190.72z" p-id="4027"/>
</symbol>
</svg>
</div>
<div class="wrapper">
<!-- 侧边栏 -->
<nav id="nav">
<header>
头部
</header>
<!-- 菜单 -->
<ul class="nav-menu">
<li>
<div class="nav-menu-item">
<i class="icon"><svg class="svg"><use xlink:href="#menu"/></svg></i>
<span class="title">菜单1111abcdefg</span>
<i class="icon"><svg class="svg"><use xlink:href="#arrow"/></svg></i>
</div>
<ul class="nav-menu">
<li>
<div class="nav-menu-item">
<i class="icon"><svg class="svg"><use xlink:href="#menu"/></svg></i>
<span class="title">子菜单1</span>
<i class="icon"><svg class="svg"><use xlink:href="#arrow"/></svg></i>
</div>
</li>
<li>
<div class="nav-menu-item">
<i class="icon"><svg class="svg"><use xlink:href="#menu"/></svg></i>
<span class="title">子菜单1</span>
<i class="icon"><svg class="svg"><use xlink:href="#arrow"/></svg></i>
</div>
</li>
</ul>
</li>
<li>
<div class="nav-menu-item">
<i class="icon"><svg class="svg"><use xlink:href="#menu"/></svg></i>
<span class="title">菜单2</span>
<i class="icon"><svg class="svg"><use xlink:href="#arrow"/></svg></i>
</div>
</li>
<li>
<div class="nav-menu-item">
<i class="icon iconfont icon-duigou"></i>
<span class="title">菜单2</span>
<i class="icon"><svg class="svg"><use xlink:href="#arrow"/></svg></i>
</div>
</li>
</ul>
</nav>
<!-- 内容 -->
<main>
<!-- 头部 -->
<header>
头部 <button id="shrink">折叠</button>
</header>
<!-- 内容 -->
<section>
<div>内容</div>
<div>内容</div>
</section>
<!-- 底部 -->
<footer>
底部
</footer>
</main>
</div>
</body>
css代码部分
<!-- iconfont 阿里适量图标 -->
<style type="text/css">
@font-face {font-family: "iconfont";
src: url('//at.alicdn.com/t/font_2047158_bw3wzeqstl9.eot?t=1599211482334'); /* IE9 */
src: url('//at.alicdn.com/t/font_2047158_bw3wzeqstl9.eot?t=1599211482334#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAK4AAsAAAAABmAAAAJsAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcApsgQMBNgIkAwgLBgAEIAWEbQcwG6kFyB6SJI8hRIhMQ5WCAhIieJr7nLfZ/MsRgeeCArRAqsrXSUIHLOtZV+f/1to/MapG5hHNvK7Nis292TlcEkRI3jVkSC4ZT2QBV6UBl+NfQA/SOqBc5pi2MMA4oID2xiiyAoos8FTEO5HuIO8TaDEhheukrqUHgjIsC8R9TeEhWIjKslKohEbD3sxcq6jScjrFg+jz8c9OBEFSFoCWC/dqJaj4WUolxVQ9pcDu5dxQDlFgDcjElcbsOR6hsB4tWa8ZcKzG4GdpXQd2cVSLUP461LeBMV76TDJP/qjfTCCjxCiwOSlEGWiNj97oEf7hoZ/GfO/+/FB87fa25QP7bc9uL1zrGU6rr6q8jH3LXaIbxwdnGnuqas93E5T++tLO6qTR7sQ16az+73R08vTjYfPrDBUAtSEv/QkE71bW3693lvyvWr0AP4aWniP5MD/VXn3B32nLH9SHZZ6qQCZloEMqFJNRvrOKeLEaUAOCPd6nGvtvpRgq/TfkbzKeoVCZIzKzhlKrPTRU9tFiVf3hVr0oj8ghYMU8h9BlD0mHlyh0OSMy84bSgF80dIUHLa5F9JmtFkKLqqaYZ1hCwjDSRGLLzMGi4sYurERMnuYVEacPU0dLoMy0jHKhHtuYLrHBGVCyGJORTImF6rjHsGkSFKZExyJLUxkLF6Wny00vShOJBVGOURiPwSSIYBiiERE2ORjMRFXe3wVTRJh4tKOnJdwHoxza6EimNBkDiHqtPajnUZ5xDFBkYRgZIqMIC1LHzcJMJgIJN8/SYSImjTohHVYknfrJQ7Vp2+utvzsELWBKQdM80LgT0RQSAQAA') format('woff2'),
url('//at.alicdn.com/t/font_2047158_bw3wzeqstl9.woff?t=1599211482334') format('woff'),
url('//at.alicdn.com/t/font_2047158_bw3wzeqstl9.ttf?t=1599211482334') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('//at.alicdn.com/t/font_2047158_bw3wzeqstl9.svg?t=1599211482334#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-duigou:before {
content: "\e63d";
}
</style>
<!-- 页面布局 -->
<style type="text/css">
/* =============================================== 页面布局样式-begin */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
}
/* 包装整个页面 注意字体高度超过标签高度会出现滚动条 */
.wrapper {
height: 100%;
display: flex;
}
/* 头部 */
header {
height: 40px;
line-height: 40px;
border: 1px solid orange;
background-color: orange;
}
/* 左侧边菜单 */
nav {
width: 200px;
min-width: 200px;
border: 1px solid red;
background-color: #1D1E23;
display: flex;
flex-direction: column;
}
nav > ul {
overflow: auto;
flex: 1;
}
/* 菜单头部和菜单项字体居中 */
nav > header {
text-align: center;
}
/* 菜单项 */
.nav-menu > li > .nav-menu-item {
padding: 14px 20px;
cursor: pointer;
}
/* 鼠标悬停 菜单项样式 */
.nav-menu > li > .nav-menu-item:hover {
background-color: #101117;
color: white;
}
.nav-menu-item > .title {
display: inline-block;
width: 70px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: #BCBCBD;
}
.nav-menu-item > .icon,
.nav-menu-item > .icon > .svg {
display: inline-block;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
vertical-align: bottom;
color: #BCBCBD;
fill: #BCBCBD;
}
/* 鼠标悬停 菜单项图标样式 */
.nav-menu-item:hover > .title,
.nav-menu-item:hover > .icon > .svg {
color: white;
fill: white;
}
.nav-menu > .active > .nav-menu {
display: block;
background-color: #101117;
}
.nav-menu > li > .nav-menu {
display: none;
}
.nav-menu > .active > .nav-menu-item > .icon:last-child > .svg {
transform: rotate(180deg);
transition: transform .2s ease-in-out
}
.nav-menu > li > .nav-menu-item > .icon:last-child > .svg {
transition: transform .2s ease-in-out
}
/* 主体 */
main {
border: 1px solid blue;
flex: 1;
display: flex;
flex-direction: column;
}
/* 内容 */
section {
flex: 1;
overflow: auto;
}
/* 底部 */
footer {
height: 40px;
border: 1px solid black;
}
/* =============================================== 页面布局样式-end */
/* =============================================== 菜单收缩样式-begin */
/** 把菜单 nav 宽度缩小 */
.nav-mini {
width: 80px;
min-width: 80px;
text-align: center;
}
/** 把菜单子项 li 里的文字和右图标隐藏 */
.nav-mini > ul li .nav-menu-item > span,
.nav-mini > ul li .nav-menu-item > i:last-child {
display: none;
}
/* =============================================== 菜单收缩样式-end */
</style>
js代码部分
<script type="text/javascript">
window.onload = function () {
generateDiv();
generateLi();
init();
}
function init() {
// 点击收缩
let shrink = document.getElementById('shrink');
if (shrink) {
shrink.onclick = function () {
// 给nav标签添加/移除css（收缩css）
let nav = document.getElementById('nav');
let mini = 'nav-mini';
let className = nav.className;
let classNameArray = className.split(/\s/);
// 移除css中的空字符串
classNameArray.forEach((item, index) => {
if (item.replace(/\s/g, '') == '') {
classNameArray.splice(index, 1);
}
});
// 存在添加css就移除，不存在就添加
if (classNameArray.includes(mini)) {
nav.className = className.replace(mini, '');
} else {
let newClassName = classNameArray.concat(mini).join(' ');
nav.className = newClassName;
}
}
}
// 点击菜单项
let navMenu = document.getElementsByClassName('nav-menu')[0];
addClick(navMenu);
}
/** 添加点击事件 */
function addClick(navMenu) {
if (navMenu) {
let menuChildes = navMenu.children;
if (menuChildes.length > 0) {
let array = Array.from(menuChildes);
array.forEach((item) =>{
if (item.nodeName == "LI") {
item.onclick = function (e) {
let className = item.className;
if (className == 'active') {
item.className = '';
} else {
item.className = 'active';
}
let itemChildes = item.children;
if (itemChildes.length > 0) {
let itemArray = Array.from(itemChildes);
itemArray.forEach((child) => {
if (child.nodeName == "UL") {
addClick(child);
}
});
}
// 阻止事件冒泡
e.stopPropagation();
}
}
});
}
}
}
/** 生成测试数据 */
function generateLi() {
let sections = document.getElementsByTagName('ul');
let section0 = sections[0];
for (let i = 0; i < 100; i++) {
let li = '<li>\n' +
' <div class="nav-menu-item">\n' +
' <i class="icon iconfont icon-duigou"></i>\n' +
' <span class="title">菜单'+ (i + 2) +'</span>\n' +
' <i class="icon"><svg class="svg"><use xlink:href="#arrow"/></svg></i>\n' +
' </div>\n' +
' </li>'
section0.insertAdjacentHTML('beforeend', li);
}
}
/** 生成测试数据 */
function generateDiv() {
let sections = document.getElementsByTagName('section');
let section0 = sections[0];
for (let i = 0; i < 100; i++) {
section0.insertAdjacentHTML('beforeend', '<div>内容'+ i +'</div>');
}
}
</script>
下载链接 https://download.csdn.net/download/qq_32856631/12825230
