[jQuery]jQueryを使ってメニューのアクティブを判断する

2017/4/27 2021/7/18 jQuery

久しぶりのhtml案件疲れました。
WordPressばかり触っていると何をするにしても楽してるなと改めて感じました。

で、タイトルにもあるようにスタティックなhtmlのサイトだとメニューのアクティブを判断するのって無理ですよね。
そこでjavescriptを使わなきゃならないのです。

今回はそのソースを掲載しとこうと思います。

Contents

1 html
2 CSS
3 js
4 まとめ

html

<div class="nav">
<h1>page 01</h1>
    <ul>
        <li><a href="index.html">menu01</a></li>
        <li><a href="page02.html">menu02</a></li>
        <li><a href="page03.html">menu03</a></li>
        <li><a href="page04.html">menu04</a></li>
        <li><a href="page05.html">menu05</a></li>
    </ul>
</div>

これは普通にulでメニューを作成しているだけです。

CSS

.nav {
  width: 500px;
  margin: 3em auto;
}
@media only screen and (max-width: 999px) {
  .nav {
    width: 100%;
  }
}
.nav h1 {
  border-bottom: 1px dotted #FF0044;
  color: #FF0044;
  padding: 0.5em 0 0.5em;
  margin-bottom: 1em;
  font-size: 2em;
}
.nav ul {
  letter-spacing: -0.4em;
}
.nav ul li {
  letter-spacing: normal;
  display: inline-block;
  width: 100px;
}
@media only screen and (max-width: 999px) {
  .nav ul li {
    width: 20%;
  }
}
.nav ul li a {
  display: block;
  text-decoration: none;
  text-align: center;
  border: 1px solid #FF0044;
  border-left: 0;
  background: #ff7096;
  color: #fff;
  padding: 1em 0;
}
.nav ul li a.active {
  background: #970029;
}
.nav ul li:first-child a {
  border-left: 1px solid #FF0044;
}

CSSもお好みで変更してください。

js

$(function(){
  $('a').each(function(){
    var $href = $(this).attr('href');
      if(location.href.match($href)) {
      $(this).addClass('active');
    } else {
      $(this).removeClass('active');
    }
  });
});

ちょっと解説すると現在ページのURLとhref属性の値を比べて同じだったらclass=activeを付けて違ったらclass=activeを消す。
とやってることは以上になります。