- Tham gia
- 28/02/2015
- Bài viết
- 17,015
- Được Like
- 12,735
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:
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()
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
Toàn bộ mã như sau
Chúc các bạn thành công.
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:
Mã:
<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
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()
Mã:
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
Mã:
$(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
Mã:
<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
Bài viết liên quan
Bài viết mới