簡単にメガメニューを実装できるプラグインjQuery Mega Menuの使い方

簡単にメガメニューを実装できるプラグインjQuery Mega Menuの使い方

Posted 2014/07/10 by oredayo

やあ。おれだよ。
ノンプログラマー、ノンデザイナーでも簡単にメガメニューを実装できるプラグインを紹介するよ。

今回やりたいこと

  • WordPressのカスタムメニューを使いたい
  • 親メニュー、子メニュー、孫メニューの3階層のナビにしたい
  • Amazonみたいにアニメーションを付けてワサっと広げたい

この3つを超簡単に実現できる、Jqueryプラグイン「jQuery Mega Menu」の使い方を解説します。

まず完成形のイメージ
こんな感じ。
お名前.com

なんかカッコイイ!

たぶんユーザー的にも使いやすいはず!!!

使い方

ダウンロード&インストール

管理画面のサイドメニュー>プラグイン>新規追加 から追加してもOKですし、下記サイトからダウンロードしたファイルを解答し、wp-content>pluginsディレクトリに直接アップロードしてもOKです。

http://www.designchemical.com/blog/index.php/wordpress-plugins/wordpress-plugin-jquery-drop-down-mega-menu-widget/
「Download JQuery Mega Menu Widget 〜〜〜」のリンクからダウンロードできます。
ダウンロード方法

初期設定

公式サイトのヘルプを参照しながらfunctions.php に下記のコードを追加します(前提としてカスタムメニューが使えるように設定を行っておく必要があります。)。

register_sidebar(array(
'name' => 'my_mega_menu',
'before_widget' => '<div id="my-mega-menu-widget">',
'after_widget' => '</div>',
'before_title' => '',    
'after_title' => '',
));

要するにウィジェットエリアにmega-menuプラグインの編集画面を追加するという作業です。

管理画面サイドメニュー>外観>ウィジェットを選択し、下記の画面が追加されていればOKです。

ウィジェットエリアを確認

JQuery Mega Menuというウィジェットをドラッグ&ドロップすれば下準備は完了です。
ドラッグ&ドロップ

オプションの編集

オプションの編集

実際に動かせば分かるかと思いますが、各項目の簡単な説明です。

1.メニューを選択

メガメニュー化したいカスタムメニュー項目を選択します。

2.アクションのキッカケを選択

Click→親メニューをクリックするとメガメニューが展開される
Hover→親メニューへのマウスオーバーでメガメニューが展開される
よほどの理由がない限りHoverで良いと思います。

3.一列に並べる子メニューの数を選択

メニューが展開された際に、いくつの子メニューを横並びで表示するかを選ぶことが出来ます。
メニューの文字列の長さに合わせて選べばOKです。

4.配色(デザイン)の選択

自身でCSSを作成する場合はNo themeを選択、めんどくさいからテンプレート通りでいいやという方は背景色の色を選択して下さい。

5.展開・縮小時のアニメーションを選択

メニューが展開・縮小される際のアニメーションを選択できます。

6.展開・縮小時のアニメーションのスピードを選択

3段階から選べます。「アニメーションなんていらない!」という方はNo animationを選択して下さい。

7.子メニューの幅を選択

メガメニューを画面いっぱいまで広げる場合はチェックを入れて下さい。

アニメーションや背景色を変えた場合のサンプルは下記ページに用意されています。
http://www.designchemical.com/lab/demo-wordpress-jquery-mega-menu-plugin/

テンプレートにコードを追加

メガメニューを表示したい場所に下記のコードを追加します(たぶん多くの場合header.phpになると思います)。

<?php dynamic_sidebar( 'my_mega_menu' ); ?>

超簡単。10分でメガメニューの完成です。

CSSでメガメニューのデザインを変更したい場合

本サイトにはCSSの書き方が詳しく説明されているのですが、英語よくわかんない!めんどくさい!リンクの色をちょっとだけ変えたい!という方は下記の方法を試してみてください。

まずは、ウィジェット設定画面の「skin」から適当な配色を選択して下さい。
各skin毎のCSSファイルが
wp-content>plugins>jquery-mega-menu>skins
に用意されています。

自分の選んだskinと同じ色のCSS(ウィジェット編集画面でredを選んでいればred.css)をちょこっと編集するだけで、簡単にカスタマイズを行うことが出来ます。
(試していないのでわかりませんが、プラグインをアップデートすると編集分は消えてしまうかもしれません。ご注意下さい。)

CSSのディレクトリ

最期に

公式サイトにはWordPressプラグインだけでなく、通常のJQuery版も用意されていますので、WordPressサイト以外で使いたいという方ももーまんたいです。