css+js实现平滑折叠堆积下拉菜单效果代码-html代码-BFW代码库

css+js实现平滑折叠堆积下拉菜单效果代码

代码语言：html

代码描述：css+js实现平滑折叠堆积下拉菜单效果代码

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

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

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

  
  
  
<style>
* {
  --hl: 0;
  --sel: 0;
  margin: 0;
  border: none;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
}

html, body, div, ul, .visual-item, .ico {
  display: grid;
}

html {
  height: 100%;
}

body {
  perspective: 25em;
  perspective-origin: 50% calc(50% - 12.5em);
  background: #000;
}

/* when there's better :has() support, 
 * replace selector with :has(> .visual-item) */
.component, [id*=menu] {
  grid-gap: 0.5em;
}

div, ul {
  transform-style: preserve-3d;
}

.component {
  place-self: center;
  padding: 0.5em;
  font: clamp(.625em, 5vw, 1.125em) monospace;
}

[aria-expanded], [id*=menu] {
  --hid: 0 ;
}

[aria-expanded=false], [id*=menu][inert] {
  --hid: 1 ;
}

button {
  --highlight:
  	0 0 calc(var(--hl)*7px) hsl(180, 90%, 50%);
  box-shadow: var(--highlight);
}
button[disabled] {
  opacity: 0.375;
}
button:focus {
  outline: none;
}
button:not([disabled]) {
  cursor: pointer;
}
button:not([disabled]):is(:focus, :hover) {
  --hl: 1 ;
}

:not(li) > .toggler::after {
  width: 0.625em;
  aspect-ratio: 1;
  border: solid 0 currentcolor;
  border-width: .........完整代码请登录后点击上方下载按钮下载查看