jQueryを用いたホバー時のエフェクトが泡のようなナビゲーション[js]

Codropsより、jQueryを用いたホバー時のエフェクトが泡のようなナビゲーションの紹介です。

デモページはコチラから

よくあるエフェクトなのですが、個人的に、デモページのデザインが気に入入りました[違]。

これには jQuery Easing Pluginが必要です。

カスタマイズについて

デモページと同じようにするには、HTMLとCSSとjQueryのサンプルソースをそのまま使えばよいのですが、ちょっと異なったデザインにしたい場合は、それなりに変えなければなりませんので、サンプルソースをそのまま使うのは難しいでしょう。

しかし、HTMLソースはそのままで、CSSのソースコードとjQueryで書かれている幅などの数値を変更すれば、それなりに簡単にカスタマイズできますので、カスタマイズの時はその部分の変更をオススメします。

上記画像にように、ホバーしたときに、メニューが表示されますが、これはCSSで制御していますので、下記のソースを変更するときは、数値だけを変更するだけでよいと思います。

CSS

.item ul li a:hover{
    background-color:#fff;
    color:#444;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    -moz-box-shadow:1px 1px 4px #666;
    -webkit-box-shadow:1px 1px 4px #666;
    box-shadow:1px 1px 4px #666;
}