先日、あるクライアントから依頼されたサイトが全ページ（10p）静的のため、ページ追加や削除の度に全ページのサイドメニューを手入れしなくてはならず、非常に更新性が悪い状態にモヤモヤしていました。
wordpressとか使いたいのですがサーバ仕様とレギュレーションでかなわず…

仕方ないのでjavascriptでサイドメニューを共通外部ファイルとして読み込み、カレント表示（アクティブ表示とも言う？）まで対応したスクリプトを作成しました。

同じ悩みを抱えているフロントエンドエンジニアがいたらぜひ使ってください。

サイドメニューの外部共通ファイル化

1.外部サイドメニューをインクルードさせるjsファイルの作成

include.jsとして下記コードを保存。

function writeSide() {
$.ajax({
url: "sidenav.html", //パスはinclude.jsが読み込まれたHTMLファイルが基準になります。
cache: false,
async: false,
success: function (html) {
document.write(html);
}
});
}

2.実際に表示するsidenav.htmlの作成

sidenav.htmlを作成

<!--ie8対応のためjqueryを読み込ませています。-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
          var activeUrl = location.pathname.split("/")[3];
          var navList = $("#gnavi").find("a");
          navList.each(function () {
              if ($(this).attr("href") == activeUrl) {
                  $(this).parent().addClass("current");
              };
          });
      });
</script>

<aside id="sideArea"><nav>
<ul id="gnavi">
 	<li><a href="article01.html">サイドメニュー1</a></li>
 	<li><a href="article02.html">サイドメニュー2</a></li>
 	<li><a href="article03.html">サイドメニュー3</a></li>
</ul>
</nav></aside>

3.読み込み先のhtml内に以下を記述

headに挿入

<script src="js/include.js" type="text/javascript" charset="UTF-8"></script>

表示箇所に挿入

<script type="text/javascript" charset="UTF-8">
writeSide();
</script>

解説

・include.jsで外部ファイルを読み込む準備。
・表示したい箇所に記述した読み込み用スクリプト部分にインクルード。
・表示させたsidenav.html内の#navi以下のaタグに現在表示しているurlと一致するurlを検索。
・一致したurlの親要素にあたる<li>にclass=”current”を追加する。

※var activeUrl = location.pathname.split(“/”)[3];の[]内数値は階層によって変更します。ルート直下なら1を入れてください。

※カレント表示のcssなどは適宜指定してください。