スタイルシートでプルダウンメニュー
スタイルシートを使った、プルダウンメニューです。
このプルダウンメニューは、IE8, IE7, IE6, Firefox3, Safari4, Opera10, Sleipnir2で動作することを確認済みです。
プルダウンメニューのサンプル
プルダウンメニューのHTMLソース
| HTMLヘッダの記述 |
<link rel="stylesheet" type="text/css" href="pulldown.css" />
|
プルダウンメニューは、下記の例のようにHTMLを記述します。
ulタグに、menuクラスを指定するだけで、利用できます。
可変長の文字列や、3階層以上のメニューにも、対応しています。
スタイルシートの著作権は放棄していませんが、そのまま利用したり、カスタマイズして利用することは、自由に行って頂いて構いません。
| 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>
<li><a href="#">メニュー13</a>
<ul>
<li><a href="#">メニュー131</a></li>
<li><a href="#">メニュー132</a></li>
<li><a href="#">メニュー133</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">メニュー2</a>
<ul>
<li><a href="#">メニュー21</a>
<ul>
<li><a href="#">メニュー211</a></li>
<li><a href="#">メニュー212</a></li>
</ul>
</li>
<li><a href="#">メニュー22</a></li>
</ul>
</li>
</ul>
<!-- ↑プルダウンメニュー↑ -->
|
スタイルシートのカスタマイズ方法
カスタマイズする場合は、下記のファイルをダウンロードし、pulldown.cssの内容を変更してください。
プロパティの値を変更することで、色の変更や、大きさの変更などが可能です。
また、backgroundプロパティに、画像ファイルを指定することで、見栄えの良いメニューにすることもできます。
スタイルシートは、プロパティの並び順の変更や、プロパティの追加を行うと、デザインが崩れる可能性がありますので、注意してください。