ASH | サーバ | セキュリティ | Linux | FreeBSD | DB | Web | CGI | Perl | Java | XML | プログラム | ネットワーク | 標準 | Tips集

スタイルシートでプルダウンメニュー

 スタイルシートを使った、プルダウンメニューです。
 このプルダウンメニューは、IE8, IE7, IE6, Firefox3, Safari4, Opera10, Sleipnir2で動作することを確認済みです。

プルダウンメニューのサンプル

プルダウンメニューのHTMLソース

 上記のプルダウンメニューを利用するには、下記のようにヘッダを記述します。
 IE6に対応する場合、IEのW3C標準仕様対応ライブラリ(Google Code)を利用する必要があります。
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プロパティに、画像ファイルを指定することで、見栄えの良いメニューにすることもできます。
 スタイルシートは、プロパティの並び順の変更や、プロパティの追加を行うと、デザインが崩れる可能性がありますので、注意してください。



Copyright (C) 1995-2009 ASH.
URL:http://ash.jp/ Mail:info@ash.jp