プルダウンメニュー教えてください。

プルダウンメニューを作成しようとしていますが、望みのものが見つかりません。

欲しいプルダウンメニューは、
・画像の上にポインタを置いたら、下に同じ幅でメニューが表示される。
・そのメニューは画像ではなく、テキストによるメニュー。透過されており、不透明度を調整できる。
・各メニューは横線で区切られており、ポインタを下に滑らすとポインタのある枠（ボックス）の背景色と文字色が変わる。
・対応ブラウザは、IE6以上、FF、Chrome。

こういったプルダウンメニューを探しています。ネットで探せば、Java ScriptやCSSが
たくさん紹介されているのですが、ぴったりのものが見つかりません。

もしご存知でしたら、教えていただけますでしょうか？

よろしくお願いします。

No.3 ベストアンサー 回答者： ORUKA1951 回答日時： 2012/09/12 17:36

まず、HTMLは

ホームページ作成 - Webデザイン・CSS - 教えて！goo ( http://oshiete.goo.ne.jp/qa/7689775.html )
　の下の方と同じものとして、(サブメニューはあってもなくても構いません。)

div.nav ol,div.nav ol li{list-style-type:none;margin:0;padding:0;}
div.nav ol{display:block;width:100%;position:absolute;}/* ここだけ追加 */
div.nav ol li{width:22%;float:left;position:relative;}
div.nav ol li ol{display:none;}
div.nav ol li:hover ol{display:block;}

/* ここから、サブ項目がなければ不要 */
div.nav ol li:hover ol li ol{display:none;}
div.nav ol li:hover ol li:hover ol{display:block;position:absolute;left:100%;top:0;width:50%;}
div.nav ol li ol li{display:block;width:100%;}
/* ここまでは */
div.section{clear:left;}

　残しておいても問題ないです。将来サブ項目を増やすことがあったとき役に立つかもね。

　透過ですが、要素自体に透過をかけるのは要素が画像のときくらいで、この場合は背景色だけ透過させるほうが良いでしょう。とても見にくくなります。

div.nav ol li{background-color:rgba(255,255,255,0.5)}
を書き加えてください。
　0.5は透過度で、0が透明1が不透明です。
rgbaはほとんどのブラウザが対応していますのでベンダーフィックスは不要です。
その前の三組の数値は、0～255で前から文字通りリRGBです。

セレクタの指定は、むつかしくありません。

CSS2では、基点となるセレクタにセレクタ(選択手段)を書き加えていくルールです。
基点セレクタを省略すると、それは*という全称セレクタを省略されたものとみなします。
しばしば、古い説明では
.nav
なんてのもありますが、適切ではありません。
*.nav
と書くべきです。
　この場合*はすべての要素(HTMLで言うところのタグ)に当てはまりますから
<p class="nav">にも、<ul class="nav">にも当てはまります。

div.nav ol,div.nav ol li{list-style-type:none;margin:0;padding:0;}
と言うセレクタは
div.nav ol
div.nav ol li
の二つを一度で指定しています。(セレクタのグループ化)
div.nav ol li
の.はクラスセレクタと呼ばれるもので、HTMLのclassは、半角スペースで区切られたリストで指定します。
[例] class="important memo" というふうに、クラス(学級とかと意味は同じです)
　そのリストの中にその言葉が含まれていればという意味ですから
class="nav menue sitemap"とかにも当てはまります。

　その次のolとの間に半角スペースがありますが、これは子孫セレクタと言うもので、その子孫の---子供も孫も曾孫も曾々孫・・もと言う意味
　すなわち

div.nav ol li
navという値をclassの中に持つdiv要素の子孫のol要素の子孫のli要素と言う意味です。

　子供だけに適用させる場合は子供セレクタ>をつかって
div.nav>ol>li
と書きます。この場合は孫には適用されません。

★このようにセレクタは、スタイルシートのすべての基本になります。セレクタを知っておくと、デザインのためにHTMLを書かなくて良いので、HTMLはシンプルになります。そしてスタイルシートも、それに合わせてわかり易く簡単になります。

div.nav ol li ol li{border:none;}
div.nav ol li ol li+li{border-top:2px red solid;}

と書けば、プルダウンメニューの上に線が入ります。
　+は兄弟セレクタと言って、liの弟(階層的に並列で次に来るもの)に適用されます。

★セレクタとカスケーディングは、プロパティを学ぶより先に学んでください。プロパティなりはるかに重要です。仕様書でもプロパティより前に書いてあります。
5. セレクタ ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
6. 値の割り当て、カスケード処理、継承 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )

　一応リキッドデザインなのでウィンドウ幅を変えてもよいはずです。

この回答へのお礼

返答が遅れまして、申し訳ありません。
丁寧にご説明いただき、誠にありがとうございました。

ご回答いただいてから、jQueryと並行して四苦八苦してきたのですが、
IE6で動作しないなど、まだ望みの状態にはなっていません。
皆さんからいただいた情報を元に、ひとつずつ原因を突き詰めていきたいと
思います。

また別枠で質問させていただくことになるかもしれません。
もし目に留まることがございましたら、ご回答いただければ幸いです。

ありがとうございました。

お礼日時：2012/09/26 09:07

No.2 回答者： tkmojo 回答日時： 2012/09/12 11:50

jQueryのプラグイン、droppyを使えば可能です。

http://c-brains.jp/blog/wsg/09/02/19-212529.php

・テキスト
・透過
・下のものが下がらない
・横線による区切り
・IE6にも対応

の要件を満たしていると思います。
実際に私も使用したことがありますが、
不透明度の変更や文字色、背景色、横線などはcssで普通に書けば出来ます。

上記サイトの下の方からリンクしているサンプルサイト「droppy - Nested drop down menus」では、
画像クリック時にメニューが表示されていますが、
画像へのマウスオーバーで表示させることもできます。

この回答へのお礼

返事が大変遅れまして、申し訳ありません。jQueryのプラグイン、大変参考になりました。
jQueryのサイトが工事中でしたので、ダウンロードできませんでしたが、
サンプルページから落としました。ページに完全に組み込むにはまだカスタマイズが必要なことや、
他のJavaScriptと干渉しあい、動作しないという問題もあり、まだまだ調整が
必要ですが、他にも色々調べてみます。ありがとうございました。

お礼日時：2012/09/26 08:57

No.1 回答者： ORUKA1951 回答日時： 2012/09/11 19:12

二つ前の質問

　ホームページ作成 - Webデザイン・CSS - 教えて！goo ( http://oshiete.goo.ne.jp/qa/7689775.html )
をご覧ください。
　スタイルシートを書き換えれば、そのままで使えるはずです。

この回答への補足

ご返答ありがとうございます。
早速、ソースをコピーして、ブラウザで確認してみましたが、望みのものとは少し異なりました。

まずプルダウンメニューが表示されるとその下にある全体内容が下にさがってしまいます。
下がらないようにしたいと条件に一旦書いたのですが、そんなメニューの用途があまり思い浮かばず
条件として書くと読む側は逆にややこしくなるかな、と思い、削除してしまいました。

CSSを書き換えれば、下がらないようにできると思いますが、CSSにあまり詳しくないので、
簡単なものなら分かりますが、どの部分がそれに相当するのか皆目検討がつきません。
自分なりに触ってみましたが、表示が崩れる一方です。

それと下に表示されたメニューを透過させたいのですが、透過は以下の記述でよろしいでしょうか？

filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;

他サイトで、これならほぼどのブラウザでも透過が実現できるとありました。

もしよろしければ、再度ご回答をいただければと思います。
何とぞよろしくお願いいたします。

補足日時：2012/09/12 10:31