ppBlogのRC2リリースはもうすぐです。で、こういうプログラムを作っていると派生的に、使えそうなCSSのテクニックだとかJavaScript/Ajax関連の技術も身に付くもんです。なのでメモも兼ねて汎用性がありそうなのは、ここに書いておこうと思います。

CSSのみで3階層目までのメニュを実現

　ネットを検索すれば、CSSのみによる(JavaScriptを用いない)展開型のメニューはいくらでも出てきます。厳密には、IE6に限ってはCSSのサポートが時代遅れなので、IEだけは仕方なくJavaScriptで制御というパターンが多いのですが。

　で、この手のウェブに転がっているPure CSS展開型メニューは、「2階層目」までのやつが殆どではと思います。この2階層目までの展開メニューはppBlogの管理画面でも使っていますが、今回のバージョンアップにあたり、3層目まで展開するやつが欲しくなったので、そんなやつを作りました。原理的には、何階層まででも作ることが可能ですが、階層構造がややこしくなるので、実用上は3階層までというのが妥当なところでしょう。具体的にデモを見てみましょう。

　→http://p2b.jp/demo/CSS_menu1.html

　因みに、残念ながらこのままではIE6では動きませんので、IEに限ってはJavaScriptの助けを借りることになります。IE7βでは、一応は動いてくれますが、ときにトリッキーな動作をします。まぁベータ版ですから。FirefoxやSafari、Operaなどのモダンなブラウザであれば、問題なく動くのではと。ソースも非常にシンプルですので興味がある方は色々アレンジしてみて下さい。

　で、未だに大多数のユーザーが使っているであろうIE6を無視してしまうのは、さすがに心もとないので、JavaScriptで制御する訳ですが、それは次回に。