jQueryでグローバルナビの現在地をアクティブに（CSSクラス付与）

Webサイト構築で、ほぼ必須と言ってもいいグローバルナビゲーションと現在位置（カレント）表示。
毎回1から制作するのもアレなので、汎用的に使えそうな感じで作成してみました。

HTML、CSS は状況に合わせて変更するものとして、JavaScript はクラス名を変えたいとき以外はほぼ触らなくても良いようにしました。

主な仕様

サイトルート相対パス（/ から始まるパス）を前提とする
現在のURL とナビの URL がマッチしたらクラス（current）付与
第一階層は aaaa.html、bbbb.html を識別
（ナビに index.html 以外に組み込む必要なファイルがあった場合のため）
第二階層以下はディレクトリ名まで識別
ナビは ul で記述する

見た目はとりあえずこんな感じで。

HTML

<nav role="navigation">
  <ul class="globalNavi">
    <li><a href="/index.html">ナビ 1</a></li>
    <li><a href="/foo.html">ナビ 2</a></li>
    <li><a href="/1st_level_1/">ナビ 3</a></li>
    <li><a href="/1st_level_2/">ナビ 4</a></li>
    <li><a href="/1st_level_3/2nd_level_1/">ナビ 5</a></li>
    <li><a href="/1st_level_3/2nd_level_2/">ナビ 6</a></li>
  </ul>
</nav>

CSS

.globalNavi {
  display: table;
  table-layout: fixed;
  width: 1000px; /* 適宜変更 */
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.globalNavi li {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  overflow: hidden;
}
.globalNavi li:first-child a {
  border-left: 1px solid silver;
}
.globalNavi li a {
  display: block;
  background-color: white;
  border-top: 1px solid silver;
  border-right: 1px solid silver;
  padding: 15px 0;
  color: #444;
  text-decoration: none;
  line-height: 1.3;
}
/* ホバー・カレント表示の状態 */
.globalNavi li a.active,
.globalNavi li a:hover {
  background-color: #ddd;
  color: white;
}
 /* 角丸(必要な場合に) */
.globalNavi li:first-child a {
  border-radius: 5px 0 0 0;
}
.globalNavi li:last-child a {
  border-radius: 0 5px 0 0;
}

JavaScript (jQuery)

$(function() {
    var url = location.pathname;
    var url_dir_length = url.split('/').length;
    var url_file_name = url.split('/')[url_dir_length - 1];
    var url_dir_name = url.split('/')[url_dir_length - 2];
    var navi = $(".globalNavi a");

    navi.each(function(){
        var href = $(this).attr("href");
        var href_dir_length= $(this).attr("href").split('/').length;
        if (url_dir_length == href_dir_length) {
          if (url_dir_name == '') {// case if url is not contains directry.
              var href_dir_name = href.split('/')[href_dir_length - 2];
              var href_page_name = href.split('/')[href_dir_length - 1];
//      If there is no directory and the file names match,
//       or if the request URL is /, it matches index.html
          if ((url_file_name == href_page_name) || (url_file_name=='' && href_page_name=='index.html')) {
          $(this).addClass("current");
          return false;
          }
        } else {
//          check if last directory name is equals or not.
//          if equals, then add class 'active'. page name (xxx.html) is not checked.
              var href_dir_name = href.split('/')[href_dir_length - 2];
              if (url_dir_name == href_dir_name) {
                  $(this).addClass("current");
                  return false;
              }
          }
        }
    });
});