JSを使わないドロップダウンメニュー

実行結果

左下にドロップダウンするメニューのサンプル

サンプルコード

<div class="dropdown-container" data-position="bottom-left" >
    <input type="checkbox" id="dorpdown-heading">
    <label for="dorpdown-heading">メニュー</label>
    <ul>
        <li>アイテム - 1</li>
        <li>アイテム - 2</li>
        <li>アイテム - 3</li>
        <li>アイテム - 4</li>
        <li>アイテム - 5</li>
    </ul>
</div>

.dropdown-container {
    position: relative;
}

.dropdown-container > input {
    display: none;
}

.dropdown-container > *:last-child{
    position: absolute;
    display: none;
    white-space: nowrap;
}

.dropdown-container[data-position="bottom-right"] > *:last-child{
    left: 0px;
}

.dropdown-container[data-position="bottom-left"] > *:last-child{
    right: 0px;
}

.dropdown-container > input:checked ~ *:last-child{
    display: block;
}

概説

チェックボックスはクリックするごとにチェックされている状態とチェックされていない状態を行き来するので、それを利用してドロップダウンメニューの表示を管理します。

• .dropdown-container > input でチェックボックスそのものが表示されないように指定しています。
• .dropdown-container はドロップダウンメニューを position: aboslute で指定する都合で、 position: relative か position: absolute である必要があります。
• .dropdown-container > *:last-child によってドロップダウンメニューが表示されているとき/されていないとき共通のスタイルを指定しています。
• .dropdown-container > input:checked ~ *:last-child によって、チェックボックスが checked な場合にドロップダウンメニューが表示されるようにしています。
• .dropdown-container[data-position="bottom-right"] と .dropdown-container[data-position="bottom-left"] > *:last-child によって、ドロップダウンメニューの表示位置を data-position で指定できるようにしています。