Xây dựng một DropDown menu với jQuery

[PVS]

Xây dựng một DropDown menu với jQuery

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="ct-menu">
    <div class="ctmenu-item">Dropdown 1</div>
    <div class="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à 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 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à 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ử ct-menu và 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à ctmenu-item, khi sự kiện đó xảy ra thì ẩn hiện phần tử có class ctmenu-sub bằng phương thức .slideToggle()

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

Một đoạn mã bổ sung, 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('.ctmenu-sub').css("display");

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

Toàn bộ mã như sau

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

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

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

    }
</style>

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

<div class="menu2 ct-menu">
    <div class="ctmenu-item">Dropdown 2</div>
    <div class="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('.ctmenu-item');
            itemmenu.click(function () {
                var submenuitem = containermenu.find('.ctmenu-sub');
                submenuitem.slideToggle(500);

            });

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

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



        });
    },

});


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

Chúc các bạn thành công.

Nguồn: Internet​