css实现自适应巨型下拉图文菜单导航效果代码-html代码-BFW代码库

css实现自适应巨型下拉图文菜单导航效果代码

代码语言：html

代码描述：css实现自适应巨型下拉图文菜单导航效果代码，鼠标悬浮在menu上，巨型菜单下滑出现。

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

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

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

<style>
@layer properties {
  @property --background-position-y {
    syntax: "<number>";
    inherits: true;
    initial-value: 250;
  }
}
:root {
  --background-position-y: 250;
  --default-open: 0;
  --items-per-row: 5;
  --padding: 40px;
  --img-height: 120px;
  --debug: 0;
  --color-yellow: hsl(46.37deg 100% 39.67%);
  --color-pink: hsl(329.9deg 100% 41.38%);
  --color-cyan: hsl(179.62deg 100% 23.69%);
  --color-orange: hsl(26.72deg 100% 42.84%);
  --color-purple: hsl(273.35deg 100% 59.18%);
}

@supports (color: color(display-p3 0 0 0)) {
  :root {
    --color-yellow: color(display-p3 0.98 0.75 0.13);
    --color-pink: color(display-p3 0.95 0.01 0.42);
    --color-cyan: color(display-p3 0.05 0.92 0.92);
    --color-orange: color(display-p3 0.95 0.41 0.05);
    --color-purple: color(display-p3 0.59 0.19 1);
  }
}
*,
*:before,
*:after {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  outline: calc(var(--debug) * 1px) dotted hsl(calc(var(--debug) * 10 * 1deg), 60%, 60%);
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

body {
  background: #0f0f0f;
  font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
}

main {
  container: cards/inline-size;
}

nav {
  display: flex;
  flex-direction: column;
  position: relative;
  top: calc(var(--nav-height)*1px);
}
nav ul {
  background: #000;
  color: white;
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  list-style: none;
  display: flex;
  padding: 0;
  margin: 0;
  justify-content: space-between;
  font-size: 18px;
}
nav ul li {
  padding: 1.2em;
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: 2px;
}
nav ul li:has(button:hover) {
  font-weight: 600;
  letter-spacing: 1.9px;
}
nav ul li:not(:hover) {
  opacity: 0.8;
}
nav ul li.logo {
  cursor: pointer;
}
nav ul li.logo svg {
  width: 30px;
  transform: rotate(0deg);
  transition: transform 0.2s ease;
}
nav ul li.logo:hover svg {
  transform: rotate(-45deg);
}
nav ul li button {
  all: unset;
  cursor: pointer;
  display: block;
  width: 100%;
  height: 100%;
}

.grid {
  background: #000;
  display: grid;
  align-items: center;
  justify-content: c.........完整代码请登录后点击上方下载按钮下载查看