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

代码语言：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: center;
  grid-template-columns: repeat(var(--items-per-row), 1fr);
  height: calc(var(--max-height) * var(--default-open) * 1px);
  pointer-events: none;
  transition: height 0.3s ease;
  transform-origin: center top;
  overflow: hidden;
  position: relative;
}

nav:has(ul li:nth-child(2):hover) .grid,
.grid:hover {
  height: auto;
}
@media (min-width: 960px) {
  nav:has(ul li:nth-child(2):hover) .grid,
.grid:hover {
    height: calc(var(--max-height)*1px);
  }
}
nav:has(ul li:nth-child(2):hover) .grid .card,
.grid:hover .card {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.card {
  color: white;
  padding: var(--padding);
  display: flex;
  align-self: self-start;
  width: 100%;
  height: auto;
  flex-direction: column;
  transition: color 0.2s ease;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
  cursor: pointer;
  pointer-events: all;
  background: radial-gradient(ellipse at 0% calc(var(--background-position-y) * 1%), var(--current-color), transparent 40%) no-repeat;
  transition: color 0.5s ease, --background-position-y 0.6s ease;
  font-weight: 300;
}
.card:last-child {
  grid-column-start: 1;
  grid-column-end: 3;
}
@media (min-width: 960px) {
  .card:last-child {
    grid-column-start: auto;
    grid-column-end: auto;
  }
}
.card img {
  width: 100%;
  height: var(--img-height);
  border-radius: 8px;
  background: currentColor;
  margin-top: 60px;
  margin-bottom: 30px;
  transform: translateY(0px);
  transition: transform 0.65s cubic-bezier(0.41, -0.19, 0, 0.27);
  box-shadow: 0 6px 12px black;
  display: none;
}
@media (min-width: 960px) {
  .card img {
    display: block;
  }
}
.card canvas {
  visibility: hidden;
  position: absolute;
}
.card article {
  color: #fff;
}
.card article h3 {
  text-transform: capitalize;
  letter-spacing: 0.1em;
  font-size: 1.3em;
}
.card article p {
  color: #bebebe;
  text-transform: capitalize;
  letter-spacing: 0.1em;
}
.card:not(:hover) {
  --current-color: rgb(255 255 255 / 10%);
  color: rgba(255, 255, 255, 0.1);
}
.card:not(:hover) .icon {
  color: rgba(255, 255, 255, 0.5);
}
.card:hover {
  --background-position-y: 100;
}
.card:hover img {
  transform: translateY(-10px);
}
.card.yellow {
  --current-color: var(--color-yellow);
  color: var(--current-color);
}
.card.pink {
  --current-color: var(--color-pink);
  color: var(--current-color);
}
.card.cyan {
  --current-color: var(--color-cyan);
  color: var(--current-color);
}
.card.orange {
  --current-color: var(--color-orange);
  color: var(--current-color);
}
.card.purple {
  --current-color: var(--color-purple);
  color: var(--current-color);
}

@container (max-width: 1000px) {
  .grid {
    --padding: 20px;
    --img-height: 80px;
  }
  .grid .card {
    height: 100%;
  }
  .grid .card article h3 {
    font-size: 1rem;
  }
  .grid .card article p {
    font-size: 0.8rem;
  }
}
@media (max-width: 960px) {
  .grid {
    --padding: 20px;
    --img-height: 80px;
    --items-per-row: 2;
  }
  .grid .card article img {
    display: none;
  }
  .grid .card article h3, .grid .card article p {
    font-size: 1rem;
  }
}
</style>


  
  
</head>

<body >
  <main>
  <nav>
    <ul>
      <li class="logo"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="none"><path fill="#fff" fill-rule="evenodd" d="M8.799 22.168a1.984 1.984 0 0 0-.967-.967c-3.315-1.533-5.937-3.744-7.337-5.07a1.54 1.54 0 0 1 0-2.262c1.4-1.326 4.022-3.537 7.337-5.07.426-.197.77-.54.967-.967 1.533-3.315 3.744-5.937 5.07-7.337a1.54 1.54 0 0 1 2.262 0c1.326 1.4 3.537 4.022 5.07 7.337.197.426.54.77.966.967 3.316 1.533 5.938 3.744 7.338 5.07a1.54 1.54 0 0 1 0 2.262c-1.4 1.326-4.022 3.537-7.337 5.07-.426.197-.77.54-.967.966-1.533 3.316-3.744 5.938-5.07 7.338a1.54 1.54 0 0 1-2.262 0c-1.326-1.4-3.537-4.022-5.07-7.337ZM15 20.514a5.514 5.514 0 1 0 0-11.028 5.514 5.514 0 0 0 0 11.028Z" clip-rule="evenodd"/></svg></li>
      <li><button>menu</button></li>
    </ul>
    <div class="grid">
      <div class="card yellow">
        <span class="icon"><svg width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" class="css-i6dzq1">
            <circle cx="12" cy="12" r="10" />
            <path d="m16.24 7.76-2.12 6.36-6.36 2.12 2.12-6.36 6.36-2.12z" />
          </svg></span>
        <div>
          <img src="//repo.bfw.wiki/bfwrepo/image/60bf1c9641f9b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_280,h_150,/quality,q_90" alt="">
          <canvas id="myCanvas"></canvas>
        </div>
        <.........完整代码请登录后点击上方下载按钮下载查看