MOVABLE PRESS

マウスをタブ内のリンクに乗せるとタブが上に飛び上がります。選択されたページはトップ位置に固定されるので現在位置が一目で分かることになります。CSSのロールオーバーテクニックに背景画像の位置変化を与えることによってこのような動きを表現できるようになります。

参照ページからコードをダウンロードして使用する分には問題ないようなのですが、コードや画像の公開は規約に抵触するおそれがあるのでここでは公開できません（即興で作ったのでお粗末ですがサンプルの画像は自作です）。よって基本的な考え方の解説だけにとどめたいと思います。

参照ページ：Animated horizontal tabs

普通の横並びナビゲーションと同様、リストタグでマークアップし、float:left;により横並びを実現させます。ポイントは、1. ラウンドコーナーを表現するために<span>要素を用いて一つのタブ内に2つの背景画像を指定できるようにすること2. 現在位置に他のタブと違う位置を指定するためにclass属性を挿入していることです。

参照ページのとおり使用する背景画像は二つの画像です。左用と右用に分かれており、上下のパートは連結しています。左側の画像は#animatedtabs aの背景で左上から表示させ、右側の画像は#animatedtabs a spanの背景で右上から表示させます。#animatedtabs aセレクタで左側画像の幅分のpadding値を指定し、背景画像がジョイントされて一つの画像に見えるようにします。マウスがリンクの上に乗った場合、およびそのページが選択されている場合は、画像の半分以下の部分（画像では上から125pxの部分）を位置指定したうえで表示させます。

CSSテクニックのポイントは、1. position:relative;で背景画像をずらす基点を作り、2. 下padding値の設定でタブが上下するように見せることです。ただし、display:block;として<span>内をインライン要素からブロックレベル要素に変えてやらないと、テキストレベルがベースとなってしまう（たぶん・・・）ため上下左右ともずれて表示されてしまいます。