ページ読み込み時にもアニメーションを
前ページに説明した方法でメニュー画像をスライド表示する機能は組み込みましたが、このままだと、ページが読み込まれた段階ではメニュー画像が伸びきった状態になるので、通常時はメニューを格納しておきましょう。
位置はスタイルシートで設定するだけですが、せっかくなので、 animate() を使ってメニュー画像の横位置を-100ピクセルに設定し、ページが読み込まれたら左側にゆっくり引っ込むようにします。マウスオーバー＆アウトよりもゆっくりと引っ込めたいので、1500ミリ秒にしています。
$("#booknavileft img").animate({ "left":"-100px" }, 1500);
これでひととおり、スクリプト部分が完成しました。スクリプトには「booknavi.js」という名前を付けて保存します。あとは、いつものようにHTMLに<script>タグを追加し、jQuery本体、booknavi.jsの順に読み込ませれば完了です。
<script type="text/javascript" src="js/jquery-1.2.3.js"></script>
<script type="text/javascript" src="js/booknavi.js"></script>
以下に、完成した作例サイトを公開しています。実際の動きをチェックしてみてください。
完成した作例。ページを読み込むとメニューが左端にゆっくりスライド。メニューの一部にマウスを重ねると残りの部分が飛び出してきます
今回のスライディングメニューは、アニメーション速度や画像の表示位置など、カスタマイズも簡単にできます。自分好みのナビゲーションに作り変えてみましょう。それでは、次回もお楽しみに。
（作例デザイン：wataru）
■もっと勉強したい人のためのオススメBOOK（Amazon.co.jp）
