[JS]矩形やラインが移動するナビゲーションのホバーエフェクトを簡単に実装できるスクリプト -HoverSlippery
Post on:2016年7月21日
sponsors
リスト要素で実装したナビゲーションに矩形が移動するラーバランプエフェクト、シンプルなラインが移動するホバーエフェクトを簡単に実装できるスクリプトを紹介します。
HoverSlipperyのデモ
デモでは、実際の動作とコードを編集することができます。
ホバーのエフェクトは上から、矩形、二重線、下線、上線の4種類。
カラーやラインの太さ、角丸、スピードなどをオプションで簡単に変更できます。
アクティブのアイテムはデフォルト時は左端で、アイテムをクリックするとそこがアクティブになり、そこに戻るようになります。
デモページ: アクティブをHomeからFashionに変更
HoverSlipperyの使い方
Step 1: 外部ファイル
jQueryと当スクリプトを外部ファイルとして記述します。
|
1 2 3 4 5 6 7 |
<body> ... コンテンツ ... <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="hoverslippery.min.js"></script> </body> |
Step 2: HTML
各アイテムはリスト要素で実装し、現在位置のアイテムに「.active」を与えます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<nav class='forUsePlugin'> <ul> <li class='active'> <a href="#">Item 1</a> </li> <li> <a href="#">Item 2</a> </li> <li> <a href="#">Item 3</a> </li> <li> <a href="#">Item 4</a> </li> <li> <a href="#">Item 5</a> </li> </ul> </nav> |
Step 3: CSS
ナビゲーション用にリスト要素のスタイルを定義します。
|
1 2 |
ul { padding:0;margin:0; } li { display: inline-block; } |
Step 4: JavaScript
jQueryのセレクタでul要素を指定し、スクリプトを実行します。
|
1 2 3 |
$(document).ready(function(){ $('.forUsePlugin').hoverSlippery(); }) |
sponsors
