JavaScriptでクリックでメニューを開く方法

Posted on by

今回は、JavaScriptを使ってクリックでメニューを開く方法をご紹介します。
このチュートリアルでは、HTML、CSS、JavaScriptを組み合わせて、
クリックによってメニューの表示・非表示を切り替える仕組みを作成します。

必要なファイル

  1. HTMLファイル
  2. CSSファイル
  3. JavaScriptファイル

ステップ 1: HTMLファイルの作成

まず、HTMLファイルを作成します。このファイルにはボタンとメニューの要素を定義します。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Click to Open Menu</title>
    <link rel="stylesheet" href="styles02.css">
</head>
<body>
    <button id="toggleButton02">Show Menu</button>
    <div id="dropdownMenu02" class="menu-hidden02">
        <ul>
            <li><a href="#">Menu Item A</a></li>
            <li><a href="#">Menu Item B</a></li>
            <li><a href="#">Menu Item C</a></li>
        </ul>
    </div>
    <script src="script02.js"></script>
</body>
</html>

ステップ 2: CSSファイルの作成

次に、CSSファイルを作成し、メニューのスタイルと非表示にするクラスを定義します。

/* styles02.css */
.menu-hidden02 {
    display: none;
}

#dropdownMenu02 {
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    padding: 10px;
    position: absolute;
    top: 50px;
    left: 0;
}

#dropdownMenu02 ul {
    list-style-type: none;
    padding: 0;
}

#dropdownMenu02 ul li {
    margin: 5px 0;
}

#dropdownMenu02 ul li a {
    text-decoration: none;
    color: #333;
}

ステップ 3: JavaScriptファイルの作成

最後に、JavaScriptファイルを作成し、ボタンのクリックイベントを
監視してメニューの表示・非表示を切り替えるスクリプトを記述します。

// script02.js
document.getElementById('toggleButton02').addEventListener('click', function() {
    var menu = document.getElementById('dropdownMenu02');
    if (menu.classList.contains('menu-hidden02')) {
        menu.classList.remove('menu-hidden02');
    } else {
        menu.classList.add('menu-hidden02');
    }
});

完成

以上で、クリックでメニューを開く機能が実装されました。
今回のチュートリアルでは、
ID名やクラス名に02を付けることで他のスクリプトと被らないようにしました。
これを基に、必要に応じてカスタマイズしてみてください。

まとめ

クリックでメニューを開く方法は、ユーザーインターフェイスを向上させるための基本的なスキルです。
今回の例を参考に、さまざまな場面で活用してみてください。
JavaScriptの基本的な操作を理解し、HTMLやCSSとの連携を深める良い機会となります。

質問やフィードバックがありましたら、
ぜひコメントを残してください。それでは、素敵なコーディングライフを！