カテゴリ：CSSテクニック 2007年11月30日 09:42
※追記[2010/01/29]
CSS のみで、かつハックやコメントを使わずにクリーンな状態でプルダウンを実装できるテクニックの紹介記事を書きました。
2 階層以降が作れない、などのデメリットもありますが、クリックしてプルダウンを固定することもできるので場合によってはとてもオススメのテクニックです。
ハックやJavaScriptを使わず、クリーンHTMLでIE6にも対応したプルダウンメニュー
※追記[2008/09/25]
説明に表示していたHTMLに誤りがあったため、修正しました。n
でも、上記エントリーは IE 対策として JavaScript を併用したものでした。
が、なんと CSS のみでも IE6 にまで対応したプルダウンメニューが実現できるとのことで、ちょっとサンプルを作ってみたのでアップしてみたり。n
ユウさんに指摘されて、縦バージョンのサンプルも作成してみました。
なぜ CSS のみで実現できるのか理由までは分かっていませんが、これで動く、というところまで紹介したいと思います。n
▼EntryMore▼
このプルダウンメニューのポイントは、条件付コメントで IE とそれ以外のブラウザとで HTML 自体を変更していること。
さらに、条件付きコメントをトリッキーにつかって IE のみ<a>の閉じタグを消す、という手法を使っています。
問題の部分は、<!--[if IE 7]><!--></a><!--<![endif]-->の部分ですね。
これにより、IE7 それ以外のブラウザに<a>の閉じタグを読み込ませます。（IE6 以下は除外）n
さらに次の、<!--[if lte IE 6]><table><tr><td><![endif]-->で IE6 以下に<table>タグを挿入します。（なぜかこの table タグを入れないと正常に動きません）
同じように閉じタグもIE6以下に適用するよう条件付きコメントで付けたし完成です。
CSS については、li:hover ulとa:hover ulを指定します。
IE6 では、a 要素以外は :hover を実装していないためこう記述します。
上記の条件付コメントによる <a> タグを IE6 以下にだけ読み込ませるのはこのためです。
こうすることで、IE6 でも CSS のみでプルダウンメニューが実装できます。n
この記事のカテゴリー一覧を見る⇒CSSテクニック
トラックバックURL
カテゴリー
最近のエントリー
テスト的に設置してます。好きにコメントしてみてくださいｗ
©2009-2010 CSS-EBLOG All Rights Reserved
コメント
1 - yan さん
これはいける！nと、思ったのですが、IE7で動かないようなんですが？nIE6やFirefoxでは問題なく動きますけど...なぜIE7だけ？？
2008年1月15日 22:35
2 - えど さん
>>yanさん参考にしていただいたようでありがとうございます。nこちらで確認すると、IE7でも問題なく動いているのですが、nもしかしてスタンドアロン版のIE7などでテストされていませんか？n条件付コメントを使用しているので、スタンドアロン版の場合、nたまにその条件付コメントがうまく動かない場合があります。nもしスタンドアロン版を使用されている場合は、正規版で一度試してもらえますでしょうか？nそしてもし、正規版で試されている場合はそのIE7の細かいverなんかを教えてください。nこちらでできる範囲で確認したいと思います。
2008年1月16日 15:22
3 - yan さん
その後探求いたしましたら、原因がわかりました。nわけあって、ホムページビルダーｖ8で開いたために、DOCTYPEが”HTML 4.01 Transitional”に書き換えられてしまったために起こった現象のようです。n”XHTML 1.0 Transitional”に戻すことで直りました。nお騒がせいたしましたm(＿ ＿)m
2008年2月 1日 10:42
4 - えど さん
>>yanさん原因がわかって、直ったようで安心しました。n確かに、ホームページビルダーは勝手に変更してしまうっていうのがあった気がします。nせめて確認くらいはほしいですよね・・。nご意見ありがとうございました！
2008年2月 1日 11:37
5 - ユウ さん
はじめまして。nこちらのプルダウンはよさそう！と思い、設置をしていたのですが、CSSに関しては初心者の域をでないもので、どうしても横メニューにカスタマイズする方法がわかりません。n方法を教えていただけるとありがたいです。
2008年2月29日 11:04
6 - えど
さん
>>ユウさんコメントありがとうございます！n横メニューですね。確かに横のほうが重要ありそうですね・・。nちょっと新しく作成したいと思うので、完成したらアップ致します(*'')
2008年2月29日 18:01
7 - えど
さん
>>ユウさん縦のプルダウンメニューサンプルを作ってみました。nメニューの隙間は、ページ内に書かれている.menu ul li { ... }の中のmargin-rightの値を変更することで調整が可能です。
2008年3月 3日 10:04
8 - ユウ さん
遅くなりましたが、ありがとうございます！！n今後使用させていただきたいとおもいます。n感謝です！
2008年3月10日 04:17
9 - はるみ さん
はじめまして。nこのCSSだけでプルダウンメニューを作る妙技、以前に他でも見たことがあってずっと探していたのですが見つからず、助かりました！ありがとうございます。nところでこの妙技とは直接関係ないのですが、プルダウンメニューのレイヤー構造がIE6、7で崩れているのがleftの位置を80pxより小さくするとわかります。「Photo」の下に潜ってしまっています。それからIE7では「Blog」と「Photo」間のマージンが他より余計に取られています。（margin-bottomを0にしてみて下さい）nこのpositionセレクタ系のIEのバグ？（z-indexも無視？marginの解釈もおかしい？）と思われる現象は、javascriptを使ったポップアップメニューでも現れ、困っています。何か解決法をご存知ないでしょうか？プルダウンメニューを横並びにすればバレないのですが、重ねて使いたいシーンもあるので・・・。よろしくお願いします。
2008年5月16日 17:29
10 - えど
さん
>>9 - はるみさんコメントありがとうございます。nなるほど、微妙に崩れていましたか・・。nちょっと時間があるときに調査してみます。nご指摘ありがとうございました！
2008年5月16日 18:07
11 - MAX さん
はじめまして。nCSS初心者のMAXと申します。nプルダウンメニューを設置するにあたり、IE6で散々苦労してきましたが、nえどさんの情報をもとに、IE6でのCSSだけでプルダウンメニューが、nうまく表示することが出来ました！n有り難うございます♪このCSSで、ボタン部分をテキストではなく、画像ボタンにして試しているのですが、n「hover」時にうまく画像が入れ替わらないのです。。。nいろいろ試してみましたが、うまくいきません。nもし宜しければ、何か解決方法をお教えいただけますでしょうか？n恐れ入りますが、ご指導のほど宜しくお願い致します。n
2008年7月20日 14:29
12 - えど
さん
>>11 - MAXさんすみません、コメントをスルーしてしまっていました(;´Д｀)日付を見たらほぼ 1 年前とは・・。nたぶん、もう解決はされてるでしょうが、nもしまだなにか疑問などありましたらnヘッダ下のメニューの「問い合わせ」からn連絡いただけると助かります。
2009年6月15日 16:35
13 - ある さん
リンクURLのサイトメニューがIE7で動作しないので探していたらここにたどり着きました。
ある制作会社に依頼した案件が、このやり方をやっていたようです。
上記にあるように”XHTML 1.0 Transitional”に書き換えたら、という箇所に希望を見たのですが、確認したところそこは問題ありませんでした。
なにかお知恵をお貸しいただければ、、、。
2010年2月17日 14:33