「menuSlider」はメニューバーへスライダー機能を与えるjQueryプラグインです。ぬるぬると動くアニメーションが何とも気持ち良く、新しい感覚のUIを実装できます。

menuSlider

メニューボタンへの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アニメいいですね〜！