3階層以上のドロップダウンメニューを表示するjQueryプラグインdroppy

当ブログのメニューは3階層以上のプルダウンメニューを表示することができる jQuery のプラグイン droppy を使ってます。 ナビゲーションにマウスオーバーすると下の階層が 「ニュ!」 と飛び出してくる、なかなか楽しい jQuery プラグインです。

尚、当ブログで使用した droppy は配布サイトからダウンロードしたオリジナルですが、 CSS は後述するサイト様からまるごと拝借したものです。 IE6 と IE7 のハックが施されたもので、透過しないものになります。


Sponsored Link

jQueryプラグインdroppy の導入・設定

  1. jQuery project page. より Droppy をダウンロード。(バージョン0.1.2 使用)
  2. ZIPファイルを解凍して docs フォルダ → javascripts フォルダにある jquery.droppy.js を開き 「$」 となってる箇所を 「jQuery」 に置き換え。 編集には サクラエディタ の検索・置き換えを使用。
  3. 置き換えたら jquery.droppy.js を現在使用中の WordPress のテーマにアップロード。 実際は使用中のテーマの中に 「 jsフォルダ」 を作りそこに入れてます。 
  4. header.php の </head> 前に以下を記述。
    <script type="text/javascript" src="http://127.0.0.1/wordpress/wp-content/themes/fool/js/jquery.droppy.js"></script>
  5. メニューを表示させる箇所に以下を記述。(当ブログでは header.php )
    <script type='text/javascript'>
      jQuery(function() {
        jQuery('#nav').droppy({speed: 200});
      });
    </script>
    <ul id="nav">
      <li><a href="<?php bloginfo('url'); ?>" title="HOME">HOME</a></li>
            <?php wp_list_categories('use_desc_for_title=1&title_li='); ?>
            <?php wp_list_pages('title_li='); ?>
    </ul>
  6. Ys DESIGN さんの IE6 、 IE7 ハックが施された CSS をコピーし自分の CSS に貼り付け。
  7. CSS を自分のサイトに合わせて調整。

以上です。

尚、 header.php に記述した、droppy({speed: 200}) の数字を大きくするとドロップダウンするスピードが遅くなります。

あと、コンフリクトは起こっていないのですが header.php の 「js/jquery.droppy.js”></script>」 に下記を記述してます。

<script type="text/javascript">//<![CDATA[
jQuery.noConflict();
//]]></script>

これは当ブログで施したやりかたなので、全ての WordPress テーマでできるかはわかりません。 また、私には JavaScript ライブラリの jQuery 、更には PHP についての知識はほとんどありません。 これはあくまで備忘録です。

Sponsored Link

2 thoughts on “3階層以上のドロップダウンメニューを表示するjQueryプラグインdroppy

  1. 畠井さん、はじめまして。

    <script type=”text/javascript”>//<![CDATA[jQuery.noConflict();//]]></script>

    はコンフリクト対策なので、症状がでていないのであれば、記述する必要はないと思います。

    あと、手順4の 「src=”http://127.0.0.1/wordpress/wp-content/themes/・・・・・」 の 127.0.0.1 はローカル環境のものになりますので、ご自分の URL に変えてください。

    私は jQuery や PHP に詳しくないので、 「コレは注意したほうが良い」 と言えることはないのですが、Web サイトを改造する場合はいつもローカル環境でテストしています。

    ご存じかもしれませんが、 XAMPP や WebMatrix というツールがあります。

    ちなみに私は XAMPP を使っています。

  2. 質問のコメントで申し訳ありません。
    畠井と申します。

    droppy.jsを実装しようとしています。
    が、 の内容とコンフリクトを
    起こしているようで動作しません。
    を外すと動作します。

    ソースを拝見させていただいたところ、
    //

    こういうコードがありました。これは必要でしょうか?

    何か、wordpressに実装する場合の注意点がございましたら、お教えいただけませんでしょうか?
    よろしくお願いいたします。

コメントを残す