スタイルシートで階層メニュー
スタイルシートを使った、階層メニュー（カスケードメニュー）です。
この階層メニューは、IE8, IE7, IE6, Firefox3, Safari4, Opera10, Sleipnir2で動作することを確認済みです。
階層メニューのサンプル
テキストを利用した階層メニュー
画像を利用した階層メニュー
階層メニューのHTMLソース
| HTMLヘッダの記述 |
<link rel="stylesheet" type="text/css" href="treemenu.css" />
|
階層メニューは、下記の例のようにHTMLを記述します。
テキストを利用した階層メニューは、ulタグに、menuクラスを指定(class="menu")するだけで、利用できます。
画像を利用した階層メニューは、ulタグにtreeクラスを指定(class="tree")するだけで、利用できます。
子階層を持つliタグにpクラスを指定(class="p")すると、子階層があるかどうかが判りやすくなります。
階層メニューは、可変長の文字列にも、対応しています。
スタイルシートの著作権は放棄していませんが、そのまま利用したり、カスタマイズして利用することは、自由に行って頂いて構いません。
テキストを利用した階層メニュー
| HTMLの記述 |
<!-- ↓階層メニュー↓ -->
<ul class="menu">
<li><a href="#">TOP</a></li>
<li><a href="#">メニュー1</a>
<ul>
<li><a href="#">メニュー11</a></li>
<li><a href="#">メニュー12</a>
<ul>
<li><a href="#">メニュー121</a></li>
<li><a href="#">メニュー122</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">メニュー2</a>
<ul>
<li><a href="#">メニュー21</a></li>
<li><a href="#">メニュー22</a></li>
</ul>
</li>
</ul>
<!-- ↑階層メニュー↑ -->
|
画像を利用した階層メニュー
| HTMLの記述 |
<!-- ↓階層メニュー↓ -->
<ul class="tree">
<li><a href="#">TOP</a></li>
<li class="p"><a href="#">メニュー1</a>
<ul>
<li><a href="#">メニュー11</a></li>
<li class="p"><a href="#">メニュー12</a>
<ul>
<li><a href="#">メニュー121</a></li>
<li><a href="#">メニュー122</a></li>
</ul>
</li>
</ul>
</li>
<li class="p"><a href="#">メニュー2</a>
<ul>
<li><a href="#">メニュー21</a></li>
<li><a href="#">メニュー22</a></li>
</ul>
</li>
</ul>
<!-- ↑階層メニュー↑ -->
|
スタイルシートのカスタマイズ方法
カスタマイズする場合は、下記のファイルをダウンロードし、treemenu.cssの内容を変更してください。
プロパティの値を変更することで、色の変更や、大きさの変更などが可能です。
スタイルシートは、プロパティの並び順の変更や、プロパティの追加を行うと、デザインが崩れる可能性がありますので、注意してください。
