どのページを開いているか、ひと目で分かるように「開いたページのメニュー色を変えたい！」
でも、全部のページでHTMLを編集するのはとっても面倒ですよね。
コーディング途中でメニュー構成が変わったりすると、直すのも一苦労です。。
そんなときに役立つのが、かんたんな記述で実装できる、Jqueryを使った方法です。
本当にかんたんな数行の記述でできてしまうので、ぜひ試して見てください。
HTMLの準備
まず最初にメニューの構造をHTMLで用意していきます。
説明は横長のメニューで進めて行きます。
<!-- メニュー -->
<nav id="gnav">
<div id="gnav_list">
<ul>
<li><a href="./index.html">HOME</a></li>
<li><a href="./blog.html">ブロク記事</a></li>
<li><a href="./company.html">会社概要</a></li>
<li><a href="./dl.html">会社案内ダウンロード</a></li>
<li><a href="./recruit.html">採用情報</a></li>
<li><a href="./contact.html">お問い合わせ</a></li>
</ul>
</div>
</nav>完成イメージはこんな感じです。
ページが切り替わると、メニューの色の位置が変わって行きます。
CSSの準備
次にCSSの記述です。
ここではベースとなるメニューのデザインと、このあとの記述で付与するactiveクラスのデザインを書いて行きます。
まず、メニューのベースデザインを記述します。
ここは好きなデザインで大丈夫です。
/* メニュー全体のデザイン */
nav {
background-color: #333;
color: #fff;
text-align: center;
}
/* メニューを横並びにする */
nav ul {
display: flex;
justify-content: center;
}
/* メニューリンクの設定 */
nav ul li a {
display: block;
color: #999;
padding: 20px 35px;
}
nav ul li a:hover {
transition: all 0.3s; /* アニメーションの動きの速度 */
background-color: #ccc;
color: #fff;
}ベースデザインができたら、表示ページと同じ項目のメニューの色を変えるデザインを書いて行きます。
開いたページのaタグにactiveクラスを付与するので、記述はこんな感じになります。
/* 表示ページのメニューデザイン */
a.active {
background-color: #28bfe7;
color: #fff;
}背景の色を変えて文字の色を変えるだけなら、たったこれだけ。
jQueryの読み込み
今回の機能を使いたいすべてのWEBページにjQueryとjsファイルを読み込めるようにしましょう。
jQueryを読み込んで置かないと、これからjsファイルに記述するプログラムが動かないので注意してください。
jsファイルのファイル名は管理のしやすい好きな名前をつけてください。
「うまく読み込めない」方や「よく分からない」という方は過去の記事の中でも詳しく紹介しているので、こちらも参考にしてみてください。
JavaScript関係の情報はページの一番下（/bodyの直前）で読み込むのがポイントです。
JavaScriptをページの一番最初で読み込んでしまうと、コンテンツの読み込みよりもJavaScriptの読み込みが優先されてしまい、表示速度に影響が出てしまいます。
表示速度に影響が出ると、SEOの評価にも影響が出てきます。
表示ページのaタグにclassを付与する方法
ひとつまで読み込めるようにしたjsファイルに下記のコードを記述します。
HTMLき記述したメニューの構造が同じ方はコピペで大丈夫です。
// アクティブページのリンク色変える
href = location.href;
var links = jQuery("#gnav_list ul li a");
//classを付与したいaタグを含めた階層をカッコ内に記述
console.log(links);
links.each(function (index, value) {
if (value.href == href) {
jQuery("#gnav_list ul li").children("a").eq(index).addClass("active");
//classを付与したいaタグまでの階層をjQueryカッコ内に記述
}
});はじめのvar links = jQueryのカッコ内にはclassを付与したいaタグまでの階層を書きます。
このときのポイントは対象のaタグも含めて記述することです。
次にconsole.log(links)の中のjQuery(“#gnav_list ul li”)では先程とは違い、aタグを含まない階層を記述します。
そして.childrenでつなぎ、対象となるaタグが出てきます。
最後に付与したいクラスを.addClass(“active”)に記述して完成です。
ここではactiveというクラスを付与しています。
このactiveクラスが付与されたときのデザインは先述のCSSの準備で記述しています。
まとめ
jQueryで開いているページの情報を取得して、HTMLに記述されているhrefの情報と照合し、一致したものにclassを付与する。
これで開いたページのメニューの色やデザインなんかを変えていたんですねー
JavaScriptやjQueryって使っていくほどに、何だこれだけのことだったのかって思います。
なんかすごいことやってるんじゃないかって、覚えたての頃なんかは思っていましたが、ゆっくり向き合えば、理解できるもんだなぁと思いました。
今回も最後まで読んでいただきありがとうございました。
コメント