cssのみのロールオーバーをなるべく手抜ｋ…短く書きたい。
2008.11.4 火曜日
個人的メモ
メニューとかをcssのみでロールオーバーさせる処理、
キチンと書くとcssのコードがかなり長くなるので、どこまで削っても平気かなぁと。
とりあえず、こんな画像を用意。
cssのみではプリロードができないんで、ロールオーバー後の画像も全部繋げておいて、cssで位置ずらしながら表示。
- <ul id="sample_menu">
- <li><a href="#" id="sample_menu01" class="selected">メニュー1</a></li>
- <li><a href="#" id="sample_menu02">メニュー2</a></li>
- <li><a href="#" id="sample_menu03">メニュー3</a></li>
- <li><a href="#" id="sample_menu04">メニュー4</a></li>
- </ul>
HTML
- #sample_menu {
- width: 320px;
- height: 20px;
- }
- #sample_menu li {
- width: 80px;
- height: 20px;
- float: left;
- list-style:none;
- }
UL LIタグのスタイル。
サンプル用なので結構いい加減。
- #sample_menu li a {
- width: 80px;
- height: 0px;
- display: block;
- padding-top:20px;
- overflow:hidden;
- background-image: url(img/bar.png);
- background-repeat: no-repeat;
- }
Aタグのスタイル。
どうせ共通になる部分はこっちでまとめて書いて継承させる。
画像置換は、以前は「text-indent: -9999px;」とか使う事が多かったけど、
SEO的にどうよ？ってことで、今はこれ。
heightを0にして、高さ分のmargin-topを指定して文字を押しだし、「overflow: hidden;」で隠してる。
- a#sample_menu01 {
- background-position: 0px 0px;
- }
- /* ロールオーバー時は画像を上に20ピクセルずらす */
- a#sample_menu01:hover {
- background-position: 0px -20px;
- }
- /* class:selected時は画像を上に40ピクセルずらす */
- a#sample_menu01.selected, a#sample_menu01.selected:hover {
- background-position: 0px -40px;
- }
メニューの個別スタイル。
背景画像の位置を指定するだけ。
これを、background-positionの数値を変えながらメニューの数ぶん記述。
動作サンプル
上のコードでこんな感じに。
今のところ手元のブラウザでは問題なさげ。