【JavaScript】ドロップダウンメニューを作る方法

JavaScriptでドロップダウンメニューを作成する方法を紹介します。この方法は、基本的なHTMLとCSSを使用してドロップダウンメニューを構築し、JavaScriptでインタラクティブな機能を追加するものです。

HTMLの準備

まず、HTMLで基本的なドロップダウンメニューの構造を作成します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ドロップダウンメニュー</title>
    <style>
        /* CSSは後で追加します */
    </style>
</head>
<body>

<div class="dropdown">
    <button class="dropbtn">メニュー</button>
    <div class="dropdown-content">
        <a href="#">リンク 1</a>
        <a href="#">リンク 2</a>
        <a href="#">リンク 3</a>
    </div>
</div>

<script>
    // JavaScriptは後で追加します
</script>

</body>
</html>

CSSでスタイルを追加

次に、ドロップダウンメニューの見た目をCSSでスタイリングします。

/* ドロップダウンメニューのコンテナ */
.dropdown {
    position: relative;
    display: inline-block;
}

/* ドロップダウンボタンのスタイル */
.dropbtn {
    background-color: #3498db;
    color: white;
    padding: 10px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

/* ドロップダウンメニューの内容（非表示） */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* ドロップダウンメニューのリンクスタイル */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* リンクにホバー時のスタイル */
.dropdown-content a:hover {
    background-color: #f1f1f1;
}

JavaScriptでドロップダウンを動作させる

最後に、JavaScriptを使ってボタンをクリックした際にドロップダウンメニューが表示されるようにします。

document.querySelector('.dropbtn').addEventListener('click', function() {
    const dropdownContent = document.querySelector('.dropdown-content');
    dropdownContent.style.display = dropdownContent.style.display === 'block' ? 'none' : 'block';
});

// ドキュメント全体にクリックイベントを設定し、メニュー外をクリックしたらメニューを閉じる
window.addEventListener('click', function(event) {
    if (!event.target.matches('.dropbtn')) {
        const dropdowns = document.querySelectorAll('.dropdown-content');
        dropdowns.forEach(function(dropdown) {
            if (dropdown.style.display === 'block') {
                dropdown.style.display = 'none';
            }
        });
    }
});

サンプル

ボタンをクリックするとメニューが開きます。

リンク 1リンク 2リンク 3

まとめ

このコードを組み合わせることで、シンプルなドロップダウンメニューを作成することができます。メニューはクリックで開閉でき、メニュー外をクリックすると自動的に閉じられます。追加のスタイルやアニメーションを加えることで、より洗練されたドロップダウンメニューにすることも可能です。