Hướng dẫn tạo DropDown menu với jQuery

Tạo Drop-Down

Ví dụ hướng dẫn cơ bản tạo ra một Menu dạng Drop-Down, chức năng cơ bản là khi người dùng bấm vào mục gốc của Menu, thì menu sẽ đổ xuống danh sách các mục chọn. Trong trường hợp danh sách đang đổ mà người dùng bấm bên ngoài Menu đó, thì menu phải thu danh sách lại. Hãy chạy thử kết quả như sau:

Thiết kế cấu trúc HTML

Ta xây dựng cấu trúc HTML với dạng như sau:

<div class="xt-ct-menu">
    <div class="xtlab-ctmenu-item">Dropdown 1</div>
    <div class="xtlab-ctmenu-sub">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
    </div>
</div>

• Mọi thành phần menu chứa trong phần tử HTML gốc với class là xt-ct-menu, chú ý thuộc tính CSS của phần tử này là position: relative; display: inline-block;
• Phần tử thứ 2 là thành phần hiện thị để người dùng bấm vào đó menu đổ xuống, thiết kế phần tử này có class tên xtlab-ctmenu-item
• Cuối cùng là phần tử chứa các phần tử con đổ xuống thiết kế nó có class tên là xtlab-ctmenu-sub, trong nó chứa các thẻ <a> là các mục menu

Mã CSS

Toàn bộ mã CSS xem ở phần dưới, cơ bản chú ý về thuộc tính position, display của phần tử xt-ct-menu và xtlab-ctmenu-sub với thuộc tính display: none; position: absolute;

Mã JavaScript với jQuery

Sử dụng cách thêm phương thức vào thư viện jQuery, để xây dựng một phương thức có tên setMenu(), để thiết lập cấu trúc HTML trên hoạt động như một DropDown menu.

Phần quan trọng nhất của đoạn mã là bắt sự kiện click khi bấm vào phần tử có class là xtlab-ctmenu-item, khi sự kiện đó xảy ra thì ẩn hiện phần tử có class xtlab-ctmenu-sub bằng phương thức .slideToggle()

var itemmenu = containermenu.find('.xtlab-ctmenu-item');
itemmenu.click(function () {
    var submenuitem = containermenu.find('.xtlab-ctmenu-sub');
    submenuitem.slideToggle(500);
});

Một đoạn mã bổ xung, là bắt sự kiện click trên toàn bộ trang, nếu bấm chuột bên ngoài Menu mà menu đang mở thì ẩn sub menu

$(document).click(function (e) {
    if (!containermenu.is(e.target) &&
        containermenu.has(e.target).length === 0) {
        //Đúng là bấm chuột ngoài menu
         var isopened =
            containermenu.find('.xtlab-ctmenu-sub').css("display");

        //Ẩn menu đang mở
         if (isopened == 'block') {
             containermenu.find('.xtlab-ctmenu-sub').slideToggle(500);
         }
    }
});

Kết quả DEMO

Toàn bộ mã như sau

<style>
    .xt-ct-menu {
        position: relative;
        display: inline-block;
    }

    .xtlab-ctmenu-item {
        background-color: #4CAF50;
        color: white;
        padding: 16px;
        font-size: 16px;
        border: none;
        cursor: pointer;
    }
    .xtlab-ctmenu-item:hover, .xtlab-ctmenu-item:focus {
        background-color: #9c3328;
    }

    .xtlab-ctmenu-sub {
        display: none;
        position: absolute;
        background-color: #3e8e41;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    }
    .xtlab-ctmenu-sub a {
        color: white;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }
    .xtlab-ctmenu-sub a:hover {
        background-color: orange;
        border: none;

    }
</style>

<div class="menu1 xt-ct-menu">
    <div class="xtlab-ctmenu-item">Dropdown 1</div>
    <div class="xtlab-ctmenu-sub">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
    </div>
</div>

<div class="menu2 xt-ct-menu">
    <div class="xtlab-ctmenu-item">Dropdown 2</div>
    <div class="xtlab-ctmenu-sub">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
    </div>
</div>


<script>
jQuery.fn.extend({
    setMenu:function () {
        return this.each(function() {
            var containermenu = $(this);

            var itemmenu = containermenu.find('.xtlab-ctmenu-item');
            itemmenu.click(function () {
                var submenuitem = containermenu.find('.xtlab-ctmenu-sub');
                submenuitem.slideToggle(500);

            });

            $(document).click(function (e) {
                if (!containermenu.is(e.target) &&
                    containermenu.has(e.target).length === 0) {
                     var isopened =
                        containermenu.find('.xtlab-ctmenu-sub').css("display");

                     if (isopened == 'block') {
                         containermenu.find('.xtlab-ctmenu-sub').slideToggle(500);
                     }
                }
            });



        });
    },

});


$('.xt-ct-menu').setMenu();
</script>