Tailwind CSS：如何创建超级菜单

CSS 2年前 78

巨型菜单，顾名思义，是一个非常大的菜单，具有全屏宽度（或几乎全屏宽度）并包含大量链接，通常在用户悬停或单击链接或按钮等元素时下拉。这篇实用的文章将引导您完成一个使用 Tailwind CSS 创建响应式大型菜单的完整示例。事不宜迟（比如解释 Tailwind CSS 是什么或谈论它的历史），让我们开始着手编写代码。

示例预览

我们要构建的演示网页显示了一个靛蓝顶部导航栏。这个导航栏由一个标志、几个链接和一个名为“下拉”的按钮组成。当您将鼠标悬停在此按钮上时，将显示大型菜单。它包含几个类别。每个类别都包含几个链接。

这个词可能听起来令人困惑。以下是它的工作原理：

Tailwind CSS：如何创建超级菜单

编码

这是生成上述网页的代码（看起来有点长，但很大一部分只是虚拟链接）：

<body>
    <div class="relative w-screen flex justify-start items-center bg-indigo-600 text-white drop-shadow-md">
        <!-- Logo -->
        <div class="px-3 md:px-10 text-2xl text-white font-extrabold italic">
            Kinda <span class="text-amber-400">Code</span>
        </div>

        <a href="#" class="px-5 py-4 hover:bg-amber-200 hover:text-black">Home</a>
        <a href="#" class="px-5 py-4 hover:bg-amber-200 hover:text-black">Contact</a>

        <!-- Mega menu here -->
        <div class="group">
            <button class="px-5 py-4 group-hover:bg-amber-200 group-hover:text-black">Dropdown
                &darr;
            </button>
            <div
                class="hidden group-hover:flex flex-col absolute left-0 p-10 w-full bg-amber-200 text-black duration-300">
                <div class="pb-5">
                    <h2 class="text-3xl">Mega Menu</h2>
                </div>
                <div class="grid grid-cols-2 md:grid-cols-4 gap-5">
                    <div class="flex flex-col">
                        <h3 class="mb-4 text-xl">Category 1</h3>
                        <a href="#" class="hover:underline hover:text-red-600">Sample Link 1</a>
                        <a href="#" class="hover:underline hover:text-red-600">Sample Link 2</a>
                        <a href="#" class="hover:underline hover:text-red-600">Sample Link 3</a>
                        <a href="#" class="hover:underline hover:text-red-600">Sample Link 4</a>
                        <a href="#" class="hover:underline hover:text-red-600">Sample Link 5</a>
                    </div>

                    <div class="flex flex-col">
                        <h3 class="mb-4 text-xl">Category 2</h3>
                        <a href="#" class="hover:underline hover:text-red-600">Sample Link 1</a>
                        <a href="#" class="hover:underline hover:text-red-600">Sample Link 2</a>
                        <a href="#" class="hover:underline hover:text-red-600">Sample Link 3</a>
                        <a href="#" class="hover:underline hover:text-red-600">Sample Link 4</a>
                        <a href="#" class="hover:underline hover:text-red-600">Sample Link 5</a>
                    </div>

                    <div class="flex flex-col">
                        <h3 class="mb-4 text-xl">Category 3</h3>
                        <a href="#" class="hover:underline hover:text-red-600">Sample Link 1</a>
                        <a href="#" class="hover:underline hover:text-red-600">Sample Link 2</a>
                        <a href="#" class="hover:underline hover:text-red-600">Sample Link 3</a>
                        <a href="#" class="hover:underline hover:text-red-600">Sample Link 4</a>
                        <a href="#" class="hover:underline hover:text-red-600">Sample Link 5</a>
                    </div>

                    <div class="flex flex-col">
                        <h3 class="mb-4 text-xl">Category 4</h3>
                        <a href="#" class="hover:underline hover:text-red-600">Sample Link 1</a>
                        <a href="#" class="hover:underline hover:text-red-600">Sample Link 2</a>
                        <a href="#" class="hover:underline hover:text-red-600">Sample Link 3</a>
                        <a href="#" class="hover:underline hover:text-red-600">Sample Link 4</a>
                        <a href="#" class="hover:underline hover:text-red-600">Sample Link 5</a>
                    </div>

                    <div class="flex flex-col">
                        <h3 class="mb-4 text-xl">Category 5</h3>
                        <a href="#" class="hover:underline hover:text-red-600">Sample Link 1</a>
                        <a href="#" class="hover:underline hover:text-red-600">Sample Link 2</a>
                        <a href="#" class="hover:underline hover:text-red-600">Sample Link 3</a>
                        <a href="#" class="hover:underline hover:text-red-600">Sample Link 4</a>
                        <a href="#" class="hover:underline hover:text-red-600">Sample Link 5</a>
                    </div>

                    <div class="flex flex-col">
                        <h3 class="mb-4 text-xl">Category 6</h3>
                        <a href="#" class="hover:underline hover:text-red-600">Sample Link 1</a>
                        <a href="#" class="hover:underline hover:text-red-600">Sample Link 2</a>
                        <a href="#" class="hover:underline hover:text-red-600">Sample Link 3</a>
                    </div>
                </div>
            </div>
        </div> <!-- end of dropdown -->

    </div>

    <!-- Other content -->
    <div class="container p-10">
        <h1 class="text-4xl">Welcome to KindaCode.com</h1>
        <h3 class="mt-10 text-xl">Mega Menu Example, Built with Tailwind CSS</h3>
    </div>

</body>

解释

一开始，超级菜单是隐藏的（使用隐藏实用程序）。

我们将组实用程序类添加到巨型菜单的div父级。当这个父元素或其任何子元素悬停时，巨型菜单就会出现。这里的重点是我们将group-hover修饰符与flex实用程序一起使用：

<div class="hidden group-hover:flex ...">

我们使用网格实用程序为大型菜单设置响应式布局（如果您愿意，可以采用其他方式）。

结论

恭喜！我们做到了，一个标准的大型菜单。尽管结果不是太迷人，但它看起来不错，并且可以很好地用于生产。随意修改代码、更改一些样式、添加一些元素和删除一些元素以使其适合您的需求。

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布，任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站。本站所有源码与软件均为原作者提供，仅供学习和研究使用。如您对本站的相关版权有任何异议，或者认为侵犯了您的合法权益，请及时通知我们处理。

CSS

示例预览

编码

解释

结论

相关文章