CSSでのドロップダウン

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
}

これは動作します.しかし、1つの問題.をクリックします.<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を使用せずに、どのように高速にすることができますか?はい、Tarwindを使用して: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>

そして、ここでdemo
注意: JITを使っています.いくつかの変形が動作しない場合(グループフォーカスなど)を設定できますtailwind.config.js このように

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

読んでくださってありがとうございます.