css实现左侧可折叠收缩边栏菜单效果代码-html代码-BFW代码库

代码语言：html
代码描述：css实现左侧可折叠收缩边栏菜单效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  
  <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&amp;display=swap'>
  
<style>
* {
	border: 0;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
:root {
	--hue: 223;
	--hue2: 13;
	--bg: hsl(var(--hue),10%,90%);
	--fg: hsl(var(--hue),10%,10%);
	--primary: hsl(var(--hue),90%,55%);
	--red: hsl(var(--hue2),90%,55%);
	--trans-dur: 0.3s;
	font-size: calc(16px + (20 - 16) * (100vw - 320px) / (1280 - 320));
}
body,
button,
input {
	font: 1em/1.5 "DM Sans", sans-serif;
}
body {
	background-color: var(--bg);
	color: var(--fg);
	height: 100vh;
	transition:
		background-color var(--trans-dur),
		color var(--trans-dur);
}
button {
	-webkit-appearance: none;
	appearance: none;
}
.nav {
	background-color: hsl(0,0%,100%);
	display: flex;
	flex-direction: column;
	position: relative;
	height: 100%;
	width: 16em;
	transition:
		background-color var(--trans-dur),
		width var(--trans-dur) ease-in-out;
}
.nav__main {
	overflow-x: hidden;
	overflow-y: hidden;
	padding: 2.5em 1.75em;
	width: inherit;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: 8px;
	scrollbar-color: hsla(0,0%,0%,0.2) transparent;
}
.nav__main::-webkit-scrollbar {
	width: 8px;
}
.nav__main::-webkit-scrollbar-track {
	background: transparent;
}
.nav__main::-webkit-scrollbar-thumb {
	background-color: hsla(0,0%,0%,0.2);
	border-radius: 4px;
}
.nav__main:hover {
	overflow-y: auto;
}
.nav__bottom {
	background-color: inherit;
	box-shadow: 0 1px 0 hsl(var(--hue),10%,80%) inset;
	padding: 1em 1.75em;
	transition: box-shadow var(--trans-dur);
}
.nav__heading {
	color: hsl(var(--hue),10%,45%);
	display: block;
	font-size: 0.75em;
	line-height: 1;
	margin-bottom: 0.75rem;
	text-transform: uppercase;
	transition: color var(--trans-dur);
}
.nav__heading-text {
	display: inline-block;
	transform: translateX(0.75em);
	transition: transform var(--trans-dur) ease-in-out;
}
.nav__items {
	list-style: none;
	margin: 0 0 3em 0;
}
.nav__items:last-child {
	margin-bottom: 0;
}
.nav__item-box {
	background-color: hsla(var(--hue),90%,55%,0);
	border-radius: 0.75em;
	color: hsl(var(--hue),20%,55%);
	display: flex;
	align-items: center;
	padding: 0.75em;
	text-align: left;
	text-decoration: none;
	transition:
		background-color var(--trans-dur) ease-in-out,
		color var(--trans-dur),
		width var(--trans-dur) ease-in-out;
	width: 12.5em;
	min-width: 3em;
}
.nav__item-box:focus,
.nav__item-box:hover {
	background-color: hsla(var(--hue),90%,55%,0.1);
	color: var(--primary);
}
.nav__item-box:focus {
	outline: transparent;
}
.nav__item-icon,
.nav__item-icon svg {
	display: block;
	width: 1.5em;
	height: 1.5em;
}
.nav__item-icon {
	flex-shrink: 0;
	position: relative;
	text-align: center;
	transition: transform var(--trans-dur) ease-in-out;
}
.nav__item-icon--badge:before {
	background-color: var(--primary);
	border-radius: 50%;
	box-shadow: 0 0 0 0.1em hsl(0,0%,100%);
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 0.5em;
	height: 0.5em;
	transform: scale(0);
	transition:
		box-shadow var(--trans-dur),
		transform var(--trans-dur) ease-in-out;
}
.nav__item-text {
	margin-left: 0.75em;
	display: inline-block;
	overflow: hidden;
	white-space: nowrap;
	width: 100%;
	transition:
		opacity var(--trans-dur) ease-in-out,
		width var(--trans-dur) ease-in-out;
}
.nav__item-badge {
	background-color: hsla(var(--hue),90%,55%,0.1);
	border-radius: 0.75rem;
	color: var(--primary);
	font-size: 0.75em;
	line-height: 1;
	margin-left: 0.75rem;
	padding: 0.125rem 0.5rem;
	transition:
		background-color var(--trans-dur),
		color var(--trans-dur);
}
.nav__item-box--red .nav__item-badge {
	background-color: hsla(var(--hue2),90%,55%,0.1);
	color: var(--red);
}
.nav__item-box--red .nav__item-icon--badge:before {
	background-color: var(--red);
}
.nav__logo {
	background-color: var(--primary);
	border-radius: 0.75em;
	color: hsl(0,0%,100%);
	display: flex;
	margin-bottom: 2.5em;
	width: 3em;
	height: 3em;
	transform: translateX(0.75em);
	transition:
		background-color var(--trans-dur),
		color var(--trans-dur),
		transform var(--trans-dur) ease-in-out;
}
.nav__logo svg {
	display: block;
	margin: auto;
	width: 2em;
	height: 2em;
}
.nav[data-expanded="false"] {
	width: 6.5em;
}
.nav[data-expanded="false"] .nav__heading-text {
	transform: translateX(calc(2em - 50%));
}
.nav[data-expanded="false"] .nav__item-box {
	width: 3em;
}
.nav[data-expanded="false"] .nav__item-icon--badge:before {
	transform: scale(1);
}
.nav[data-expanded="false"] .nav__item-text {
	opacity: 0;
	width: 0;
}
.nav[data-expanded="false"] .nav__logo {
	transform: translateX(0);
}
.nav[data-expanded="false"] [data-expand] .nav__item-icon {
	transform: rotate(180deg);
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
	:root {
		--bg: hsl(var(--hue),10%,20%);
		--fg: hsl(var(--hue),10%,90%);
	}
	.nav {
		background-color: hsl(var(--hue),10%,10%);
	}
	.nav__main {
		scrollbar-color: hsla(0,0%,100%,0.2) transparent;
	}
	.nav__main::-webkit-scrollbar-thumb {
		background-color: hsla(0,0%,100%,0.2);
	}
	.nav__bottom {
		box-shadow: 0 1px 0 hsl(var(--hue),10%,30%) inset;
	}
	.nav__heading {
		color: hsl(var(--hue),10%,65%);
	}
	.nav__item-box {
		background-color: hsla(0,0%,100%,0);
		color: hsl(var(--hue),20%,75%);
	}
	.nav__item-box:focus,
	.nav__item-box:hover {
		background-color: hsla(0,0%,100%,0.1);
		color: hsl(0,0%,100%);
	}
	.nav__item-icon--badge:before {
		box-shadow: 0 0 0 0.1em hsl(var(--hue),10%,10%);
	}
	.nav__item-badge {
		background-color: hsl(var(--hue),90%,55%);
		color: hsl(0,0%,100%);
	}
	.nav__item-box--red .nav__item-badge {
		background-color: hsl(var(--hue2),90%,55%);
		color: hsl(0,0%,100%);
	}
	.nav__logo {
		background-color: hsl(0,0%,100%);
		color: var(--primary);
	}
}
</style>




</head>

<body>
  <svg display="none">
	<symbol id="app" viewBox="0 0 24 24">
		<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2">
			<path d="M9,11.969V5c0-1.657,1.343-3,3-3s3,1.343,3,3v1.003"/>
			<path d="M15,12.002v6.998c0,1.657-1.343,3-3,3s-3-1.343-3-3v-1.015"/>
			<path d="M12,15H4.992c-1.652,0-2.992-1.343-2.992-3s1.34-3,2.992-3h1.002"/>
			<path d="M12,9h6.994c1.66,0,3.006,1.343,3.006,3s-1.346,3-3.006,3h-.961"/>
		</g>
	</symbol>
	<symbol id="dashboard" viewBox="0 0 24 24">
		<g fill="currentColor">
			<path d="M12,2h0A11.958,11.958,0,0,0,3.517,5.513l0,0,0,0A11.961,11.961,0,0,0,0,13.989v.021a11.948,11.948,0,0,0,2.742,7.626A1,1,0,0,0,3.514,22H20.485a1,1,0,0,0,.771-.364A12,12,0,0,0,12,2Zm8,18H4A9.936,9.936,0,0,1,2.05,15H5a1,1,0,0,0,0-2H2.05A9.955,9.955,0,0,1,4.257,7.672l.672.671A1,1,0,0,0,6.343,6.929l-.672-.672A9.954,9.954,0,0,1,11,4.05V7a1,1,0,0,0,2,0V4.05a9.948,9.948,0,0,1,5.328,2.207l-.671.672a1,1,0,0,0,1.414,1.414l.671-.672A9.947,9.947,0,0,1,21.95,13H19a1,1,0,0,0,0,2h2.95A9.932,9.932,0,0,1,20,20Z"/>
			<polygon points="14.999 10.343 9.343 13.172 12.171 16 14.999 10.343"/>
		</g>
	</symbol>
	<symbol id="performance" viewBox="0 0 24 24">
		<g stroke="currentColor">
			<path fill="none" stroke-width="2" d="M4.99787498,8.99999999 L4.99787498,0.999999992 L19.4999998,0.999999992 L22.9999998,4.50000005 L23,23 L4,23 M18,1 L18,6 L23,6 M3,19 L8,14 L12,18 L18.5,11.5 M19,17.0003099 L19,11 L13,11"/>
		</g>
	</symbol>
	<symbol id="guides" viewBox="0 0 24 24">
		<g fill="currentColor">
			<path d="M20.3,3.65H17.269c-.088-.681-.152-1.186-.152-1.186a1.006,1.006,0,0,0-1-.877H13.007V1A1,1,0,0,0,11,1v.588H7.882a1.006,1.006,0,0,0-1,.877L6.736,3.65H3.7a1,1,0,0,0-1,1V23a1,1,0,0,0,1,1H20.3a1,1,0,0,0,1.005-1V4.649A1,1,0,0,0,20.3,3.65ZM8.769,3.591h6.462L15.559,6.2H8.441ZM19.3,22.006H4.708V5.653H6.486L6.31,7.074a.936.936,0,0,0,1,1.122h9.4a1,1,0,0,0,1-1c0-.035-.084-.711-.191-1.544H19.3V22.006Z"/>
		</g>
	</symbol>
	<symbol id="hotspots" viewBox="0 0 24 24">
		<g fill="currentColor">
			<path d="M12 11.6495C11.3096 11.6495 10.75 12.2091 10.75 12.8995C10.75 13.5898 11.3096 14.1495 12 14.1495C12.6904 14.1495 13.25 13.5898 13.25 12.8995C13.25 12.2091 12.6904 11.6495 12 11.6495ZM9.25 12.8995C9.25 11.3807 10.4812 10.1495 12 10.1495C13.5188 10.1495 14.75 11.3807 14.75 12.8995C14.75 14.4183 13.5188 15.6495 12 15.6495C10.4812 15.6495 9.25 14.4183 9.25 12.8995Z"/>
			<path d="M12 7.64948C10.9617 7.64948 9.94662 7.95738 9.08326 8.53426C8.2199 9.11114 7.547 9.93108 7.14964 10.8904C6.75228 11.8497 6.64831 12.9053 6.85088 13.9237C7.05345 14.9421 7.55347 15.8776 8.28769 16.6118C8.58059 16.9047 8.58059 17.3796 8.28769 17.6724C7.9948 17.9653 7.51993 17.9653 7.22703 17.6724C6.28303 16.7284 5.64015 15.5257 5.3797 14.2163C5.11925 12.907 5.25292 11.5498 5.76382 10.3164C6.27471 9.08296 7.13987 8.02876 8.2499 7.28706C9.35994 6.54536 10.665 6.14948 12 6.14948C13.335 6.14948 14.6401 6.54536 15.7501 7.28706C16.8601 8.02876 17.7253 9.08296 18.2362 10.3164C18.7471 11.5498 18.8808 12.907 18.6203 14.2163C18.3599 15.5257 17.717 16.7284 16.773 17.6724C16.4801 17.9653 16.0052 17.9653 15.7123 17.6724C15.4194 17.3796 15.4194 16.9047 15.7123 16.6118C16.4465 15.8776 16.9466 14.9421 17.1491 13.9237C17.3517 12.9053 17.2477 11.8497 16.8504 10.8904C16.453 9.93108 15.7801 9.11114 14.9167 8.53426C14.0534 7.95738 13.0384 7.64948 12 7.64948Z"/>
			<path d="M12.0001 3.75C10.1905 3.75 8.42152 4.28661 6.9169 5.29197C5.41227 6.29733 4.23956 7.72628 3.54705 9.39813C2.85455 11.07 2.67336 12.9096 3.0264 14.6845C3.37943 16.4593 4.25083 18.0896 5.53041 19.3692C5.82331 19.662 5.82331 20.1369 5.53041 20.4298C5.23752 20.7227 4.76265 20.7227 4.46975 20.4298C2.9804 18.9405 1.96613 17.0429 1.55522 14.9771C1.14431 12.9113 1.355.........完整代码请登录后点击上方下载按钮下载查看