はっぱのすなば

CSS3 Dropdown Menu by Web Designer Wall
JavaScriptを使わず、CSS3で作るクールな多段メニュー | エンタープライズ | マイコミジャーナル
上のような記事を見ていて、現在JavaScriptを使ってなんとか表示しているぱずぷれv3のメニューを、
CSS3だけでかっこよく表示できないかなぁと思って作ってみました。
最新のIE以外のブラウザだと、だいたいこのような表示になります。IE9は確認できてません。。
なお、クリックしても特に何も起こりません。
　
はっぱメニュー (IE7切り捨て版)
はっぱメニュー IE7妥協版
はっぱメニュー button要素版 ※li要素をbutton要素にしただけ。おまけ。

以下、いろいろ箇条書きで。
　
対応ブラウザなどについて

• Firefox 3.5以上, Safari 4, Google Chrome 4.1, Opera 10.5xではグラデーション、角丸、影付きで表示されます


• Safari 3.2はグラデーション以外の角丸、影には対応しています


• Firefox 2.0以上は角丸のみに対応しています(ただし、Firefox2.0のIE7切り捨て版は不安定です)


• Opera 9.6x以上, Internet Explorer 8.0ではメニュー自体は表示されますが上記の効果はありません


• Internet Explorer 7.0はIE8等と同等のレンダリングになるような妥協版で。


• IE6？なにそれ？おいしいの？腐ってるの？

工夫した点

• TYPE1とTYPE2の違いはHTML上で5行(menu要素の段数が1つ増えた)、CSSでも7項目です


• Firefox 3.5+, Opera 10.5xは(-moz-)box-shadowのinset指定を使ってグラデーションのように見せてます


• Safariはinsetが使用できず、外側の影まで消えてしまうので、-webkit-linear-gradientを使用してメニュー内の影を表示しています


• Google Chrome 4.1ではinsetは使用できますが、border-radiusの部分に影の色がついて表示が変なので-webkit-linear-gradientを使用しています


• menuの一番上のcaptionは、:before擬似クラスでlabel属性を表示し、text-shadowプロパティを使って周りに黒色の影を表示しています


• 角丸はmenu要素とli要素のborder-radiusの組み合わせで表現しています


• 下部にメニューがあることを示す->は、li:before擬似クラス＋float:rightで表現しています


• menu要素へのmin-width指定とspan要素のwhite-space:nowrap;を組み合わせることで、横幅が可変になっています

IE7妥協版の変更点・制限事項

• menuのタイトルを:before擬似クラスではなく1要素目にspanタグを入れることで対応しています


• HTML4.01ではmenuタグの子要素はliタグのみ許可、HTML5はmenu要素直下のspan要素は表示されないらしいので、マークアップ的にイマイチです


• :first-childで指定していた角丸は:nth-child(2)で設定しています


• hr要素で指定していたセパレータは、直後のli要素のスタイルにmargin-topプロパティを指定することで何とかしています


• 下部にメニューがあることを示す->は、:before擬似クラスが使用できないので直接書いてます


• menuがかぶった場合、IE7ではli要素が下部メニューのmenuの上にレンダリングされる？ので、横幅に大きな値を指定して固定幅にし、重ならないようにしています


• 全体的に、マークアップのお行儀が悪いです


• IE6

将来への課題

• HTML5のmenu要素は実装がさっぱりなので、キャッチアップしていきたい


• menu要素直下の要素がすべてli要素だが、command要素や見た目がボタンじゃないbutton要素が実装されたら変更したい


• グラデーションとして(-moz-)box-shadowを使っているのはイマイチ？


• ポップアップ後だけでなく、最初に表示されているメニューもやる気出したほうがいいと思う