ADxMenu(aplus moments)
昨年 7月にGIGAZINEで紹介され、日本でも知られるようになったマウスオーバーでドロップダウンするメニューに関わるコード集です。
特徴としては、可能な限りシンプルなHTMLを維持しつつ、CSSだけでドロップダウンメニューを実現しています。また、CSS解釈の点で難のある IE6 には、"Conditional Comments"(「参考記事」ご参照) を使い、同じような動作を保証する JavaScript を読み込ませるようにしています。空のGIFファイルを用意するなど、細やかな対応がなされています。
年が明けてからだと思うのですが、今般、IE7 への対応のために若干コードが追加されるとともに、ページ構成も昨夏から変化したようです。
特に、旧サイトでは多くの外観(デザイン)に基づく動作サンプルが列記されていたのですが、今般の改変により、共通のデザインで展開方向が異なる下記の４種類にまとめられました。
ただ、各サンプルにおいて、CSS のコードがひとつの HTML ファイルの "head" 内に記述されるようになり、外部 CSS で実装したい場合に若干の切り分けが必要になります。
このブログのデザインを変更するつもりで、いろいろいじる過程で書いてみた HTB のサンプルを上げておきます。単に"style"内のコードをコピペでファイル毎に切り分けただけですが…。
