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

CSSとJavaScriptで垂直タブメニューを作成する方法【サンプルコード付き】

垂直タブメニューとは、縦方向に並べたボタンをクリックすると、その横に配置されたコンテンツの表示内容が切り替わるUIのことです。レイアウトやデザインはCSSで定義し、タブの切り替え処理はJavaScriptで制御します。本記事では、実際に動作するサンプルコードをもとに、その実装手順をわかりやすく解説します。

サンプルコード

以下は、CSSとJavaScriptを使用して垂直タブメニューを実装した完全なコード例です。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
    box-sizing: border-box
}
.tab {
    float: left;
    border: 1px solid blue;
    background-color: black;
    width: 20%;
    height: 200px;
}
.tab button {
    display: block;
    background-color: inherit;
    color: white;
    padding: 22px 16px;
    width: 100%;
    border: none;
    outline: none;
    text-align: left;
    cursor: pointer;
    transition: 0.3s;
    font-size: 17px;
}
.tab button:hover {
    background-color: gray;
}
.tab button.active {
    background-color: #006400;
}
.demo2 {
    float: left;
    padding: 0px 10px;
    border: 1px solid;
    width: 70%;
    border-left: none;
    height: 200px;
}
</style>
</head>
<body>
<h2>Examination</h2>
<p>Following is the exam information:</p>
<div class="tab">
    <button class="demo" onclick="infofunc(event, 'dates')" id="current">Exam Dates</button>
    <button class="demo" onclick="infofunc(event, 'centre')">Exam Centre</button>
</div>
<div id="dates" class="demo2">
    <h3>Dates</h3>
    <p>Exam date will be announced on 25th March.</p>
</div>
<div id="centre" class="demo2">
    <h3>Centre</h3>
    <p>Exam Centre will be announced on 30th March.</p>
</div>
<script>
function infofunc(e, info) {
    var i, content, links;
    content = document.getElementsByClassName("demo2");
    for (i = 0; i < content.length; i++) {
        content[i].style.display = "none";
    }
    links = document.getElementsByClassName("demo");
    for (i = 0; i < links.length; i++) {
        links[i].className = links[i].className.replace(" active", "");
    }
    document.getElementById(info).style.display = "block";
    e.currentTarget.className += " active";
}
document.getElementById("current").click();
</script>
</body>
</html>

コードのポイント

  • .tabクラス：float: leftでメニューを左側に配置し、幅20%の縦型ナビゲーションエリアを作成しています。
  • ボタン要素：display: blockによりボタンが縦に積み重なり、:hover時はグレー、選択中（.active）は濃い緑色に変化します。
  • infofunc関数：まずすべてのコンテンツを非表示にし、アクティブ状態をリセットしたうえで、クリックされたタブに対応するコンテンツだけを表示します。
  • 初期表示：最後のdocument.getElementById("current").click();により、ページ読み込み時に最初のタブが自動的に開いた状態になります。

実行結果

上記のコードをブラウザで実行すると、次のような画面が表示されます。

CSSとJavaScriptで垂直タブメニューを作成する方法【サンプルコード付き】

続いて、「Exam Centre」など別のタブをクリックしてみましょう。クリックしたタブの背景色が変わり、対応するコンテンツへと表示が切り替わります。

CSSとJavaScriptで垂直タブメニューを作成する方法【サンプルコード付き】

このように、CSSだけで見た目を整え、JavaScriptで表示の切り替えを制御することで、シンプルながら実用的な垂直タブメニューを簡単に作成できます。タブの数を増やしたり、色やサイズを変更したりして、自分のサイトに合わせてカスタマイズしてみてください。

  1. CSSとJavaScriptでスナックバー／トーストを実装する方法【サンプルコード付き】

    スナックバー（トースト）は、画面の端に一時的に表示される小さな通知メッセージのことです。「保存が完了しました」などの操作結果をユーザーへ伝える際によく使われ、数秒後に自動的に消えるのが特徴です。CSSとJavaScriptを組み合わせれば、特別なライブラリを使わずとも簡単に実装できます。以下に、ボタンをクリックすると画面下部にスナックバーが表示され、数秒後にフェードアウトするサンプルコードを示します。コード例<!DOCTYPE html> <html> <head> <meta name="viewport" content=&qu

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

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