サイトのグローバルメニューの各メニューをマウスオーバーした時に、アンダーラインがメニュー幅に合わせてスライドしながらアニメーションでついてくるサンプルをご紹介します。
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テーマにもこんなエフェクトの効いたグローバルメニューを実装してみようと思います。