タグ「ロールオーバー」の一覧

cssのみのロールオーバーをなるべく手抜ｋ…短く書きたい。

2008.11.4 火曜日

個人的メモ

メニューとかをcssのみでロールオーバーさせる処理、
キチンと書くとcssのコードがかなり長くなるので、どこまで削っても平気かなぁと。

メニューバー用画像
とりあえず、こんな画像を用意。
cssのみではプリロードができないんで、ロールオーバー後の画像も全部繋げておいて、cssで位置ずらしながら表示。

  1. <ul id="sample_menu">
  2. <li><a href="#" id="sample_menu01" class="selected">メニュー1</a></li>
  3. <li><a href="#" id="sample_menu02">メニュー2</a></li>
  4. <li><a href="#" id="sample_menu03">メニュー3</a></li>
  5. <li><a href="#" id="sample_menu04">メニュー4</a></li>
  6. </ul>

HTML

  1. #sample_menu {
  2.     width: 320px;
  3.     height: 20px;
  4. }
  5. #sample_menu li {
  6.     width: 80px;
  7.     height: 20px;
  8.     float: left;
  9.     list-style:none;
  10. }

UL LIタグのスタイル。
サンプル用なので結構いい加減。

  1. #sample_menu li a {
  2.     width: 80px;
  3.     height: 0px;
  4.     display: block;
  5.     padding-top:20px;
  6.     overflow:hidden;
  7.     background-image: url(img/bar.png);
  8.     background-repeat: no-repeat;
  9. }

Aタグのスタイル。
どうせ共通になる部分はこっちでまとめて書いて継承させる。
画像置換は、以前は「text-indent: -9999px;」とか使う事が多かったけど、
SEO的にどうよ？ってことで、今はこれ。
heightを0にして、高さ分のmargin-topを指定して文字を押しだし、「overflow: hidden;」で隠してる。

  1. a#sample_menu01 {
  2.     background-position: 0px 0px;
  3. }
  4. /* ロールオーバー時は画像を上に20ピクセルずらす */
  5. a#sample_menu01:hover {
  6.     background-position: 0px -20px;
  7. }
  8. /* class:selected時は画像を上に40ピクセルずらす */
  9. a#sample_menu01.selected, a#sample_menu01.selected:hover {
  10.     background-position: 0px -40px;
  11. }

メニューの個別スタイル。
背景画像の位置を指定するだけ。
これを、background-positionの数値を変えながらメニューの数ぶん記述。

動作サンプル

上のコードでこんな感じに。
今のところ手元のブラウザでは問題なさげ。

タグ:, | カテゴリー: その他 | コメント(5) »