HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Leaning</title>
<link rel="stylesheet" href="style.css">
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="header"></div>
<!-- 左边导航栏 -->
<div class="left">
<!-- 左边导航栏容器 -->
<div class="left_container">
<input type="checkbox" id="menu-btn">
<label for="menu-btn">
<i class="fa-solid fa-angle-left"></i>
</label>
<!-- 左边容器标题 -->
<div class="left-menu">
<!-- 侧边菜单题标 -->
<div class="menu-title">
<h1>Menu</h1>
</div>
<!-- 1 -->
<div class="menu-item">
<input type="checkbox" id="menu-item1">
<label for="menu-item1">
<i class="fa-solid fa-house fa-sm"></i>
<span>navigation1</span>
<i class="fa-solid fa-chevron-down fa-sm"></i>
</label>
<div class="menu-content">
<span><a href="#">option1</a></span>
</div>
</div>
<!-- 2 -->
<div class="menu-item">
<input type="checkbox" id="menu-item2">
<label for="menu-item2">
<i class="fa-solid fa-house fa-sm"></i>
<span>navigation2</span>
<i class="fa-solid fa-chevron-down fa-sm"></i>
</label>
<div class="menu-content">
<span><a href="#">option1</a></span>
<span><a href="#">option2</a></span>
</div>
</div>
<!-- 3 -->
<div class="menu-item">
<input type="checkbox" id="menu-item3">
<label for="menu-item3">
<i class="fa-solid fa-house fa-sm"></i>
<span>navigation3</span>
<i class="fa-solid fa-chevron-down fa-sm"></i>
</label>
<div class="menu-content">
<span><a href="#">option1</a></span>
<span><a href="#">option2</a></span>
<span><a href="#">option3</a></span>
</div>
</div>
<div class="set-line"></div>
<!-- 4 -->
<div class="menu-item" id="setting">
<label>
<i class="fa-solid fa-gear fa-sm"></i>
<span>setting</span>
</label>
</div>
</div>
</div>
</div>
<div class="main"></div>
<div class="footer"></div>
</div>
<!-- 遮眼布 -->
<div class="overplay"></div>
<!-- 设置盒子 -->
<div class="setting-box">
<div class="setting">
<h1>设置</h1>
</div>
</div>
</body>
<script src="script.js"></script>
</html>
CSS:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.header{grid-area: header;}
.left{grid-area: left;}
.main{grid-area: main;}
.footer{grid-area: footer;}
a{text-decoration: none;}
input[type='checkbox']{display: none;}
:root{
/* 默认设置 */
--color-default-Black:#000;
--color-default-White:#fff;
/* 过渡时间设置 */
--transition-time-s: .2s;
--transition-time-m: .5s;
--transition-time-l: 1s;
/* 字体设置 */
--font-color-default-hover:#1890ff;
/* 边框半径 */
--border-radius-m: 2px;
/* 背景颜色设置 */
--bg-md-color-Black:#2C3E50;
--bg-md-color-Blue: #00CCFF;
--bg-md-color-Gray:#D0D0D0;
--bg-md-color-White:#fff;
/* 选项设置 */
--option-size:35px;
}
.container{
display: grid;
grid-template-areas:
'header header header header header header'
'left main main main main main'
'left footer footer footer footer footer';
grid-gap: 10px;
grid-template-rows: 70px 428px 85px;
grid-template-columns: 250px 710px;
background-color: skyblue;
transition: var(--transition-time-m);
}
.container > div {
background-color: rgba(255, 255, 255, 0.8);
}
.left_container{
height: 100%;
background-color: var(--bg-md-color-White);
position: relative;
padding: 5px 10px;
letter-spacing: 0.5px;
}
.left_container>label{
position: absolute;
top: 50%;
right: -10px;
width: 20px;
height: 20px;
border-radius: 20px;
box-shadow: 0px 0px 4px 0px var(--color-default-Black);
background-color: var(--bg-md-color-White);
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.left_container>label>i{
font-size: 20px;
letter-spacing: 4.5px;
text-indent: 3px;
font-weight: 900;
transition: transform .2s;
transform: rotate(0deg);
}
.left_container>label:hover{
box-shadow: 0px 0px 2px 0px var(--color-default-Black);
color: var(--font-color-default-hover);
}
.left_container>input#menu-btn:checked+label>i{
transform: rotate(180deg);
}
.left-menu{
font-size: 18px;
width: 230px;
min-height: 100%;
cursor: pointer;
overflow: hidden;
color: var(--color-default-Black);
transition: width var(--transition-time-m);
}
.left-menu .menu-title{
text-align: center;
margin-bottom: 10px;
}
.menu-item>label{
position: relative;
width: 100%;
height: 50px;
border-radius: 2px;
display: flex;
align-items: center;
}
.menu-item>label:hover{
color: var(--font-color-default-hover);
}
.menu-item>label>i:first-child{
flex:none;
margin-right: 10px;
font-size: 20px;
}
.menu-item>label>span{
flex: 1;
letter-spacing: 1px;
}
.menu-item>label>i:last-child{
flex: none;
font-size: 20px;
font-weight: 900;
transform: rotate(0deg);
transition: transform var(--transition-time-s);
}
.menu-item>input:checked+label>i:last-child{
transform: rotate(180deg);
}
.menu-content{
height: 0;
overflow: hidden;
display: flex;
flex-wrap: wrap;
background-color: var(--bg-md-color-White);
transition: height var(--transition-time-s);
}
.menu-content>span{
width: 100%;
text-indent: 20px;
line-height: var(--option-size);
}
.menu-content>span>a{
color: var(--color-default-Black);
}
.set-line {
margin: 20px 0 10px 0;
width: 100%;
height: 2px;
background-color: var(--bg-md-color-Gray);
}
.menu-content>span:hover{
border-radius: var(--border-radius-m);
background-color: var(--bg-md-color-Gray);
}
.menu-content>span:hover>a{
color: var(--color-default-White);
}
.menu-item>input#menu-item1:checked~.menu-content{
height: calc(1 * var(--option-size));
}
.menu-item>input#menu-item2:checked~.menu-content{
height: calc(2 * var(--option-size));
}
.menu-item>input#menu-item3:checked~.menu-content{
height: calc(3 * var(--option-size));
}
/* 遮眼布 */
.overplay{
position: absolute;
display: none;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.7);
z-index: 2;
}
/* 设置盒子 */
.setting-box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 0;
height: 300px;
overflow: hidden;
background-color: pink;
text-align: center;
transition: width var(--transition-time-s);
z-index: 3;
}
JS:
const menu_btn = document.getElementById('menu-btn')
const setting = document.getElementById('setting')
const overplay = document.querySelector('.overplay')
// 侧边导航栏收缩设置
const slide=()=>{
// 父容器
const container = document.querySelector('.container')
const left_menu = document.querySelector('.left-menu')
if(menu_btn.checked){
container.style.gridTemplateColumns ='0 auto';
left_menu.style.width = '0'
}else{
container.style.gridTemplateColumns ='250px 725px';
left_menu.style.width = '230px'
}
}
//设置
const up_setting = ()=>{
const setting_box = document.querySelector('.setting-box')
overplay.style.display = 'block';
setting_box.style.width = '600px';
}
const down_setting = ()=>{
const setting_box = document.querySelector('.setting-box')
overplay.style.display = 'none';
setting_box.style.width = '0';
}
menu_btn.addEventListener('click',()=>{
slide();
})
setting.addEventListener('click',()=>{
up_setting();
})
overplay.addEventListener('click',()=>{
down_setting();
})
效果图:
参考来自: