このページの本文へ

意外性が心地よいJSメニューのWebデザイン (4/5)

2009年04月13日 10時59分更新

文●古籏一浩、ASCII.jp

  • この記事をはてなブックマークに追加
本文印刷

ページ読み込み時にもアニメーションを

 前ページに説明した方法でメニュー画像をスライド表示する機能は組み込みましたが、このままだと、ページが読み込まれた段階ではメニュー画像が伸びきった状態になるので、通常時はメニューを格納しておきましょう。

 位置はスタイルシートで設定するだけですが、せっかくなので、 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)

この連載の記事

一覧へ

この記事の編集者は以下の記事をオススメしています

Webディレクター江口明日香が行く