Javascriptでシンプルにナビゲーションメニューを管理する方法

WEB制作、マーケティングに関する情報をお届けします。

Javascriptでシンプルにナビゲーションメニューを管理する方法

2024.08.20

カテゴリ：WEB制作

タグ：

JavaScript

HTMLベースでホームページを制作する場合、メニューなどを直書きするケースもあるかと思います。
ただ、ページが増えたり、ナビゲーションメニューに変更があった場合は全てのファイルを修正する必要があります。
そんな時には外部ファイルにJavascriptでメニューを出力できるようにして管理するのもおすすめです。
この場合は一つのJavascriptファイルを変更するだけで対応できます。

デモを見る

コードを紹介

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
</head>
<body>
    <!-- ナビゲーションが挿入される場所 -->
    <nav id="nav"></nav>

<script type="text/javascript" src="dynamic-navigation.js"></script>
</body>
</html>

Javascript

document.addEventListener('DOMContentLoaded', function() {
    // ナビゲーション要素を取得
    const navElement = document.getElementById('nav');

    // 動的に生成するHTMLコンテンツ
    const navContent = `
        <ul>
            <li><a href="">ホーム</a></li>
            <li><a href="">サービス</a></li>
            <li><a href="">会社概要</a></li>
            <li><a href="">お問い合わせ</a></li>
        </ul>
    `;

    // ナビゲーション要素の中にHTMLを挿入
    navElement.innerHTML = navContent;
});

コードを解説

方法はとても簡単なものです。
まずは吐き出したい『ID』名を設定します。

const navElement = document.getElementById('nav');

変数にテキストを設定して『innerHTML』でそのまま出力します。

// 動的に生成するHTMLコンテンツ
const navContent = `
    <ul>
        <li><a href="">ホーム</a></li>
        <li><a href="">サービス</a></li>
        <li><a href="">会社概要</a></li>
        <li><a href="">お問い合わせ</a></li>
    </ul>
`;

// ナビゲーション要素の中にHTMLを挿入
navElement.innerHTML = navContent;