javascriptで作った共通メニューに現在地表示(カレント)をさせる方法

先日、あるクライアントから依頼されたサイトが全ページ(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などは適宜指定してください。

集客に困らない仕組みを作りたい人は、他にいませんか?

自社のサービス、商品だからこそ気づかない「本当の魅力」を引き出し「お客に届くメッセージ」を作ります。
今まで幾度となく集客に成功し、売上アップの実績を上げているノウハウを基にしていますので貴社でも十分効果を発揮します。
ステップメールやメルマガ、チラシ・DMなどなど、お客様へのアプローチを無駄にせずしっかり利益の残る仕組みにしませんか?
「うちは特殊な業界だから...」と諦める必要はありません。

カサネルが行っているのはどんな業種、業態、客層でも十分通用する「普遍」の集客プラン。
貴社でもできるアドバイスがたくさんあります。

もし、あなたが毎日「売上を上げるには...」と悩んでいるのなら、今すぐお問い合わせください。

お問い合わせはこちら

関連記事一覧

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


PAGE TOP