サイト内の情報が増えてくると、ナビゲーションは階層化して表現したくなりますが、そんな時に便利なのが、プルダウンメニュー。flashなどで作成してもいいのでしょうが、jQueryのプラグインでも作成することができます。HTMLの記述もシンプルですので、SEO的にもいいのではないでしょうか。上部に設置したメニューがアニメーションしておりてきて、第二階層以下のメニュー表示は透明度を保ちながらおりてくるので、見た目に少しリッチでいい感じがするプルダウンメニューの導入方法について。

CSSなどのカスタマイズでお好みの色や、画像なんかも使う事ができるので、UI周りを少し特徴あるモノにする時なんかに、便利。

プラグインはこちらから droppy - Nested drop down menus

導入方法は、簡単です。
jQueryとさっきのURLから

ダウンロードすると、こんな感じのファイル構成になっていますが、 必要なのは、JavascriptファイルとCSSだけです。必要に応じてCSSを編集すれば、自分のデザインにもフィットして使う事もできます。

あと、実行するファイルに下記のHTMLとJavascriptを記述する必要があります。

Javascript部分

<script type='text/javascript'>
  $(function() {
    $('#nav').droppy();
  });
</script>

HTML部分

<ul id='nav'>
  <li><a href='#'>Top level 1</a></li>
  <li><a href='#'>Top level 2</a>
    <ul>
      <li><a href='#'>Sub 2 - 1</a></li>
      <li>
        <a href='#'>Sub 2 - 2</a>
        <ul>
          <li>
            <a href='#'>Sub 2 - 2 - 1</a>
            <ul>
              <li><a href='#'>Sub 2 - 2 - 1 - 1</a></li>
              <li><a href='#'>Sub 2 - 2 - 1 - 2</a></li>
              <li><a href='#'>Sub 2 - 2 - 1 - 3</a></li>
              <li><a href='#'>Sub 2 - 2 - 1 - 4</a></li>
            </ul>
          </li>
          <li><a href='#'>Sub 2 - 2 - 2</a></li>
          <li>
            <a href='#'>Sub 2 - 2 - 3</a>
            <ul>
              <li><a href='#'>Sub 2 - 2 - 3 - 1</a></li>
              <li><a href='#'>Sub 2 - 2 - 3 - 2</a></li>
              <li><a href='#'>Sub 2 - 2 - 3 - 3</a></li>
              <li><a href='#'>Sub 2 - 2 - 3 - 4</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href='#'>Sub 2 - 3</a></li>
    </ul>
  </li>
</ul>