疲れた… ― CSSによるプルダウンメニュー
CATEGORY : WebSiteDesign
2006年10月08日 00:08
今日は昼から今までずっとバイトでした。約10時間、さすがに疲れました。
ちなみに、これは帰りの電車で書いてます。携帯から投稿できるのって便利ですね…
はてさて、何をしたかと言えば、CSSによるプルダウンメニューを作ってました。リストを入れ子にして、子要素の方のvisibilityをいじるだけで、FireFoxとかはすんなり行ったのですが、WinIEに大分してやられました。
詳しいことは帰って気が向いたら、追記しますが、WinIEのせいで、無駄に時間を食いました、、、
2006年10月15日…追記しました（遅くなってすいません。）
2006年10月21日…修正しました。Operaでも表示できるようになりました。
確認済みブラウザ
- WinIE6
- FireFox1.5
- Opera6以上
- Safari
とりあえず下のリンクを見てください。
CSS DropDown
メニュー部分のCSS
おそらくはWin IEでも、FireFoxでも問題なく見られると思います。MacでもFireFox、Safariに関しては確認済みです。
(帰宅してから気づいたのですがOperaはだめっぽいです。overflowの挙動の問題みたいです。ちょっと弄れば直せそうではあるのですが、とりあえず今回は放置で。)
概要
- HTML
-
メニュー部分はリスト要素を入れ子にして作ってます。
その他、詳しいことはソースを読んでください。 - CSS
-
こちらも詳しいことは、上記リンクのcssを見てください。
まずは見出し部分のliはoverflowをhiddenにします。heightをしっかり設定しておきましょう。#menu li { float:left; width:100px; height:1.5em; z-index:2;overflow:hidden;}(挙動の設定以外は省略)
中身のulにセレクタを使ってvisibilityをhiddenに、
displayをnoneに設定し、見えなくします。#menu li ul { visibility:hidden;display:none;z-index:100; }(挙動の設定以外は省略)
そして、見出し部分のliの:hover擬似要素に対してoverflowをvisibleに、#menu li:hover { overflow:visible; }(挙動の設定以外は省略)
中身のulにli:hover ulのようにセレクタをつかって、visibilityをvisible、
displayをblockにします。#menu li:hover ul { visibility:visible;display:block;}基本的には以上です。前後の重なりがうまくいかない場合にはz-indexを調節してください。
:hover擬似要素：IEでの問題
これは調べててはじめて知ったのですが、:hover擬似要素とかって、a以外にも使えたんですね…しかも別に文法違反ではないときた。ただ、そこに最大のネックなポイントが一つあって、それは、WindowsIEがダメダメなことにa以外の:hoverに対応していないという点。IE7はそのあたりは直っているらしいですね。依然バグだらけとの噂を聞きますが。
これの解決には
csshover.htc―(英語です：海外サイト…ニューカレドニア？)
を使いました。このファイルをIE独自のbehaviorをつかってcssからインポートすることによって、a以外でも:hover等の擬似要素が使えるようになります。
まあ、結局はこれの中身はJavaScriptだかJscriptなので、ことWinIEに関しては100%CSSというわけには行きません。
How to use csshover.htc
さて、このcsshover.htcの使い方ですが、まずは上記リンクから該当ファイルを落としてきましょう。場所が少々分かりづらいですが、ページ下方のversion表記が並んでるあたりからいけます。
落としたら任意のフォルダにおいておきます。（今回はstyleに格納）
bodyに対してbehaviorを使ってこのhtcファイルを読み込むのですが、ここで数点注意することがあります。
- behaviorはIE独自の拡張であること
- htcファイルを実行できるのはIE5以上であること
- いろいろ試したところhtcファイルの読み込みは、他のスタイルより先に行われなければならないこと
- htcファイルへの相対パスはhtmlからのパスであること
以上の問題があるので、今回はhtmlのheadでその他のcssの読み込みより前に
<!--[if gte IE 5]><style>body{behavior:url("style/csshover.htc");}</style><![endif]-->
としました。またIE5以上だけで実行されるように条件付コメント(参考)を使っています。また、外部cssに記述してしまうとhtmlから相対パスが張りにくいのでこのようにしています。絶対パスなら外部cssの読み込みにしても問題ないと思います。
あと、WinIEで確認するときの注意点ですが、.htcの実行はローカルでは制限されるようなので、アップしてからみるとか、サーバーソフトを起動してlocalhostからアクセスすとかしてください。
さて、これで、IEでも大丈夫…と言いたいのですが、そうも行かなかったりします。
overflowの挙動のバグがあるので、このままだと、ポイントしたときにメニューが伸びてしまい、以下のコンテンツが全部下がってしまいます。
あと、IEで:hoverなどを使うときは
li:hover {
のように { の前に空白を入れないとうまく動かないというバグもあるようです。
後者に関してはcss書く時に注意してください。
前者はまた、winIEにだけ読ませるように何らかの工夫（今回はついでだったのでcsshoverと同じく条件付コメントにしました。その他のcssハックでもOKだと思います。）をして、
#menu li {
position:relative;
}
#menu li ul {
position:absolute;
top:1.4em;
left:1em;
}
のようにliにrelativeを、ドロップダウンするulにabsoluteを指定してください。
わざわざ条件分けずに最初からこのように書いてもおそらく平気だと思います。
以上、なんだかすごく長くなってしまいましたが、これでcssによるドロップダウンが出来ます。お気づきだと思いますが、本来、最初の「概要」の項だけで全て終わっています。しかしながらWinIEがために異様に労力を食います。WinIEは本当に性質が悪いですね…
だだーっと書いてしまったので、分かりづらいところなどありましたら、お気軽にコメントでどうぞ。
