入れ子のプルダウンメニューを作る

カテゴリ:CSSテクニック 2006年12月13日 15:30

このあとのエントリーで、CSSのみでプルダウンメニューを作る を書いてます。
IE6 にも対応しているので、参考にしてみてください。

前回、CSSによるポップアップメニュー でポップアップメニューを作成したけど、今度はそれをさらに発展させて入れ子のポップアップメニュー(プルダウンメニュー)を作ってみた。(というか、案件でそういうのを作ることになって、サンプルを作ったのでアップしてみただけだけどw)

ただ、IE でも動作するようにするため、JavaScript を介入させています。
IE を省いて、モダンブラウザのみで動けばいい、ということであれば CSS だけでも実現できるようです。
faLog さんを参考にしたので、CSS だけで実現させたい場合は参考にしてください。

ちなみに、入れ子を複数指定しても大丈夫なように作ってます。
<li> 要素の中に <ul> 要素を入れ子にしていくだけで、階層構造が作れるようになってます。

サンプルの解説

【サンプル】

▼EntryMore▼

CSS ソース

JavaScriptソース

HTML ソース

この記事のカテゴリー一覧を見る⇒CSSテクニック

  • このエントリーをはてなブックマークに追加

トラックバックURL

http://css-eblog.com/cgi-bin/mt/mt-tb.cgi/29

コメント

1 - yushiki さん

縦型へのカスタマイズは、どのようにすればよいのでしょうか?

2007年9月 4日 13:35

2 - えど さん

>>yushikiさんどもです。縦のカスタマイズは考えてませんでした・・。nただ、CSSで横一列に並べているので、nhttp://edo-freiheit.sakura.ne.jp/eblog/2006/12/post_13.html↑このページからサンプルをDLしていただいて、nその中のCSSを下記のように修正してもらうと、n縦メニューに対応できると思います。nサイズや出現位置については別途調整してください。n-----------------dl#menuとdl#menu dtにあるfloat:leftの記述を削除。ndl#menu dt ulにあるz-indexを1に設定。ndl#menuの背景を任意の色に設定。n-----------------おそらくこれでいけると思います。

2007年9月 5日 09:10

3 - yushiki さん

上記、方法で試してみましたが、失敗しました。n横メニュー2のみ表示。横に同様の無限ラインが出現。n 縦、1バナー分空白があって、展開しています。nまた、幅可変で設置したいのに、左0位置に現れてしまいます。nいろいろと試さないといけませんね。

2007年9月21日 02:09

4 - えど さん

>>yushikiさんえぇと、dl#menuの色は変更しましたか? これを設定しないとメニューの文字が白のため背景と一緒になってしまって見えないのだと思います。(現状では、背景画像が指定されているため、画像ではなく色に変更する必要があります)nまた、左0の部分は任意の数字に変更してみてください。ndl#menu dt ulのleftが左からの位置を指定しています。

2007年9月25日 09:35

5 - 木村 さん

はじめまして、こんにちはご紹介しているプルダウンメニューを利用させていただいています。nブラウザ依存せず素晴らしいです。n1つ質問をさせてください。nぶら下がるメニューの部分を個別の画像で表示して、さらにマウスオーバで画像が変わるという処理を加えようとしています。nぶら下がりのメニューのにIDをふってCSSで処理しようとしましたがうまくいきませんでした。nお力お借りできますでしょうか?

2007年11月 8日 08:31

6 - えど さん

>>木村さんn参考にしていただいたようでありがとうございます。nおそらくされようとしていることは実現可能だと思います。nが、うまく行かない状況が分からないのでアドバイスしづらいです。nもしサンプルなどがサーバにあがっているようであればそのURLを教えてもらえますか?

2007年11月 9日 09:44

7 - test さん

IE8で見てますけどメインメニューの↓に表示されたサブメニューにマウスを移動したら、メインメニューからカーソルが外れた時点でサブメニューが消えていくら高速にマウスを移動させても下のメニューをクリックすることができませんでしたよ

2008年10月16日 16:05