jQueryプラグインでクールなプルダウンメニュー

02月 2009年

jQueryプラグインでクールなプルダウンメニュー

sakai 21:25 PM

イメージ

お仕事で JavaScript によるプルダウンメニューを実装する必要があり、色々試してみて一番お手軽だったのが「droppy」です。
「droppy」は jQuery のプラグインです。

パッケージをダウンロードすると色々とファイルが入っていますが、必要なのは

src
├ javascripts
│　└ jquery.droppy.js
└ stylesheets
　　└ droppy.css

の 2 ファイルです。

プルダウンメニューの実装は、HTML に以下のコードを貼りつけて CSS を適用すればオッケーです。

■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>

ダウンロードしてきた CSS を書き換えればデザインの変更も可能です。
CSS が非常にシンプルなので、そのあたりのカスタマイズは楽ちんでした。

JavaScript を以下のように書き換えればエフェクトのスピード調節も可能とのこと。
自分は必要なかったので試していませんが…

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

ライブラリを使えば工数も削減できるし、何より IE6 にもデフォで対応してくれているのでハッピーです。

ツール・アプリケーション

トラックバック

このエントリーのトラックバックURL: http://c-brains.jp/cgi-bin/mt/###/1812
###はmt-tb.cgiに変更してください。

はじめまして。
このページを見てプルダウンメニューを試しています。
気になった点を確認させていただいてもよろしいでしょうか。

本文中に「必要なファイルは2ファイルのみ」とありますが、project-page.cssも読み込まないと、動かないのではないでしょうか。

droppy-0.1.2
└ docs
　　└ assets
　　　　└project-page.css

bmole | 2009年06月22日 15:57

＞bmole さん
はじめまして、コメントありがとうございます。
ご指摘の「project-page.css」はデモページのレイアウト用の CSS ですので、読み込む必要はありません。
既存のページに droppy を実装したい場合は、「droppy.css」だけ読み込めば大丈夫かと思います。

sakai | 2009年06月22日 19:55

お返事ありがとうございます。
確かにieでの表示が若干変でしたが、
「project-page.css」なしでも動きました。
しかし「jquery.js」無しだと完全に動きません。
やはり「jquery.js」も読み込ませいるのでしょうか。

/assets/jquery.js

droppy-0.1.2
└ docs
　　└ assets
　　　　└project-page.css

bmole | 2009年06月22日 20:17

＞bmole さん
ご指摘の通り、jQueryのプラグインを動作させるためには必ず「jquery.js」を読み込ませる必要があります。
説明不足で申し訳ございません (>_<)

よろしくお願いいたします！

sakai | 2009年06月22日 20:30

sakaiさま
いろいろお教えいただきまして、どうもありがとうございます。
droppyよさそうですね。CSSとどちらか試してみたいのですが、
私の使っているGoLiveCS2（MacOＳＸ10.4.11）のプレビューモード&ブラウザプレビューで、CSSは動きますがdroppyが動きません。jquery.js、jquery.droppy.js、javaScript外部ファイル化も行なったのですが、どうしてでしょうか？的外れな質問かもしれませんが、よろしくお願いいたします。

のう | 2009年07月07日 16:45

＞のうさん
コメントありがとうございます。
実は GoLive を使ったことがなくて、プレビューモードで JS が動かない原因はちょっとわかりません。すみません…
おそらく、GoLive のレンダリングが JS に対応していないのだと思いますので、プレビューはやはり Web ブラウザでするのが良いのではないかと思います。

お役に立てず申し訳ございません。
よろしくお願いいたします。

sakai | 2009年07月07日 17:37

sakaiさま

ありがとうございます。
ブラウザプレビューも駄目なのです。Adobeに問い合わせしたら例によって冷たいですし、困っています。あ〜！ご返信、感謝いたします。CSSでもコメントしておりますが、そちらもよろしくお願いいたします。

のう | 2009年07月07日 18:33

＞のうさん
Firefox などで HTML を普通に開いてもダメですか？
であれば、パスが間違っているなどの原因かと思いますが…

http://onehackoranother.com/projects/jquery/droppy/
上記のサイトのコードをコピペして、頑張ってみてください。
トライ＆エラーが上達への近道です！

CSS のほうはもう少々お待ちください。
よろしくお願いいたします。

sakai | 2009年07月07日 19:06

おかげ様でdroppyをサイトに実装することができました。
ありがとうございました。
しかし1つのサイトに他のプラグインを一緒に実装しようとすると、なぜか必ずdroppyのほうが動作しなくなります。（それぞれ単独であれば動作します）
試しに日付入力用のカレンダー（http://www.electricprism.com/aeron/calendar/）を一緒に実装しようとテストしてみたのですが、こちらもdroppyのほうが動作しなくなります。
droppy使用上で何か注意点などはございますでしょうか。
もしご存知であれば、お教えいただければ幸いです。

bmole | 2009年07月22日 13:21

＞bmole さん
コメントありがとうございます。

droppy は jQuery のプラグインですが、ご指摘のカレンダーは mootools のプラグインですので、それで併用できない可能性が高いです。
スクリプトを読み込む順番を変えると正常に動作したりすることもありますが、上手くいかないようであれば jQuey のプラグインで統一するのも一つの方法かと思います。お試しください。

よろしくお願いいたします。

sakai | 2009年07月22日 15:08