カテゴリ：CSSだけでアクションを作る 2009年3月19日 16:44
前回のエントリー、CSSのみでIE6にposition:fixedを対応させる を使用して、下部に固定配置しつつ、マウスオーバーで Windows のタスクバーのように飛び出すフッターを作ってみました。
このサンプルは、IE6 にも対応しています。
解説は以下から。
▼EntryMore▼
まずはモダンブラウザ向けの解説から。
モダンブラウザ向けには大した処理はしていません。
position: fixedで下部に固定配置し、overflow: hiddenで内容が溢れないようにしつつ、通常時はheight: 15pxとして "▲Popup at footer here." の文字だけが見えるようにしています。
続いて#footer:hoverで、フッターにマウスオーバーした際にheightを150pxまで拡張しています。
これにより、マウスが触れた時にポップアップする、というわけです。
さて、続いて IE6 向けのトリックを解説します。
IE6 向けのポイントは 2 つ。
HTML ソースを見てもらうと分かりますが、div#footerを、さらに複雑なタグで囲んでいます。
これは、IE6 が a 要素以外に :hover 疑似クラスが対応していないためで、div#footerを無理やり a タグでくくっています。
このテクニックは、CSSのみでプルダウンメニューを作る で使用されているテクニックと同じものです。
こうすることで、IE6 向けにもブロック要素に対して :hover 疑似クラスを使うことができます。（ただし、HTML 的には "invalid" です）
:hover に対する処理は、モダンブラウザ向けの指定と変わりません。
これで無事、:hover 時にポップアップされるフッターができました。しかし、まだこれだけでは下部に固定配置されません。
CSSのみでIE6にposition:fixedを対応させる で使用した IE6 でも固定配置ができる方法で固定配置にします。
上記 2 点のテクニックをうまく使うことで、今回のサンプルの IE6 対応を実現しています。
この記事のカテゴリー一覧を見る⇒CSSだけでアクションを作る
トラックバックURL
カテゴリー
最近のエントリー
テスト的に設置してます。好きにコメントしてみてくださいｗ
©2009 CSS-EBLOG All Rights Reserved
コメント
1 - モカ さん
こんにちは。
なるほどー。面白い仕組みですね。
これは使えそうです！
RSSに入れてまた時々拝見します。
よろしくお願いいたします。
2009年3月20日 12:43
2 - えど
さん
>>1 - モカさん
どもです(*'-')
コメントありがとうございます！
今回は IE6 にも対応しているので
わりと使いどころがあるんではないかと思っています。
ぜひぜひ、これからもよろしくお願いしますー！
2009年3月22日 01:11
3 - cyokodog さん
いつも楽しみに拝見させていただいております。
IE6 の fixed は私もいろいろ試行錯誤してまして、問題点やら対策やらをいろいろブログに綴ってます。
ちなみに上記の方法だとスクロールバーの上にabsolute 要素がかぶってしまうのが残念なところでしょうか...
スクリプトを使用するとそのへんの問題も解決できます。
http://d.hatena.ne.jp/cyokodog/20090323/jQueryExFixed
ご参考までに..
2009年3月23日 12:50
4 - えど
さん
>>3 - cyokodogさん
コメントありがとうございます！
そうなんですよね、スクロールバーの問題が残っているんです。
（ページ内リンクは問題なく動作したのでほっとしてますがｗ）
IE6ならwidthの中にpadding含まれるし、
それでスクロールバー分ずらしたら・・なんて考えたんですが
後方互換モードだとそもそもこのテクニックが使えないんですよね(;´Д｀)
いちおう、CSSだけで実現できそうなときは
できるだけCSSだけで、がコンセプトなので
今回の件ではスクリプトは使用しませんでした。
（CSS-EBLOGって名前ですしねｗ）
ただ、案件によってはスクロールバーなどが
問題になるときもあると思うので、
cyokodogさんのブログも参考にさせていただきますね！
貴重な意見ありがとうございます！
2009年3月23日 13:27
5 - haru さん
素晴らしいフッターですね。
是非、このフッターを使用してみたいのですが、ダンロードしたものをアップロードして
CSSを追記するカンジなのでしょうか。。
やってみたんですが、全く表示されずorz
2009年4月16日 15:49