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) »

トラックバックURL

コメント / トラックバック 5 件

  1. るる肉 ：
    2009.5.30 - 3:04 PM

    こんにちは。
    以前にこちらの記事を拝見し、この方法をお借りしてロールオーバーメニューを作りました。
    しかしながら最近、I.E.7でctrlキー＋マウススクロールで表示サイズを変更した場合、表示されないはずのaタグの文字が表示されてしまう事があるのに気が付きました。
    試しにこのページも同様に拡大してみたところ、５０％・６０％・７０％・１９０％の時にメニュー下に文字が現れるようです。
    縮小に関してはあまり神経質になる事はないと考えていますが、うちのサイトの場合、拡大時にたくさんのサイズでこの現象が現れ、対処しないわけにいかないようですので、もしも対処法のヒントのようなものがあれば、教えていただければと思いました。
    初めてなのに不躾なお願いではありますが、よろしくお願い致します。

  2. Maro ：
    2009.5.30 - 11:17 PM

    >るる肉さん
    コメントありがとうございます。
    うーむ、すみません。
    IEは6も7も見たと思ってたのですが、チェック漏れがあったのかも…？

    家のマシンはWin7のIE8のみになってしまっており、IETesterやSuperPreviewでも再現できないようなので、
    週明けに職場のテスト用の実機で改めて見てみます。
    (IE8では問題無いようです)

    IE7はXPでしょうか、Vistaでしょうか？
    今回の件と関係があるかどうかは分かりませんが、VistaのIEでは、フォントの関係で、
    aタグの画像置換等を行う際、cssでfont-sizeを小さくしておかないとはみ出して表示が崩れる、ということが時々起きていました。

  3. るる肉 ：
    2009.6.1 - 3:21 PM

    Maroさん、こんにちは。
    お返事ありがとうございます。
    うちのI.E.7はXPです。
    ちなみに、I.E.6の時にはこの現象はありませんでしたし、I.E.8のマシンでも問題ないようで、I.E.7に限った現象のようです。

    全くのド素人で、うまく説明もできず申しわけありませんが、font-sizeは1pxにしても、問題は解決しませんでした。

  4. Maro ：
    2009.6.1 - 4:41 PM

    >るる肉さん
    報告ありがとうございます、
    WinXPのIE7環境が無かったので未チェックでした…。
    その環境を作り、それを含んだ他の環境でも見直してみましたが、
    どうやらWinXPのIE7固有の問題のようですね。

    ロールオーバー部分でなく、テキストの画像置換(テキストを隠して、背景に指定した画像のみを表示)の方のcssが引っかかってるようです。
    スクロールすると出たり消えたりもするので、
    overflow:hidden;
    が上手く効いていないのかな…？と思って検索してみたら、どうやらビンゴみたいです。

    IE7で td に指定した overflow:hidden　が 画面の拡大縮小で無効になる
    http://shironotes.blogspot.com/2009/03/ie7-td-overflowhidden.html

    (今回の対象はTDではないですが、恐らく現象は同じかと思います)

    cssやJSを扱うと、IEにはいつも泣かされますね…。
    仕様もよく変わるし、バグも多いので。

    IEでのCSSのバグを回避するhasLayout | コリス
    http://coliss.com/articles/build-websites/operation/css/143.html

    こちらを参考にして、この記事のcssにzoom:1;を入れてみましたが、それでもまだ発生してしまうようですね…。

    画像置換にoverflow:hiddenを使用せずに、
    <a><span>＊＊＊＊</span></a>
    のようにspanで挟んで、
    a span {
    display: none;
    }
    でテキストを消してやるのが堅いのかな…？（無駄なタグが増えますが）

    元々、記事で使用してる画像置換は、
    text-indentでテキストを飛ばす方法がよくないと言うことで、その代替の方法が色々と考えられてた中の一つなんです。

    「css 画像置換」や「text-indent 9999px」などでググってみると、その他にもスマートな方法が色々出てくるので、一度参考にされてみるといいかもしれません。

  5. るる肉 ：
    2009.6.3 - 10:04 PM

    本当にありがとうございました！！！
    SOHO対策を考えてMaroさんのこの手法を使わせて頂いておりました。
    とりあえずspanで囲んで対策をして、色々と調べたりしようと思っています。

    家族の会社のホームページを立ち上げてまだ１年ちょっと・・・CSSだのJSだのあれこれ勉強すべき事が山積みですが、硬化した脳みそがついて行けません（笑）。
    ウラウザごとにこんなに表示のされ方が異なるのも、最近まで知らなかったくらいで・・・。

    今後も参考にさせて頂きます。
    重ね重ねありがとうございました。

コメント