JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

CSSとJavaScriptでクリック式ドロップダウンメニューを作成する方法【サンプルコード付き】

CSSとJavaScriptを組み合わせれば、ボタンのクリックで開閉できるドロップダウンメニューを簡単に実装できます。この記事では、実際に動作するサンプルコードをもとに、HTML・CSS・JavaScriptそれぞれの役割と仕組みをわかりやすく解説します。

サンプルコード

以下は、CSSとJavaScriptを使用してクリック可能なドロップダウンメニューを作成する完全なコード例です。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
.menu-btn {
    background-color: #7e32d4;
    color: white;
    padding: 16px;
    font-size: 20px;
    font-weight: bolder;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    border: none;
}
.dropdown-menu {
    position: relative;
    display: inline-block;
}
.menu-content {
    display: none;
    position: absolute;
    background-color: #017575;
    min-width: 160px;
    z-index: 1;
}
.links {
    color: rgb(255, 255, 255);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size: 18px;
    font-weight: bold;
    border-bottom: 1px solid black;
}
.links:hover {
    background-color: rgb(8, 107, 46);
}
.dropdown-menu:hover .menu-btn {
    background-color: #3e8e41;
}
</style>
</head>
<body>
<h2>下のドロップダウンボタンをクリックしてメニューを開閉できます</h2>
<div class="dropdown-menu">
<button class="menu-btn">Open <</button>
<div class="menu-content">
<a class="links" href="#">Contact Us</a>
<a class="links" href="#">Visit Us</a>
<a class="links" href="#">About Us</a>
</div>
</div>
<script>
let dropdownBtn = document.querySelector('.menu-btn');
let menuContent = document.querySelector('.menu-content');
dropdownBtn.addEventListener('click',()=>{
    if(menuContent.style.display===""){
        menuContent.style.display="block";
    } else {
        menuContent.style.display="";
    }
})
</script>
</body>
</html>

実行結果

上記のコードをブラウザで表示すると、紫色の「Open」ボタンが配置されたページが表示されます。この時点ではメニュー部分は非表示になっています。

CSSとJavaScriptでクリック式ドロップダウンメニューを作成する方法【サンプルコード付き】

「Open」ボタンをクリックすると、以下のようにメニューが展開され、「Contact Us」「Visit Us」「About Us」の3つのリンクが縦に並んで表示されます。もう一度ボタンをクリックすれば、メニューは再び閉じます。

CSSとJavaScriptでクリック式ドロップダウンメニューを作成する方法【サンプルコード付き】

コードの解説

HTMLの構造

.dropdown-menu クラスのコンテナの中に、開閉用のボタン（.menu-btn）とメニュー本体（.menu-content）を配置しています。メニュー内の各項目は .links クラスを付けたアンカータグで実装されています。

CSSによるスタイリング

.menu-content は初期状態で display: none により非表示にしており、position: absolute と z-index: 1 の指定によって、ボタンの下に重ねて表示されるようになっています。また、.links:hover でリンクにマウスカーソルを合わせた際の背景色の変化を定義し、.dropdown-menu:hover .menu-btn でボタンのホバー時の色も切り替えています。

JavaScriptによる開閉制御

document.querySelector() でボタンとメニュー要素を取得し、addEventListener('click', ...) でクリックイベントを監視します。クリックのたびに menuContent.style.display の値を判定し、空であれば "block" を設定してメニューを表示、表示中であれば空文字に戻して非表示にする——というトグル処理を実現しています。

このように、数行のJavaScriptとシンプルなCSSだけで、クリック操作で開閉できるドロップダウンメニューを実装できます。ナビゲーションバーやサイドメニューなど、さまざまな場面で応用できるので、ぜひ自分のプロジェクトでも試してみてください。

  1. CSSとJavaScriptでアコーディオン（開閉パネル）を作成する方法をわかりやすく解説

    CSSとJavaScriptを組み合わせることで、クリックすると内容が開閉する「アコーディオン（折りたたみパネル）」を簡単に実装できます。本記事では、実際に動作するサンプルコードをもとに、その作成手順と仕組みを詳しく解説します。 アコーディオンの実装例 以下は、HTML・CSS・JavaScriptを使ってアコーディオンを実装した完全なサンプルコードです。 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, ini

  2. CSSだけで実装！ホバーすると開くドロップダウンメニューの作り方

    CSSだけを使って、マウスホバー時に開くドロップダウンメニューを実装する方法を紹介します。JavaScriptに頼らず、:hover擬似クラスとdisplayプロパティを組み合わせることで、シンプルかつ軽量なドロップダウンメニューが作れます。実装例以下は、ボタンにカーソルを合わせるとメニューが展開されるドロップダウンメニューの完全なコード例です。<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-s