« 固形ラード | メイン | インターネットラジオとLast.fm »

pure CSSのドロップダウンメニュー [web_design]

私のところでは条件付きコメントを使った作り方を紹介していますが,こちらはbehaviorプロパティを利用した方法です(どちらもMSの独自拡張で一癖あるニクイやつ).Opera7.2,Opera8.5,IE6(with javascript),Firefox1.5,Konqueror3.4.3をサポートしていると書いてあったので,それ以外のSafari3 pb3,Firefox2,IE7で確認してみたところレイアウトが若干異なってしまう(メニューの幅が文字分しか確保されてない)くらいで問題なく表示されました.たぶんCSSを少しいじればこれは解決できるんじゃないかな.

さて,中身に少しだけ触れておくと私がポイントだと思ったのはマウスホバー時の挙動とマウスアウト時の挙動の2つだけをbehaviorで扱っていること.条件付きコメントを使って作る場合,まずフォーカスになっているのがIE6のばかちんに対応することただ1点のみであるにも関わらず,HTML側では"<!--[if lte IE 6]><table><tr><td><![endif]-->"とか,CSS側では"ul li:hover ul, ul a:hover ul"とか"ul :hover ul :hover ul"とか,非常に悩ましいコードを書かなくてはならないわけですが,前述のポイントのおかげでそこらへんのことを考えなくて済むわけです.

全部を全部XHTML+CSSでやる必要はもちろんなくて,他の要素としっかり役割分担ができればこんなにすっきりしたコードで書ける+おもしろいことができるという一例だと思いました.

少しだけ追記+注文をつけておくと,リンク先で謳われているpure CSSというのは正確ではありません.behaviorプロパティを使っている時点でDHTML,つまりjavascriptが必要になるのでIE6の場合(サポートブラウザのところにも(with javascript)とあるように)は正常に動作しません.

条件付きコメントを使って作る方法ではjavascriptは必要ないので,Netxcape Navigator 4.7などのCSSを正しく解釈できないブラウザでさえなければ,ユーザーがセキュリティ上の問題を意識してjavascriptを切っていたとしても関係ない表現が可能です.この点はアドバンテージとして主張しておいてもいいかなと思います.ということで追記終わり.

トラックバック (0)

このエントリーのトラックバックURL: http://dormouse.oops.jp/mtc/mt-tb.cgi/67

(スパム対策として当該エントリへのリンクが含まれないトラックバックを弾いています)

以下の一覧は、このエントリーを参照しています:  pure CSSのドロップダウンメニュー

コメント (0)

コメントを投稿

(コメントは承認制をとっているため,公開されるまで時間がかかる場合があります)


画像の中に見える文字を入力してください。