使うのは「jQuery」、まずはスライド領域の座標の再設定から
作例はすっかりおなじみとなった、グルメサイト「東京食べ歩きガイド」です。前回の記事で作成した、カテゴリごとのお店一覧ページを、スライドで切り替わるようにしましょう。お店一覧ページは「和食」「洋食」「中華」「スイーツ」の4つがありますので、リンクをクリックすると、各カテゴリのお店紹介のコンテンツが左側からスライドしてくるようにします。
「東京食べ歩きガイド」。「洋食」「和食」などの料理カテゴリごとのページをスライドで切り替わるようにします
スライド表示を行なうJavaScriptライブラリはいくつかありますが、リストタグの項目だけしかスライドできなかったり、縦方向のスライドだけしかできない、といった制約があります。そこで今回もjQueryを使って自前で作成します。
まず、HTMLの中でスライドさせたい領域全体を<div>タグで囲みます。「和食」「洋食」「中華」「スイーツ」の4種類なので、それぞれを<div>タグで囲み、個別にID名を割り当てておきます。
<div id="youshoku" class="category">
<h2>洋食</h2>
<div class="food">
<img src="photo/shop1.jpg" width="60" height="40" align="left" alt="メリメロ">
メリメロ<br>
千代田区飯田橋4-5-4 第3山和ビル101<br>
<div class="info">
飯田橋から少し離れたところにあるフランス田舎料理のお店。オーガニック野菜や天然魚にこだわり。自家製のふかふかフォカッチャも◎。かわいいお店。<br>
<a href="shop1/description.html">＞＞詳細</a>
</div>
<br clear="left">
</div>
：
</div>
この状態では、4カテゴリのお店の紹介が縦にずらっと並んでしまいます。そこで、それぞれの領域をスライドさせる前に、表示位置を再設定して揃えておきます。
スタイルシートなしで表示すると、カテゴリが縦長に配置されているのが分かります
4つのカテゴリのうち、「洋食」が最初にデフォルトで表示されるカテゴリです。そこで、和食／中華／スイーツのカテゴリ領域に、洋食のカテゴリと同じY座標値を設定して縦位置に重なるようにします。具体的には、スタイルシートの「top」プロパティに、洋食のtopプロパティの値を設定します。ただ、単純にスタイルシートのtopプロパティの値を設定すると、レイアウトが自動で決定されている場合に、座標値ではなく「auto」といった文字列がプロパティに入っているため正しく機能しません。そこで、jQueryの「offset()」メソッドを使って、実際の座標値（オフセット値）を読み出し、設定します。
次に、スライドさせるのに必要なX座標の設定です。これもtopプロパティと同様、「left」プロパティを読み出して、スライドして停止するX座標の位置を変数「baseX」に入れておきます。最初から表示させておく洋食のカテゴリのX座標には、この「baseX」の値を設定します。
洋食以外の3つのカテゴリは、スタイルシートのleftプロパティに大きなマイナス値を設定して、画面上では見えない位置に移動させておきましょう。今回は「-640」としていますが、コンテンツ部分の横幅が640ピクセルよりも大きい場合には、それに合わせて値を変更します。この“見えない位置”である「-640」という値は、以下のようにして変数「minLeft」に最初に入れておきます。
var minLeft = -640;
ちなみにマイナス値ではなく、「2000」などの大きい値にしてページの右側からスライドしてくるようにもできます。ただし、その場合には、スクロールバーが表示されてしまうこともあるので、あまりおすすめはしません。
以下が、ここまで説明した部分のソースコードです。
var baseX = $("#content").offset().left;
$("#washoku,#chuka,#sweets").css("left",minLeft);
$("#youshoku").css("left",baseX);
