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

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

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

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

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

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

http://css-eblog.com/eblog_sample/0903/css-only-taskbar/

サンプルダウンロード

http://css-eblog.com/eblog_sample/0903/css-only-taskbar/css-only-taskbar.zip

解説は以下から。

▼EntryMore▼

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

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

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

続いて#footer:hoverで、フッターにマウスオーバーした際にheightを150pxまで拡張しています。
これにより、マウスが触れた時にポップアップする、というわけです。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だけでアクションを作る

パーマリンク
コメント(7)
トラックバック(0)

トラックバックURL

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

1 - モカさん

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

2009年3月20日 12:43

2 - えどさん

>>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 - えどさん

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

2009年3月23日 13:27

5 - haru さん

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

2009年4月16日 15:49

6 - 匿名さん

ポップアップではなく、そのまんま表示はできないでしょうか??

2010年5月 9日 15:27

7 - えどさん

>>6
コメントありがとうございます。
フッターを固定したい、ということでしょうか？

であれば、#footerに指定しているheightを省略するか、
heightに十分な高さを指定してあげれば可能です。
#触れたときだけheightを高くするようにしているのを、最初から指定する、という感じですね。

2010年5月16日 01:19