Amazonのメガドロップダウンメニューはこちらの記事で紹介されている通り、
Javascriptを使用することによってスムーズな操作性を実現しています。

 

今回はこの記事の最後で紹介されている、
Amazonのメガドロップダウンメニューと同様の動きを実現するプラグイン
「jQuery-menu-aim.js」の使い方を解説いたします。

プラグインは、GitHubからzipファイルをダウンロードします。

 

zipファイルには、プラグイン本体（jquery.menu-aim.js）の他にサンプルファイル（exampleフォルダ）が同梱されています。

以降ではこのサンプルファイルを元に実装方法を解説いたします。

 

他のプラグインと同様jQuery本体を読み込んだ後に、先ほどダウンロードしたプラグインのjsファイルを読み込みます。
プラグインを実行するための記述は下記の通りです。

$menu.menuAim({
   activate: activateSubmenu,
   deactivate: deactivateSubmenu
});
function activateSubmenu(row) {
＜処理(1)＞
}
function activateSubmenu(row) {
＜処理(2)＞
}
</code>

変数$menuの部分はドロップダウンメニューの親要素を指定します。
サンプルでは下記のように変数に要素を指定しています。

var $menu = $(".dropdown-menu");

指定した要素の直接の子要素（LI要素以外では動作しませんが、変更可能です。※後述）がドロップダウンメニューの各項目として扱われます。

 

----------------------------------------------------------------------------------------------
サンプルファイルのオプション
----------------------------------------------------------------------------------------------

サンプルファイルではactivateとdeactivateの2つのオプションが指定されています。 activateとdeactivateの役割は下記の通りです。

 

activate
マウス操作によってドロップダウンメニューの項目がアクティブになった際に必要な処理を記述します。
アクティブとは「jQuery-menu-aim.js」による項目選択の遅延の対象となることを意味します。

関数内では$(row)で対象となるLI要素を選択できます。

 

deactivate
マウス操作によってドロップダウンメニューの項目がアクティブでなくなった際に必要な処理を記述します。

このオプションの関数内で、サブメニューの表示の切替や、サブメニューの位置調整を行います。

関数内では$(row)で対象となるLI要素を選択できます。

次に、サンプルではactivateとdeactivateでどのような処理がされているか、見ていきましょう。

 

＜処理(1)＞
activateの処理

       function activateSubmenu(row) {
           var $row = $(row),
               submenuId = $row.data("submenuId"),
               $submenu = $("#" + submenuId),
               height = $menu.outerHeight(),
               width = $menu.outerWidth();

           // Show the submenu
           $submenu.css({
               display: "block",
               top: -1,
               left: width - 3,  // main should overlay submenu
               height: height - 4  // padding for main dropdown's arrow
           });

           // Keep the currently activated row's highlighted look
           $row.find("a").addClass("maintainHover");
       }

activate時に実行されるactivateSubmenu関数では次の処理を行なっています。

まず、HTMLに記述されているカスタムデータ属性（例：data-submenu-id="submenu-patas"）から対応するサブメニューの要素を特定しています。

               var $row = $(row),
               submenuId = $row.data("submenuId"),
               $submenu = $("#" + submenuId),

また、サブメニューの表示位置とサイズに必要となるドロップダウンメニューのサイズを取得しています。

               height = $menu.outerHeight(),
               width = $menu.outerWidth();

次にサブメニューのdisplayを切り変えて要素を表示し、表示位置の調整を行なっています。

           // Show the submenu
           $submenu.css({
               display: "block",
               top: -1,
               left: width - 3,  // main should overlay submenu
               height: height - 4  // padding for main dropdown's arrow
           });

最後に新たにアクティブになったドロップダウンメニューの項目にclassを付与しています。

           // Keep the currently activated row's highlighted look
           $row.find("a").addClass("maintainHover");

 

＜処理(2)＞
deactivateの処理

        function deactivateSubmenu(row) {
           var $row = $(row),
               submenuId = $row.data("submenuId"),
               $submenu = $("#" + submenuId);

           // Hide the submenu and remove the row's highlighted look
           $submenu.css("display", "none");
           $row.find("a").removeClass("maintainHover");
       }

deactivate時に実行されるdeactivateSubmenu関数では次の処理を行なっています。

まず、HTMLに記述されているカスタムデータ属性（例：data-submenu-id="submenu-patas"）から対応するサブメニューの要素を特定しています。

           var $row = $(row),
               submenuId = $row.data("submenuId"),
               $submenu = $("#" + submenuId);

deactivate時はシンプルで、後はサブメニューを非表示に切り替えて、
アクティブでなくなったドロップダウンメニューの項目からclassを削除しています。

           // Hide the submenu and remove the row's highlighted look
           $submenu.css("display", "none");
           $row.find("a").removeClass("maintainHover");

 

----------------------------------------------------------------------------------------------
その他ののオプション
----------------------------------------------------------------------------------------------

「jQuery-menu-aim.js」には、他にも下記のようなオプションが用意されています。

 

enter
activateと同様に記述し、マウス操作によってドロップダウンメニューの各項目が選択された際の処理を記述します。
activateとの違いは「jQuery-menu-aim.js」の動作による処理（マウス移動した際に項目が遅れて選択される処理）の遅延中にも処理を行うことです。
要するに通常のマウスオーバーのように動作します。
一方、acitvateの場合は、処理の遅延中に他の項目をマウスオーバーしても、その項目ではactivateの処理は実行されません。

 

exit
deactivateと同様に記述し、マウス操作によってドロップダウンメニューの各項目から選択が外れた際の処理を記述します。
deactivateとの違いは「jQuery-menu-aim.js」の動作による処理（マウス移動した際に項目が遅れて選択される処理）の遅延中にも処理を行うことです。
要するに通常のマウスアウトのように動作します。
一方、deacitvateの場合は、処理の遅延中はに他の項目においてマウスアウトしても、その項目ではdeactivateの処理は実行されません。

 

rowSelector（デフォルト値「"> li"」）
上記の4つのオプション（activate,deactivate,enter,exit）を発生させたい要素を、プラグインの動作の対象となる親要素から見たセレクタでを指定します。
デフォルトでは値が「"> li"」となっていますので、指定した親要素の直接の子要素に当たるLI要素が対象となります。

UL要素やOL要素以外でメニューを作成している場合は、こちらの値を変更します。

 

submenuDirection（デフォルト値「"right"」）
「jQuery-menu-aim.js」の動作による処理の遅延が発生する方向、つまりメニューから見たサブメニューが表示される方向を指定します。
"right"（右方向）の他に"left"（左方向）,"above"（上方向）,"below"（下方向）が指定できます。
サブメニューが右以外の方向に表示される場合は、こちらの値を変更します。

 

このように、Amazonのメガドロップダウンメニューは比較的簡単な記述で実装することが可能です。

さらに、プラグインで用意されているいくつかのオプションを使用することによって、
様々な場面でメニューやタブのユーザビリティを向上させることができます。