愚者の紋章 -The Fool-

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

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

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

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 についての知識はほとんどありません。　これはあくまで備忘録です。

関連する記事

• WP-lightpop – 動画のポップアップも可能なLightbox風プラグイン
• WP-Awasete-Yomitai – あわせて読みたいをテキスト表示にするWordPressのプラグイン
• Head Cleaner – サイトのヘッダとフッタを整形し最適化&高速化を行うプラグイン
• FeedBurner FeedSmith – WordPressのFeedをFeedBurnerのフィードにリダイレクトするプラグイン