メニューのマウスオーバーで下線がスライドしてついてくるサンプル

サイトのグローバルメニューの各メニューをマウスオーバーした時に、アンダーラインがメニュー幅に合わせてスライドしながらアニメーションでついてくるサンプルをご紹介します。
CSSと簡単なjQueryで実装しています。

まずはサンプルをご覧ください。

See the Pen Menu with Underline Sliding Animation by digistate (@digistate) on CodePen.

HTMLの構造

HTMLは至ってシンプル。
メニュー用のリスト(ul)をナビゲーション(nav)タグで括っています。
メニュー用のリスト要素の次に、スライドしてついてくる下線用の要素(#slide-line)があります。jQueryでマウスオーバーに合わせてこの下線の位置を変更してやります。

<nav id="navigation">
  <ul>
    <li class="current-item">
      <a href="#">Home</a>
    </li>
    <li>
      <a href="#">Services</a>
    </li>
    <li>
      <a href="#">Company Profile</a>
    </li>
    <li>
      <a href="#">Contact Us</a>
    </li>
  </ul>
  <span id="slide-line"></span>
</nav>

WordPressのカスタムメニューでは、現在表示しているページのURLがメニューに指定されているURLと同じ場合は、.current-menu-item などのセレクタがclassにセットされますが、サンプルではそれを意識してHomeメニューには .current-item というセレクタを付けてみました。

このセレクタがある場合は、ページを表示した際はカレントのメニューに下線がつくようにしています。

下線用のCSS

下線用の要素(#slide-line)は、絶対位置として移動させるので、親要素(#navigation)には必ず position:relative を指定しておきます。

 #navigation{
  position: relative;
}

下線用の要素(#slide-line)のCSSは、絶対位置(position:absolute)の指定、下線の太さ(高さ=height)、色(backgrond-color)、そしてマウスオーバー時にCSSだけでアニメーションするよう、transition をセットしておきます。

#slide-line{
    position: absolute;
    bottom: 0;
    height: 2px;
    background-color:#75C2FF;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
}

Javascript

まず、メニューのURLと現在表示しているページのURLが同じ(.current-item がある)場合は、そのメニューに下線がつくようにしています。

currentItem = $(".current-item");
if (currentItem[0]) {
  currentItem.css({
    "width": currentItem.width(),
    "left": currentItem.position().left
  });
}

次がマウスオーバー時に下線が移動するためのコード。
CSSでtransitionを指定しているので、下線はjQueryでアニメーションさせるのではなく、ただ幅と位置をインラインでCSSを書き換えているのみです。

$("#navigation li").hover(
  // ホバー時
  function(){ 
    // ホバーしているメニューの幅と左位置に変更
    $("#slide-line").css({
      "width": $(this).width(),
      "left": $(this).position().left
    });
  },
  // ホバーが外れたとき
  function(){
    // カレントメニューがある場合
    if (currentItem[0]) {
      // カレントメニューに下線を戻す
      $("#slide-line").css({
        "width": currentItem.width(),
        "left": currentItem.position().left
      });
    }
    // カレントメニューがない場合
    else {
      // 下線を消す
      $("#slide-line").width(0);
    }
  }
 );

いかがでしたか？　
jQueryでは位置だけを指定するのみなので、やってみれば結構簡単ですね！

今後の弊社WordPressテーマにもこんなエフェクトの効いたグローバルメニューを実装してみようと思います。