アニメーションが気持ちいいメニュースライダーを実装する「menuSlider」
- 2013-09-12 (木) 22:30
- JavaScript
メニューボタンへのhover時にカラーを変更させることで、今どのボタンへhoverしているのかを明確にする効果はよくありますが、それをスライダーで表現するのは初めて体験しました。クロスブラウザ対応がなされていて、Chrome, Firefox, Opera, IE8+はサポートしているとのことです。
今回からgifを導入してみました。こんな感じにアニメーションしますというのが伝えやすいですね。
それでは「menuSlider」の実装方法をご紹介します。まずはjQuery含む外部ファイルを読み込みます。
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <script src="jquery.menuSlider.min.js"></script>
HTMLはこのようにマークアップします。class=”selectedMenuItem”でロード時にどこにスライダーを配置するかを指定します。
<div id="slideContainer"> <ul> <li class="selectedMenuItem">One</li> <li>Two</li> <li>Three</li> <li>Four</li> </ul> </div>
CSSはこのように指定しました。
.menuSlider { margin-top: 30px; width: 30px; left: 80px; } li { list-style: none; float: left; margin-left: 10px; }
JavaScriptはこのように実装します。ここでスライダーのCSS定義が可能です。
$("#slideContainer").menuSlider({ thickness:"2px", borderStyle:"solid", borderColor:"blue", borderSides:"border-bottom", bgColor:"rgba(0,0,150,0.4)", bgRadius:"2px", speed:.4, tStyle:"linear" });
するとこのように作ることが出来ました。
全く作り込んでいなくいまいちな出来で申し訳ありませんが。。作り込めばDemoのようなスライダーが実装できます。参考にどうぞ。いやーしかしGifアニメいいですね〜!