メニューにマウスオーバーするとメイン画像が切り替わるナビゲーションjQueryプラグイン

これいいなぁと思うjQueryプラグインを発見した。
FLASHでよく見かける、メニューにマウスオーバーするとメイン画像が切り替わるナビゲーション『ImageNavigation』
早速ただいま製作中の新サイトに取り入れてみましたので、備忘録です。
(まだ製作途中なのでホームページは非公開(笑))
設置方法や利用方法は
http://bit.ly/c3NhO2
こちらに詳しく書かれているので問題なく実装できると思います。
今回はメイン画像の左側縦並びになっていたメニューを、メイン画像の下に横並びにしました。

<pre class="brush: css;">
#image-navigation .navi {
float:left;
}
#image-navigation .navi-image {
float:left;
}
</pre>

のfloat:left;を削除

<pre class="brush: css;">
#image-navigation .navi li {
float:left;
}
</pre>
#image-navigation .navi liにfloat:left;を追加
<pre class="brush: css;">
#image-navigation .navi{
padding-top:432px;
}
</pre>

#image-navigation .naviにpaddingで432px余白をあけます。
432pxはメイン画像のheightに余白分を足した数値です。


コメント