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, 0.067),
    0 16px 32px 0px rgba(0, 0, 0, 0.133), 0 32px 48px 0px rgba(0, 0, 0, 0.2);
}
.active {
  flex: 0;
}

.nav_icon {
  display: flex;
  width: max-content;
  height: 3rem;
  align-items: center;
  margin-inline: 0.75em;
  transform: rotatez(270deg);
  justify-content: center;
  transition: all 200ms linear;
}

.nav_icon i {
  width: 1.5rem;
  font-size: 1.5rem;
  margin-inline: min(0.75rem, 50%);
  cursor: pointer;
  color: #6f70b8;
}

.nav_icon i:hover {
  color: rgba(123, 166, 231, 0.733);
  transform: scale(1.15);
}
.active .nav_icon {
  transform: rotatez(0deg);
}
active .text {
  display: none;
}

.nav_list {
  list-style: none;
}
.list-item {
  height: 3rem;
  display: flex;
  transition: background 166ms ease;
  position: relative;
}

.list-item:nth-of-type(8) {
  margin-top: 3rem;
}
.list-item::after {
  content: "";
  position: absolute;
  width: 100%;
  height: calc(100% - 12px);
  top: 50%;
  transform: translateY(-50%);
  transition: opacity 166ms ease;
  background: linear-gradient(
    to right,
    rgba(123, 166, 231, 0.733) 3px,
    3px,
    #0000
  );
  opacity: 0;
}

.list-item:hover {
  background: rgba(219, 220, 228, 0.6);
}

.list-item:hover::after {
  opacity: 1;
}

.active [data-tooltip]::before {
  content: attr(data-tooltip);
  position: absolute;
  top: 0.25rem;
  display: inline-flex;
  left: 4.5rem;
  justify-content: center;
  align-items: center;
  width: 5.5rem;
  border-radius: 0.5em;
  padding: 0.5em 1em;
  background-color: #ffffff40;
  box-shadow: 0 10px 18px -7px #0002;
  opacity: 0;
  transform-origin: left;
  pointer-events: none;
  font-weight: 600;
  text-transform: capitalize;
  color: var(--gray600);
}

.active [data-tooltip]:hover::before {
  animation: showTooltip 200ms linear 100ms forwards;
}

@keyframes showTooltip {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.list-item i {
  padding: 0.25rem;
  margin-left: 8px;
  align-items: center;
  justify-content: center;
  width: 2rem;
  display: inline-flex;
  font-size: 1.5rem;
  color: rgba(42, 114, 207, 0.842);
}

a {
  overflow: hidden;
  gap: 0.75rem;
  text-decoration: none;
  align-items: center;
  display: flex;
  height: inherit;
  color: #333;
  flex-grow: 1;
}

.list-item:hover a {
  font-weight: 700;
}
</style>
</head>

.........完整代码请登录后点击上方下载按钮下载查看