tailwindcss实现二级下拉菜单效果代码-html代码-BFW代码库

tailwindcss实现二级下拉菜单效果代码

代码语言：html

代码描述：tailwindcss实现二级下拉菜单效果代码，点击一级菜单显示二级子菜单。

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

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

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




  
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss.3.4.3.js"></script>
  
  
</head>

  <body class="bg-gradient-to-t from-purple-300 to-purple-100 flex flex-col gap-12 items-center justify-center min-h-screen p-4
        before:[&:has(#radio-1:checked)_#toggle-1]:scale-100
        before:[&:has(#radio-2:checked)_#toggle-2]:scale-100
        before:[&:has(#radio-3:checked)_#toggle-3]:scale-100
        before:[&:has(#radio-4:checked)_#toggle-4]:scale-100
        before:[&:has(#radio-5:checked)_#toggle-5]:scale-100
        before:[&:has(#radio-6:checked)_#toggle-6]:scale-100
        before:[&:has(#radio-7:checked)_#toggle-7]:scale-100
    ">

  <div class="bg-white/50 backdrop-blur-md ring ring-black/5 p-8 w-full max-w-5xl rounded-xl shadow-2xl shadow-purple-300 ">
    <nav class="flex flex-wrap gap-0 text-sm
                *:py-2
                *:px-4
                *:relative
                *:isolate 
                *:cursor-pointer
                *:whitespace-nowrap
                before:*:absolute
                before:*:w-full
                before:*:h-1
                before:*:left-0
                before:*:bottom-0
                before:*:bg-purple-400
                before:*:rounded-full
                before:*:transition-all
                before:*:duration-500
                before:*:ease-[cubic-bezier(.47,1.64,.38,.87)]
                before:*:scale-0
                before:*:origin-left 
                hover:before:*:scale-100
            ">
      <label id="toggle-1" for="radio-1">Furniture</label>
      <label id="toggle-2" for="radio-2">Lighting</label>
      <label id="toggle-3" for="radio-3">Decor</label>
      <label id="toggle-4" for="radio-4">Serving & Tableware</label>
      <label id="toggle-5" for="radio-5">Textiles & Carpets</label>
      <label id="toggle-6" for="radio-6">Jewelry & Accessories</label>
      <label id="toggle-7" for="radio-7">Outdoor enviroment</label>
    </nav>

    <section class="grid [grid-template-areas:'stack']  mt-8
                [&>article]:[grid-area:stack]
                [&>article]:transition-all
                [&>article]:duration-500
                [&>article>div]:scale-0
                [&>article>div]:origin-top
                [&>article>div]:transition-all
                [&>article>div]:duration-500
                [&>input:checked+article>div]:ease-[cubic-bezier(.47,1.64,.38,.87)]
                [&>input:checked+article>div]:scale-100
                [&>input:checked+article>div]:delay-500
                [&>input:checked+article>div:nth-child(2)]:delay-[800ms]
                [&>input:checked+article>div:nth-child(3)]:delay-[1100ms]
                [&>input:checked+article>div:nth-child(4)]:delay-[1400ms]
                [&>article]:grid
                [&>article]:grid-cols-1
                min-[400px]:[&>article]:grid-cols-2
                sm:[&>article]:grid-cols-4
                [&>article]:gap-4
                [&_h3]:font-medium
                [&_h3]:mb-2
                [&_h3]:text-sm
                [&.........完整代码请登录后点击上方下载按钮下载查看