2010年05月25日

かっこいいメニューを目指して

20100525015911.png

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を使っているのはイマイチ?

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

posted by はっぱ at 02:13| Comment(10) | TrackBack(0) | プログラム