1.HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 图标组件库 -->
<link href="https://unpkg.com/[email protected]/css/boxicons.min.css" rel="stylesheet">
<link rel="stylesheet" href="./style.css">
<title>侧边栏</title>
</head>
<body>
<nav class="sidebar close">
<header>
<div class="image-text">
<span class="image">
<img src="./image1.PNG" alt="">
</span>
<div class="text logo-text">
<span class="name">LabiXiaoxin@</span>
<span class="profession">Tel:12345678912</span>
</div>
</div>
<i class="bx bx-chevron-right toggle"></i>
</header>
<div class="menu-bar">
<div class="menu">
<li class="search-box">
<i class="bx bx-search icon"></i>
<input type="text" placeholder="搜索...">
</li>
<ul class="menu-links">
<li class="nav-link">
<a href="#">
<i class="bx bx-home-alt icon"></i>
<span class="text nav-text">主页</span>
</a>
</li>
<!-- 下面的小li都是一样的样式,只需要修改文字和图标 -->
<li class="nav-link">
<a href="#">
<i class='bx bx-bar-chart-alt-2 icon'></i>
<span class="text nav-text">详细信息</span>
</a>
</li>
<li class="nav-link">
<a href="#">
<i class='bx bx-bell icon'></i>
<span class="text nav-text">公告</span>
</a>
</li>
<li class="nav-link">
<a href="#">
<i class='bx bx-pie-chart-alt icon'></i>
<span class="text nav-text">数据分析</span>
</a>
</li>
<li class="nav-link">
<a href="#">
<i class='bx bx-heart icon'></i>
<span class="text nav-text">我的最爱</span>
</a>
</li>
</ul>
</div>
<div class="bottom-content">
<li>
<a href="#">
<i class="bx bx-log-out icon"></i>
<span class="text nav-text">登出</span>
</a>
</li>
<li class="mode">
<div class="sun-moon">
<i class="bx bx-moon icon moon"></i>
<i class="bx bx-sun icon sun"></i>
</div>
<span class="mode-text text">Dark Mode</span>
<div class="toggle-switch">
<span class="switch"></span>
</div>
</li>
</div>
</div>
</nav>
<section class="home">
<div class="text">content</div>
</section>
<script src="./script.js"></script>
</body>
</html>
2.CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
/* 一些需要重复使用的样式 */
:root {
/* 颜色 */
--body-color: #e4e9f7;
--sidebar-color: #fff;
--primary-color: #695cfe;
--primary-color-light: #f6f5ff;
--toggle-color: #ddd;
--text-color: #707070;
/* 过渡效果 */
--tran-02: all 0.2s ease;
--tran-03: all 0.3s ease;
}
body{
min-height: 100vh;
background-color: var(--body-color);
transition: var(--tran-03);
}
::selection{
background-color: var(--primary-color);
color: #fff;
}
/* 当body标签拥有dark类名的时候的样式 */
body.dark{
--body-color:#18191a;
--sidebar-color:#242526;
--primary-color:#3a3b3c;
--primary-color-light:#3a3b3c;
--toggle-color:#fff;
--text-color:#ccc;
}
/* sidebar上的初始化样式 */
.sidebar{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 250px;
padding: 10px 14px;
background: var(--sidebar-color);
transition: var(--tran-03);
z-index: 100;
}
.sidebar.close{
width: 88px;
}
.sidebar li{
height: 50px;
list-style: none;
display: flex;
align-items: center;
margin-top: 10px;
}
.sidebar header .image,.sidebar .icon{
min-width: 60px;
border-radius: 6px;
}
.sidebar .icon{
min-width: 60px;
border-radius: 6px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
.sidebar .text,.sidebar .icon{
color: var(--text-color);
transition: var(--tran-03);
}
.sidebar .text{
font-size: 17px;
font-weight: 500;
white-space: nowrap;
opacity: 1;
}
.sidebar.close .text{
opacity: 0;
}
/* header部分样式 */
.sidebar header{
position: relative;
}
.sidebar header .image-text{
display: flex;
align-items: center;
}
.sidebar header .logo-text{
display: flex;
flex-direction: column;
}
header .image-text .name{
margin-top: 2px;
font-size: 18px;
font-weight: 600;
}
header .image-text .profession{
font-size: 16px;
margin-top: -2px;
display: block;
}
.sidebar header .image{
display: flex;
align-items: center;
justify-content: center;
}
.sidebar header .image img{
height: 40px;
width: 40px;
border-radius: 6px;
}
.sidebar header .toggle{
position: absolute;
top: 50%;
right: -25px;
transform: translateY(-50%) rotate(180deg);
height: 25px;
width: 25px;
background-color: var(--primary-color);
color: var(--sidebar-color);
display: flex;
border-radius: 50%;
align-items: center;
justify-content: center;
font-size: 22px;
cursor: pointer;
transition: var(--tran-03);
}
body.dark .sidebar header .toggle{
color: var(--text-color);
}
.sidebar.close .toggle{
transform: translateY(-50%) rotate(0deg);
}
.sidebar .menu{
margin-top: 40px;
}
.sidebar li.search-box{
border-radius: 6px;
background-color: var(--primary-color-light);
cursor: pointer;
transition: var(--tran-03);
}
.sidebar li.search-box input{
height: 100%;
width: 100%;
outline: none;
border: none;
background-color: var(--primary-color-light);
color: var(--text-color);
border-radius: 6px;
font-size: 17px;
font-weight: 500;
transition: var(--tran-03);
}
.sidebar li a{
list-style: none;
height: 100%;
background-color: transparent;
display: flex;
align-items: center;
height: 100%;
width: 100%;
border-radius: 6px;
text-decoration: none;
transition: var(--tran-03);
}
.sidebar li a:hover{
background-color: var(--primary-color);
}
.sidebar li a:hover .icon,.sidebar li a:hover .text{
color: var(--sidebar-color);
}
body.dark .sidebar li a:hover .icon,
body.dark .sidebar li a:hover .text{
color: var(--text-color);
}
.sidebar .menu-bar{
height: calc(100% - 55px);
display: flex;
flex-direction: column;
justify-content: space-between;
overflow-y: scroll;
}
.menu-bar::-webkit-scrollbar{
display: none;
}
.sidebar .menu-bar .mode{
border-radius: 6px;
background-color: var(--primary-color-light);
position: relative;
transition-timing-function: var(--tran-03);
}
.menu-bar .mode .sun-moon{
height: 50px;
width: 60px;
}
.mode .sun-moon i{
position: absolute;
}
.mode .sun-moon i.sun{
opacity: 0;
}
body.dark .mode .sun-moon i.sun{
opacity: 1;
}
body.dark .mode .sun-moon i.moon{
opacity: 0;
}
.menu-bar .bottom-content .toggle-switch{
position: absolute;
right: 0;
height: 100%;
min-width: 60px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
cursor: pointer;
}
.toggle-switch .switch{
position: relative;
height: 22px;
width: 40px;
border-radius: 25px;
background-color: var(--toggle-color);
transition: var(--tran-03);
}
.switch::before{
content: "";
position: absolute;
width: 15px;
height: 15px;
border-radius:50% ;
top: 50%;
left: 5px;
transform: translateY(-50%);
background-color: var(--sidebar-color);
transition: var(--tran-03);
}
body.dark .switch::before{
left: 20px;
}
.home{
position: absolute;
top: 0;
left: 250px;
height: 100vh;
width: calc(100% - 250px);
background-color: var(--body-color);
transition: var(--tran-03);
}
.home .text{
font-size: 30px;
font-weight: 500;
color: var(--text-color);
padding: 12px 60px;
}
.sidebar.close~.home{
left: 78px;
height: 100vh;
width: calc(100% - 78px);
}
body.dark .home .text{
color: var(--text-color);
}
3.js
const body=document.querySelector('body')
const sidebar=body.querySelector('nav')
const toggle=body.querySelector('.toggle')
const searchBtn=body.querySelector('.search-box')
const modeSwitch=body.querySelector('.toggle-switch')
const modeText=body.querySelector('.mode-text')
toggle.addEventListener('click',()=>{
sidebar.classList.toggle('close')
})
searchBtn.addEventListener('click',()=>{
sidebar.classList.remove('close')
})
modeSwitch.addEventListener('click',()=>{
body.classList.toggle('dark');
if(body.classList.contains('dark')){
modeText.innerHTML="Light Mode"
}else{
modeText.innerHTML="Dark Mode"
}
})