【数行で可能！】jsでグローバルナビのカレント表示自動化を実装する方法

Web2016年9月10日

jsでグローバルナビのカレント表示を自動化する方法をご紹介いたします。
静的サイトでもWordPressでもどちらでも活用することができますので、ぜひご参考にしていただければ幸いです。

※サイトのデザインや設計に応じて、適宜カスタマイズしてご使用下さい

サンプルコード

js

(function () {

$(function(){
    var dir = location.href.split('/');
    if(dir&&dir[3]){
        $('body').addClass("g-"+dir[3]);
    }
});

})(jQuery);

※jQueryを読み込んでいる場合のスクリプトとなります

css

body.g-○○○ header nav li.○○○ a,
body.g-○○○ header nav li.○○○ a,
body.g-○○○ header nav li.○○○ a,
body.g-○○○ header nav li.○○○ a,
body.g-○○○ header nav li.○○○ a{
    color:#387922;
    padding-bottom:13px;
    border-bottom:3px solid #387922;
}

html

<nav>
<ul>
<li class="○○○"><a href="/○○○/">メニュー1</a></li>
<li class="○○○"><a href="/○○○/">メニュー2</a></li>
<li class="○○○"><a href="/○○○/">メニュー3</a></li>
<li class="○○○"><a href="/○○○/">メニュー4</a></li>
<li class="○○○"><a href="/○○○/">メニュー5</a></li>
</ul>
</nav>

解説

jsにて、最上部のディレクトリ名を抜き出しbodyにclass="g-ディレクトリ名"が付与されるようにします。

cssにて、グローバルナビのカレント表示用スタイルを記述します。Web屋の芝生DIYではheader要素内のul > li > aに対し文字色を変更し、下部にborderが表示されるようにしています。

[○○○]にはサイトやテーマに応じて任意のclass名を記述してください。

まとめ

数ページ程度のサイトであればページごとにclassやidを付与することで固有のスタイルを当てることもできますが、中規模～大規模のサイトや、WordPressでの実装などではグローバルナビはワンソースで実装する必要があります。
ご紹介した方法は非常に汎用性の高いものなので、Webサイト制作の際にぜひご活用いただければ幸いです。

この記事を読んでいる方にオススメの記事

「Web」の他の記事を読む

この記事にコメントする

※承認制のため、即時には反映されません。