【HTML】labelタグとラジオボタンでメニューバー

HTML上でWindows Formのようなメニューバーを実現するサンプルです。

簡単な説明

labelタグにfor属性を指定し、ラジオボタンと関連付けると、labelタグをクリックするだけでラジオボタンにチェックを入れることができます。

ラジオボタンにチェックが入っているとき、その隣接要素（＝表示したいサブメニュー）に対してdisplay:blockを設定することで、サブメニューを表示します。

メニュー部分以外をクリックしたときは開いているサブメニューを閉じたいので、そこだけはJavaScriptの処理を使っています。

HTML

<div id="menubar">
    <ul class="menu-category">
        <li class="menu-item">
            <input type="radio" class="menu-radio" name="radio-categories" id="radio-file" value="ファイル">
            <label for="radio-file" class="menu-label">ファイル</label>
            <ul class="radio-submenu">
                <li>新規</li>
                <li>新しいウィンドウ</li>
                <li>開く</li>
                <li>上書き保存</li>
                <li>名前を付けて保存</li>
            </ul>
        </li>
        <li class="menu-item">
            <input type="radio" class="menu-radio" name="radio-categories" id="radio-edit" value="編集">
            <label for="radio-edit" class="menu-label">編集</label>
            <ul class="radio-submenu">
                <li>切り取り</li>
                <li>コピー</li>
                <li>貼り付け</li>
                <li>削除</li>
            </ul>
        </li>
        <li class="menu-item">
            <input type="radio" class="menu-radio" name="radio-categories" id="radio-help" value="ヘルプ">
            <label for="radio-help" class="menu-label">ヘルプ</label>
            <ul class="radio-submenu">
                <li>ヘルプの表示</li>
                <li>バージョン情報</li>
                <li>お問い合わせ</li>
            </ul>
        </li>
    </ul>
</div>
<h1>HELLO WORLD!!</h1>

CSS

body{
    margin: 0;
}

.menu-category{
    margin: 0;
    padding: 0;
    list-style: none;
}

.menu-category, .radio-submenu{
    background: #666;
    color: #fff;
}

.menu-item{
    display: inline-block;
    vertical-align: top;
}

.menu-label{
    padding: 5px;
    display: inline-block;
}

.menu-radio{
    display: none;
}

.radio-submenu{
    display: none;
    position: absolute;
    list-style: none;
    margin: 0;
    padding: 0;
}

.radio-submenu li{
    padding: 5px;
}

.radio-submenu li:hover{
    background: #777;
    cursor: pointer;
}

/* チェック済みの.menu-radioに隣接する.menu-labelに隣接するulにCSSを適用 */
.menu-radio:checked + .menu-label + ul{
    display: block;
}

JavaScript

// メニューバー以外の場所をクリックしたらラジオボタンのチェックを外す
document.addEventListener('click', (e) => {
    if(e.target.closest('.menu-category') === null){
        document.querySelectorAll('.menu-radio').forEach((el) => {
            el.checked = false;
        });
    }
});