これいいなぁと思う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に余白分を足した数値です。
コメント