CSSのみによる展開メニューとか

category-icon

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

CSSmenu
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で制御する訳ですが、それは次回に。

— posted by martin at 10:33 pm   commentComment [3]  pingTrackBack [0]

この記事に対するコメント・トラックバック [3件]

scrollUp1. ぷらむ Website — 2006/05/21@08:31:35

RC2リリース前で申し訳ありません。
RC1で、「強制改行(brタグ)を有効にする」に設定しても、IEではスペース行が挿入されません。FirefoxではOK。
それで移行すると1.4時代の文章は非常に読みづらくなります。
RC2では、そこは直っているかもしれないが、このmartinさんのHOMEでは該当箇所(スペース行)がなく確認ができなかったので、ご報告します。

2. t★day — 2006/05/21@16:27:55

ぷらむさん、こんばんは。
私も以前、Martinさんにこの件で質問した事があります。
http://forum.p2b.jp/index.php?mode=box&UID=2305&display=allLink
バージョン1.5の時です。私はまだ1.5βです。
IEのCSSバグのようです。
今回、RC2がアップされましたらバージョンアップに挑戦しようと思っています。

3. naoK Website — 2006/05/27@12:47:05

最近IEも強制改行も使っていなかったので気づかなかったんですが(汗
cssファイルで
* html .article-content br { /* for buggy IE */
line-height: 0;
}
となっているところを削除すればいいみたいです。
1.5よりも前のバージョンのBasicのテーマでこの問題が起きたんでしたよね,確か。そのときと条件が変わってしまっているのかもしれません。

この記事に対する TrackBack URL:

設定によりTB元のページに、こちらの記事への言及(この記事へのリンク)がなければ、TB受付不可となりますのであらかじめご了承下さい。

コメントをどうぞ。 名前(ペンネーム)と画像認証のひらがな4文字は必須で、ウェブサイトURLはオプションです。

ウェブサイト (U):

タグは使えません。http://・・・ は自動的にリンク表示となります

:) :D 8-) ;-) :P :E :o :( (TT) ):T (--) (++!) ?;w) (-o-) (**!) ;v) f(--; :B l_P~

     
T: Y: ALL: Online:
Created in 0.0033 sec.
prev
2022.6
next
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30