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
[&_h3]:px-3
[&_a]:font-thin
[&_a]:text-sm
[&_a]:py-1
[&_a]:px-3
[&_a]:relative
[&_a]:isolate
[&_a]:block
before:[&_a]:absolute
before:[&_a]:inset-[0_100%_0_0]
before:[&_a]:bg-gradient-to-r
before:[&_a]:from-purple-300
before:[&_a]:to-purple-transparent
before:[&_a]:-z-10
before:[&_a]:rounded-md
before:[&_a]:transition-all
before:[&_a]:duration-500
before:[&_a]:ease-in-out
hover:before:[&_a]:inset-0
">
<!-- furniture -->
<input type="radio" id="radio-1" name="panel-toggle" class="sr-only">
<article id="panel-1">
<div>
<h3>Living Room</h3>
<ul>
<li><a href="#">Sofas</a></li>
<li><a href="#">Coffee Tables</a></li>
<li><a href="#">TV Stands</a></li>
<li><a href="#">Bookshelves</a></li>
<li><a href="#">Rugs</a></li>
<li><a href="#">Curtains</a></li>
<li><a href="#">Lamps</a></li>
<li><a href="#">Wall Art</a></li>
<li><a href="#">Chairs</a></li>
</ul>
</div>
<div>
<h3>Kitchen</h3>
<ul>
<li><a href="#">Cookware</a></li>
<li><a href="#">Cutlery</a></li>
<li><a href="#">Appliances</a></li>
<li><a href="#">Storage Solutions</a></li>
<li><a href="#">Dining Tables</a></li>
<li><a href="#">Chairs</a></li>
<li><a href="#">Kitchen Islands</a></li>
<li><a href="#">Tableware</a></li>
</ul>
</div>
<div>
<h3>Bedroom</h3>
<ul>
<li><a href="#">Beds</a></li>
<li><a href="#">Wardrobes</a></li>
<li><a href="#">Dressers</a></li>
<li><a href="#">Nightstands</a></li>
<li><a href="#">Bedding</a></li>
<li><a href="#">Mirrors</a></li>
<li><a href="#">Lamps</a></li>
</ul>
</div>
<div>
<h3>Entrance & Hallways</h3>
<ul>
<li><a href="#">Console Tables</a></li>
<li><a href="#">Coat Racks</a></li>
<li><a href="#">Shoe Storage</a></li>
<li><a href="#">Mirrors</a></li>
<li><a href="#">Rugs</a></li>
<li><a href="#">Lighting</a></li>
</ul>
</div>
</article>
<!-- ligning -->
<input type="radio" id="radio-2" name="panel-toggle" class="sr-only">
<article id="panel-1">
<div>
<h3>Interior</h3>
<ul>
<li><a href="#">Ceiling Lights</a></li>
<li><a href="#">Pendant Lights</a></li>
<li><a href="#">Chandeliers</a></li>
<li><a href="#">Recessed Lighting</a></li>
<li><a href="#">Track Lighting</a></li>
<li><a href="#">Wall Sconces</a></li>
<li><a href="#">Table Lamps</a></li>
<li><a href="#">Floor Lamps</a></li>
<li><a href="#">Under Cabinet Lighting</a></li>
<li><a href="#">Accent Lighting</a></li>
</ul>
</div>
<div>
<h3>Exterior</h3>
<ul>
<li><a href="#">Outdoor Wall Lights</a></li>
<li><a href="#">Outdoor Ceiling Lights</a></li>
<li><a href="#">Landscape Lighting</a></li>
<li><a href="#">Pathway Lights</a></li>
<li><a href="#">Deck & Step Lights</a></li>
<li><a href="#">Outdoor Post Lights</a></li>
<li><a href="#">Security Lights</a></li>
<li><a href="#">Flood Lights</a></li>
<li><a href="#">String Lights</a></li>
<li><a href="#">Solar Lights</a></li>
</ul>
</div>
</article>
<!-- decor -->
<input type="radio" id="radio-3" name="panel-toggle" class="sr-only" checked>
<article id="panel-1">
<div>
<h3>Decoration</h3>
<ul>
<li><a href="#">Vases</a></li>
<li><a href="#">Jars</a></li>
<li><a href="#">Posters</a></li>
<li><a href="#">Photo frames</a></li>
<li><a href="#">Sculptures</a></li>
<li><a href="#">Wall</a></li>
<li><a href="#">Bordur</a></li>
<li><a href="#">Alarm clocks</a></li>
<li><a href="#">Pictures</a></li>
<li><a href="#">Picture frames</a></li>
</ul>
</div>
<div>
<h3>Office & Small Storage</h3>
<ul>
<li><a href="#">Boxes</a></li>
<li><.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0