【jQuery】amazonのようなドロップダウンメニューが実装できるjQuery-menu-aim【サイト構築】

amazonのダイナミックなカテゴリメニューが実装できるjQueryプラグイン
jQuery-menu-aimを紹介します。

どんなの?

これは実際に見た方が早いかと。

ちなみにamazonのドロップダウンはこれ

amazon

そしてjQuery-menu-aimのドロップダウンがこちらです。

デモへ

実装方法

まずはHTMLのマークアップから

[html]

…..省略

[/html]

css

[css]
.popover {
width: 400px;
-webkit-border-top-left-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
overflow: hidden;
}

    .popover-content {
        text-align: center;
    }

    .popover-content img {
        height: 212px;
        max-width: 250px;
    }

    .dropdown-menu > li > a:hover {
        background-image: none;
        color: white;
        background-color: rgb(0, 129, 194);
        background-color: rgba(0, 129, 194, 0.5);
    }

    .dropdown-menu > li > a.maintainHover {
        color: white;
        background-color: #0081C2;
    }

[/css]

javascript

[javascript]
//ドロップダウンの親要素を指定(ul.dropdown-menu)
var $menu = $(“.dropdown-menu”);
$menu.menuAim({
activate: activateSubmenu,
deactivate: deactivateSubmenu
});
//ホバー時の処理
function activateSubmenu(row) {
var $row = $(row),
submenuId = $row.data(“submenuId”),
$submenu = $(“#” + submenuId),
offset = $menu.offset(),
height = $menu.outerHeight(),
width = $menu.outerWidth();

        $submenu.css({
            display: "block",
            top: offset.top,
            left: offset.left + width - 5, 
            height: height - 4 
        });


        $row.find("a").addClass("maintainHover");
    }
    //オフの処理
    function deactivateSubmenu(row) {
        var $row = $(row),
            submenuId = $row.data("submenuId"),
            $submenu = $("#" + submenuId);


        $submenu.css("display", "none");
        $row.find("a").removeClass("maintainHover");
    }

    $(document).click(function() {
        $(".popover").css("display", "none");
    });

[/javascript]

結構書く量多いですね。


元のURLはこちらです。
https://github.com/kamens/jQuery-menu-aim

github……楽しい情報が満載です。

1shiharaT
1shiharaT
本名 : 石原隆志

2013年からWeb業界に身を置き、GrowGroup株式会社でWordPressやEC-CUBEなどのCMSを中心にWeb制作をやってます。
本名 : 石原隆志 2013年からWeb業界に身を置き、GrowGroup株式会社でWordPressやEC-CUBEなどのCMSを中心にWeb制作をやってます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です