jQuery-menu-aim.jsの使い方とカーソルアウトで閉じるオプション

jQuery-menu-aim.jsはamazonのような操作性の良いメガメニューを簡単に実装できるjQueryライブラリです。

何がどう使いやすいかはこちらに詳しく書いてあります。

ざっくり言うと、子のメニューを選びにカーソルを動かした時に多少ずれても大丈夫な作りになっているという感じですね。

jQuery-menu-aim.jsの使い方
まずはjQuery本体とjQuery-menu-aim.jsを読み込み、

sample.html

<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.menu-aim.js"></script>

次に着火スクリプトと、アクションの記述。

jQuery-menu-aim.jsは、メニューを使いやすくするライブラリであって、メガメニューを開いたり、閉じたりするするのは、メニューの状態に合わせた記述が必要です。

sample.js

$("#menu").menuAim({ // #menuの部分がメガメニュー全体の親要素
    activate: activateMenu,  // メニューにカーソルがホバーした時のアクション
    deactivate: deactivateMenu,  // メニューからカーソルが外れた時のアクション
    exitMenu: exitMenu // trueを返すとメニュー全体からカーソルが外れた時にメガメニューを閉じる。デフォルトは閉じずに最後に合っていたメニューが開いたままになっている
 });

    //  メニューにカーソルがホバーした時のアクションの中身
    function activateMenu(row) {
        var $row = $(row),  // カーソルの合ったラベルのjQueryオブジェクトを取得
            menuId = $row.data('menuId'), // ラベルのデータ属性を取得
            $menu = $('#' + menuId); // ラベルと紐づいた表示したいメニューのIDを取得
        $menu.css({
            display: 'block', // メニューを表示
        });
        $row.addClass('is-hover'); // 表示以外にもスタイリングしたいのでクラス付与
    }

    // メニューからカーソルが外れた時のアクション
    function deactivateMenu(row) {
        var $row = $(row),  // カーソルの合ったラベルのjQueryオブジェクトを取得
            menuId = $row.data('menuId'), // ラベルのデータ属性を取得
            $menu = $('#' + menuId); // ラベルと紐づいた表示したいメニューのIDを取得
        $menu.css('display', 'none'); // メニューを非表示
        $row.removeClass('is-hover'); // ホバークラス削除
    }

    // trueを返して、メニュー全体からマウスが離れた時にメニューを閉じるように設定
    function exitMenu(row) {
        return true;
    }

exitmenuの挙動がデフォルトだとメニューが閉じない設定になっているのが詰まりポイントでした。

日本語のブログだとオプションの設定まで書いていなくて設定するのに時間がかかってしまった。

やっぱり公式のリファレンスを読むのは大事だなって改めて思いました。