CSSだけで触れるとポップアップするフッターを作る(IE6対応)

カテゴリ:CSSだけでアクションを作る 2009年3月19日 16:44

「CSSだけで触れるとポップアップするフッターを作る(IE6対応)」サンプルイメージ

前回のエントリー、CSSのみでIE6にposition:fixedを対応させる を使用して、下部に固定配置しつつ、マウスオーバーで Windows のタスクバーのように飛び出すフッターを作ってみました。

このサンプルは、IE6 にも対応しています。

Windowsのタスクバーのように触れるとポップアップするフッターデモ

サンプルダウンロード

解説は以下から。

▼EntryMore▼

モダンブラウザ向けCSS ソース

まずはモダンブラウザ向けの解説から。n

モダンブラウザ向けには大した処理はしていません。
position: fixedで下部に固定配置し、overflow: hiddenで内容が溢れないようにしつつ、通常時はheight: 15pxとして "▲Popup at footer here." の文字だけが見えるようにしています。n

続いて#footer:hoverで、フッターにマウスオーバーした際にheight150pxまで拡張しています。
これにより、マウスが触れた時にポップアップする、というわけです。n

さて、続いて IE6 向けのトリックを解説します。n

IE6 向けHTMLソース

IE6 向けCSS ソース

IE6 向けのポイントは 2 つ。
HTML ソースを見てもらうと分かりますが、div#footerを、さらに複雑なタグで囲んでいます。
これは、IE6 が a 要素以外に :hover 疑似クラスが対応していないためで、div#footerを無理やり a タグでくくっています。
このテクニックは、CSSのみでプルダウンメニューを作る で使用されているテクニックと同じものです。
こうすることで、IE6 向けにもブロック要素に対して :hover 疑似クラスを使うことができます。(ただし、HTML 的には "invalid" です)n

:hover に対する処理は、モダンブラウザ向けの指定と変わりません。
これで無事、:hover 時にポップアップされるフッターができました。しかし、まだこれだけでは下部に固定配置されません。n

CSSのみでIE6にposition:fixedを対応させる で使用した IE6 でも固定配置ができる方法で固定配置にします。
上記 2 点のテクニックをうまく使うことで、今回のサンプルの IE6 対応を実現しています。n

この記事のカテゴリー一覧を見る⇒CSSだけでアクションを作る

  • このエントリーをはてなブックマークに追加

トラックバックURL

http://css-eblog.com/cgi-bin/mt/mt-tb.cgi/130

コメント

1 - モカ さん

 こんにちは。n なるほどー。面白い仕組みですね。n これは使えそうです!n RSSに入れてまた時々拝見します。n よろしくお願いいたします。

2009年3月20日 12:43

2 - えど Author Profile Pageさん

>>1 - モカさんどもです(*'-')コメントありがとうございます!n今回は IE6 にも対応しているのでわりと使いどころがあるんではないかと思っています。nぜひぜひ、これからもよろしくお願いしますー!

2009年3月22日 01:11

3 - cyokodog さん

いつも楽しみに拝見させていただいております。nIE6 の fixed は私もいろいろ試行錯誤してまして、問題点やら対策やらをいろいろブログに綴ってます。nちなみに上記の方法だとスクロールバーの上にabsolute 要素がかぶってしまうのが残念なところでしょうか...スクリプトを使用するとそのへんの問題も解決できます。nhttp://d.hatena.ne.jp/cyokodog/20090323/jQueryExFixedご参考までに..

2009年3月23日 12:50

4 - えど Author Profile Pageさん

>>3 - cyokodogさんコメントありがとうございます!nそうなんですよね、スクロールバーの問題が残っているんです。n(ページ内リンクは問題なく動作したのでほっとしてますがw)nIE6ならwidthの中にpadding含まれるし、nそれでスクロールバー分ずらしたら・・なんて考えたんですが後方互換モードだとそもそもこのテクニックが使えないんですよね(;´Д`)いちおう、CSSだけで実現できそうなときはできるだけCSSだけで、がコンセプトなので今回の件ではスクリプトは使用しませんでした。n(CSS-EBLOGって名前ですしねw)nただ、案件によってはスクロールバーなどがn問題になるときもあると思うので、ncyokodogさんのブログも参考にさせていただきますね!n貴重な意見ありがとうございます!

2009年3月23日 13:27

5 - haru さん

素晴らしいフッターですね。n是非、このフッターを使用してみたいのですが、ダンロードしたものをアップロードしてCSSを追記するカンジなのでしょうか。。nやってみたんですが、全く表示されずorz

2009年4月16日 15:49