• Popular
  • Category
  • Tags
  • アーカイブ

News

follow us in feedly
Toggle

技術情報・Tips

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

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

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

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

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


HTMLの構造

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

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

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

下線用のCSS

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

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

Javascript

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

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


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

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

URL
TBURL

COMMENT ON FACEBOOK

Return Top