css实现垂直可折叠菜单效果代码-html代码-BFW代码库

css实现垂直可折叠菜单效果代码

代码语言：html

代码描述：css实现垂直可折叠菜单效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>
    <meta charset="UTF-8">

<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.5.11.2.css">

<style>
    :root {
  --gray200: #26273b;
  --gray400: #454560;
  --gray600: #6f708b;
  --gray600-accent: #6f70b8;
  --gray700: hsl(237, 14%, 72%);
  --gray800: hsl(240, 15%, 86%);
  --gray900: #f0f0f5;
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  display: flex;
  margin-block: 2rem;
  font-size: 16px;
  font-family: "Segoe UI", sans-serif;
  background: linear-gradient(
    45deg,
    hsla(300, 47%, 75%, 0.356),
    rgba(0, 102, 255, 0.301)
  );
}

aside {
  display: flex;
  margin: auto;
  width: 13rem;
}

.navigation {
  min-width: 3rem;
  flex: 1;
  height: fit-content;
  background-color: #ffffff;
  border-radius: 8px;
  transition: flex 167ms ease;
  will-change: flex;
  position: relative;
  box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.1), 0 2px 4px 0px rgba(0, 0, 0, 0.2),
    0 4px 8px 0px rgba(0, 0, 0, 0.2), 0 8px 16px 0px rgba(0, 0, 0.........完整代码请登录后点击上方下载按钮下载查看