使用 CSS / Tailwind 的下拉菜单

1- CSS 方式

在本文中，我将向您展示如何使用 CSS 创建下拉菜单。为此，我们将使用:focus-within。新的 CSS 功能让一切变得更容易 :)

那么我们需要什么呢？首先，我们需要一个<div>和，位于 div 内部，我们需要和<button>，因为它是可聚焦的，<nav>用于下拉菜单。

让我们首先创建 HTML 结构。



<div class="dropdown">
    <button>Menü</button>
    <nav>
        <ul>
            <li>
                <a href="#">
                    Edit
                </a>
            </li>
            <li>
                <a href="#">
                    Delete
                </a>
            </li>
            <li>
                <a href="#">
                    Reply
                </a>
            </li>
        </ul>
    </nav>
</div>

所以首先，我必须隐藏我的<nav>标签。



.dropdown nav {
   display: none;
}

现在，当我点击时<button>，我需要再次显示<nav>标签。为此，我将使用:focus-within。让我们来实现它。



.dropdown nav {
    display: none;
}
.dropdown:focus-within nav {
    display: block
}

这能行。但有一个问题。如果我点击导航标签（除了<a>标签本身），<nav>标签会被关闭，因为它会失去可聚焦性，:focus-within无法再工作。

所以，如果你觉得这有问题，可以添加[tabindex="0"]到你的<nav>标签中。这样做之后，你<nav>也能获得焦点了。我们开始吧。



<div class="dropdown">
    <button>Menü</button>
    <nav tabindex="0">
        <ul>
            ....
        </ul>
    </nav>
</div>

我知道它看起来很丑 :) 让我们把它弄得漂亮点。我会用SASS，你可以用任何东西来设计它。



* {
    padding: 0;
    margin: 0;
    list-style: none;
    border: 0;
    text-decoration: none;
    box-sizing: border-box;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.dropdown {
    position: relative;
    button {
        height: 2.5rem;
        padding: 0 1.25rem;
        background: #333;
        color: #fff;
        border-radius: 0.25rem;
        font-size: 1rem;
        cursor: pointer;
    }
    nav {
        position: absolute;
        top: 100%;
        left: 0;
        opacity: 0;
        visibility: hidden;
        transition: 300ms all;
        border: 2px solid #333;
        border-radius: 0.25rem;
        width: 12.5rem;
        ul {
            padding: 0.188rem 0;
            li {
                a {
                    display: block;
                    padding: 0.438rem 0.625rem;
                    color: #333;
                    &:hover {
                        background: #f8f8f8;
                    }
                }
            }
        }
    }
    &:focus-within nav {
        opacity: 1;
        visibility: visible;
        transform: translateY(0.25rem);
    }
}

好的，现在看起来不错:)

您可以在codepen上结帐。

2-顺风之路

不使用 CSS，如何让它更快？没错，用 Tailwind :D 让我们用 Tailwind 做个同样的下拉菜单。



<div class="p-4">
    <div class="group relative">
        <button class="bg-gray-800 text-white px-6 h-10 rounded">Menü</button>
        <nav tabindex="0" class="border border-2 bg-white invisible border-gray-800 rounded w-60 absolute left-0 top-full transition-all opacity-0 group-focus-within:visible group-focus-within:opacity-100 group-focus-within:translate-y-1">
            <ul class="py-1">
                <li>
                    <a href="#" class="block px-4 py-2 hover:bg-gray-100">
                        Edit
                    </a>
                </li>
                <li>
                    <a href="#" class="block px-4 py-2 hover:bg-gray-100">
                        Delete
                    </a>
                </li>
                <li>
                    <a href="#" class="block px-4 py-2 hover:bg-gray-100">
                        Reply
                    </a>
                </li>
            </ul>
        </nav>
    </div>
</div>

这是演示

注意：我使用的是 JIT。因此，如果某些变体不起作用（例如 group-focus-within），您可以tailwind.config.js像这样配置：



module.exports = {
  mode: 'jit',
  purge: ['./src/**/*.html'], // change it
  darkMode: 'media',
  theme: {
    extend: {
    },
  },
  variants: {
    extend: {},
  },
}

感谢您的阅读，祝大家度过美好的一天。

文章来源：https://dev.to/tayfunerbilen/dropdown-with-css-tailwind-i7p