ここでは、CSSだけで実現するポップアップメニューのデモンストレーションを行っております。
但し、この文書は実用上の事を考慮して、JAVAスクリプトを用いる事で、CSSだけではポップアップメニューが実現出来ないインターネットエクスプローラ 6.0に対応させております。
実際にCSSだけで実現しているページは以下になります。
尚、平成21年11月 1日に、スタイルシートとスクリプトを全面的に書き直しました。
旧版のサンプルは以下に移転しております。
CSSのセレクタとして定義されている、
を組合わせる事で実現出来る、ポップアップメニューの機能です。
但し、インターネットエクスプローラ 6.0まででは直下セレクタや隣接セレクタを認識しないため、この機能をCSSだけで実現させる事は出来ません。
そこで、これらに対しては、JAVAスクリプトを用いる事で実現させる事としました。
平成21年10月31日まで公開しておりました旧版とは、以下の点で大きく異なっております。
ポップアップメニューを出し、その中の項目をポイントする事で、そのメニューの右に子メニューが出せるようにしました。
尚、子メニューからも更に孫メニューを出せるようにしており、更に孫メニューからも…と言うようにメニューを連鎖させる事も可能です。
対応しているブラウザは、以下の通りです。
インターネットエクスプローラ ウィンドウズ用5.0以降
上記の通り、JAVAスクリプトを用いない場合、すなわちCSSだけでポップアップメニューを実現する場合は、
でのみ対応となりますが、IE 6.0もユーザ数が激減しているため、これらの環境では閲覧だけ保証すれば良いと割り切るなら、CSSだけでやった方が遙かに簡単でしょう。