Nếu như bạn tạo một menu hay navigation chứa quá nhiều đường dẫn điều hướng thì nó sẽ gây ra cảm giác khó đọc cho người dùng cũng như không hiển thị tốt trên các màn hình thiết bị nhỏ. Do đó dropdown ra đời để giải quyết vấn đề trên. Nhiệm vụ chính của nó là tạo cấu trúc mạch lạc rõ ràng giúp người dùng có cái nhìn tổng quan hơn cũng như gom các đường dẫn con vào một mục chính để có thể giảm diện tích sử dụng trong trang web. Để hiểu rõ hơn bây giờ chúng ta hãy cùng nhau đi vào tìm hiểu nhé! Cách Tạo Dropdown Bằng HTML CSSTrong phần này chúng ta sẽ tận dụng thuộc tính :hover trong CSS để tạo dropdown cho trang web nhé.Bước đầu tiên là bạn cần tạo cấu trúc HTML cho conponent này thông qua đoạn code dưới đây nha:
Bước đầu tiên là bạn cần tạo cấu trúc HTML cho conponent này thông qua đoạn code dưới đây nha: <div class="dropdown">
<button class="nut_dropdown">Dropdown</button>
<div class="noidung_dropdown">
<a href="#">Đường Dẫn 1</a>
<a href="#">Đường Dẫn 2</a>
<a href="#">Đường Dẫn 3</a>
</div>
</div>
Tiếp Theo chúng ta sẽ đi vào thiết lập style cho các thẻ /* Nút Dropdown*/
.nut_dropdown {
background-color: #0080ff;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
/* Thiết lập vị trí cho thẻ div với class dropdown*/
.dropdown {
position: relative;
display: inline-block;
}
/* Nội dung Dropdown */
.noidung_dropdown {
/*Ẩn nội dung các đường dẫn*/
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Thiết kế style cho các đường dẫn trong Dropdown */
.noidung_dropdown a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
0, /* Nút Dropdown*/
.nut_dropdown {
background-color: #0080ff;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
/* Thiết lập vị trí cho thẻ div với class dropdown*/
.dropdown {
position: relative;
display: inline-block;
}
/* Nội dung Dropdown */
.noidung_dropdown {
/*Ẩn nội dung các đường dẫn*/
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Thiết kế style cho các đường dẫn trong Dropdown */
.noidung_dropdown a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
1 và /* Nút Dropdown*/
.nut_dropdown {
background-color: #0080ff;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
/* Thiết lập vị trí cho thẻ div với class dropdown*/
.dropdown {
position: relative;
display: inline-block;
}
/* Nội dung Dropdown */
.noidung_dropdown {
/*Ẩn nội dung các đường dẫn*/
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Thiết kế style cho các đường dẫn trong Dropdown */
.noidung_dropdown a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
2 trong cấu trúc HTML trên bằng thuộc tính CSS nhé:
/* Nút Dropdown*/
.nut_dropdown {
background-color: #0080ff;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
/* Thiết lập vị trí cho thẻ div với class dropdown*/
.dropdown {
position: relative;
display: inline-block;
}
/* Nội dung Dropdown */
.noidung_dropdown {
/*Ẩn nội dung các đường dẫn*/
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Thiết kế style cho các đường dẫn trong Dropdown */
.noidung_dropdown a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
Sau khi đã thiết lập xong thì chúng ta sẽ đi vào tạo hiệu ứng hiển thị nội dung thông qua thuộc tính /* Nút Dropdown*/
.nut_dropdown {
background-color: #0080ff;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
/* Thiết lập vị trí cho thẻ div với class dropdown*/
.dropdown {
position: relative;
display: inline-block;
}
/* Nội dung Dropdown */
.noidung_dropdown {
/*Ẩn nội dung các đường dẫn*/
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Thiết kế style cho các đường dẫn trong Dropdown */
.noidung_dropdown a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
3 trong CSS thông qua đoạn code dưới đây nhé:/* thay đổi màu background khi hover vào đường dẫn */
.noidung_dropdown a:hover {background-color: #ddd;}
/* hiển thị nội dung dropdown khi hover */
.dropdown:hover .noidung_dropdown {display: block;}
/* Thay đổi màu background cho nút khi được hover */
.dropdown:hover .nut_dropdown {background-color: #00bfff;}
Và kết quả cuối cùng sẽ như đoạn mã bên dưới nhé: See the Pen Cách Tạo Dropdown Bằng HTML CSS by haycuoilennao19 (@haycuoilennao19) on CodePen. Cách Tạo Dropdown Bằng HTML CSS JavascriptMột điểm bất lợi của dropdown sử dụng hiệu ứng hover là nội dung của nó sẽ tự động ẩn đi khi người dùng di chuyển chuột ra ngoài nút dropdown. Do đó chúng ta sẽ sử dụng thêm Javascript để giúp người dùng có thể nhấn(click) vào dropdown để xem nội dung mà không sợ bị tự động ẩn nội dung bằng lệnh /* Nút Dropdown*/
.nut_dropdown {
background-color: #0080ff;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
/* Thiết lập vị trí cho thẻ div với class dropdown*/
.dropdown {
position: relative;
display: inline-block;
}
/* Nội dung Dropdown */
.noidung_dropdown {
/*Ẩn nội dung các đường dẫn*/
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Thiết kế style cho các đường dẫn trong Dropdown */
.noidung_dropdown a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
4 (chuyển đổi class cho các phần tử trong trang web).Đầu tiên chúng ta sẽ đi vào tạo cấu trúc HTML nhé: <div class="dropdown">
<button onclick="hamDropdown()" class="nut_dropdown">Dropdown</button>
<div class="noidung_dropdown">
<a href="#">Đường Dẫn 1</a>
<a href="#">Đường Dẫn 2</a>
<a href="#">Đường Dẫn 3</a>
</div>
</div>
/* Nút Dropdown*/
.nut_dropdown {
background-color: #0080ff;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
/* Thiết lập vị trí cho thẻ div với class dropdown*/
.dropdown {
position: relative;
display: inline-block;
}
/* Nội dung Dropdown */
.noidung_dropdown {
/*Ẩn nội dung các đường dẫn*/
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Thiết kế style cho các đường dẫn trong Dropdown */
.noidung_dropdown a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
5 có nhiệm vụ sẽ gọi hàm /* Nút Dropdown*/
.nut_dropdown {
background-color: #0080ff;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
/* Thiết lập vị trí cho thẻ div với class dropdown*/
.dropdown {
position: relative;
display: inline-block;
}
/* Nội dung Dropdown */
.noidung_dropdown {
/*Ẩn nội dung các đường dẫn*/
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Thiết kế style cho các đường dẫn trong Dropdown */
.noidung_dropdown a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
6 trong Javascript khi người click vào nút chứa sự kiện. Bây giờ chúng ta sẽ đi vào thiết lập style cho các thành phần HTML bằng CSS nhé:/* Nút Dropdown*/
.nut_dropdown {
background-color: #0080ff;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
/* Thiết lập vị trí cho thẻ div với class dropdown*/
.dropdown {
position: relative;
display: inline-block;
}
/* Nội dung Dropdown */
.noidung_dropdown {
/*Ẩn nội dụng các đường dẫn*/
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Thiết kế style cho các đường dẫn tronng Dropdown */
.noidung_dropdown a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.hienThi{
display:block;
}
Class /* Nút Dropdown*/
.nut_dropdown {
background-color: #0080ff;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
/* Thiết lập vị trí cho thẻ div với class dropdown*/
.dropdown {
position: relative;
display: inline-block;
}
/* Nội dung Dropdown */
.noidung_dropdown {
/*Ẩn nội dung các đường dẫn*/
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Thiết kế style cho các đường dẫn trong Dropdown */
.noidung_dropdown a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
7 sẽ giúp bạn hiển thị nội dung khi người dùng nhấn vào nút dropdown bằng cách chuyển chế độ từ /* Nút Dropdown*/
.nut_dropdown {
background-color: #0080ff;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
/* Thiết lập vị trí cho thẻ div với class dropdown*/
.dropdown {
position: relative;
display: inline-block;
}
/* Nội dung Dropdown */
.noidung_dropdown {
/*Ẩn nội dung các đường dẫn*/
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Thiết kế style cho các đường dẫn trong Dropdown */
.noidung_dropdown a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
8 sang /* Nút Dropdown*/
.nut_dropdown {
background-color: #0080ff;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
/* Thiết lập vị trí cho thẻ div với class dropdown*/
.dropdown {
position: relative;
display: inline-block;
}
/* Nội dung Dropdown */
.noidung_dropdown {
/*Ẩn nội dung các đường dẫn*/
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Thiết kế style cho các đường dẫn trong Dropdown */
.noidung_dropdown a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
9 cho nội dung dropdown. Và để hiểu rõ hơn bạn xem cách chúng ta triển khai trên Javascript nhé: function hamDropdown() {
document.querySelector(".noidung_dropdown").classList.toggle("hienThi");
}
Và kết quả cuối cùng bạn xem ở bên dưới nhé: See the Pen Cách Tạo Dropdown Bằng HTML CSS Javascript by haycuoilennao19 (@haycuoilennao19) on CodePen. Ở đây mình sẽ bổ sung thêm một đoạn mã giúp bạn có thể tự động đóng nội dung của dropdown khi người click chuột ở ngoài màn hình bằng thuộc tính /* thay đổi màu background khi hover vào đường dẫn */
.noidung_dropdown a:hover {background-color: #ddd;}
/* hiển thị nội dung dropdown khi hover */
.dropdown:hover .noidung_dropdown {display: block;}
/* Thay đổi màu background cho nút khi được hover */
.dropdown:hover .nut_dropdown {background-color: #00bfff;}
0. Để hiểu rõ hơn bạn xem đoạn code sau nhé: window.onclick = function(e) {
if (!e.target.matches('.nut_dropdown')) {
var noiDungDropdown = document.querySelector(".noidung_dropdown");
if (noiDungDropdown.classList.contains('hienThi')) {
noiDungDropdown.classList.remove('hienThi');
}
}
}
Và kết quả ở dưới đây nhé: See the Pen Cách Tạo Dropdown Bằng HTML CSS Javascript2 by haycuoilennao19 (@haycuoilennao19) on CodePen. Kết Hợp Dropdown Với NavigationPhần này chúng ta sẽ cùng nhau đi vào tìm hiểu cách kết hợp dropdown vào trong navigation của trang web nhé!Đầu tiên chúng ta sẽ đi vào tạo cấu trúc HTML cho navigation:
Đầu tiên chúng ta sẽ đi vào tạo cấu trúc HTML cho navigation: <div class="navbar">
<a href="#trangchu">Trang Chủ</a>
<a href="#gioithieu">Giới Thiệu</a>
<div class="dropdown">
<button class="nut_dropdown">
Dropdown <i class="fa fa-caret-down"></i>
</button>
<div class="noidung_dropdown">
<a href="#">Đường Dẫn 1</a>
<a href="#">Đường Dẫn 2</a>
<a href="#">Đường Dẫn 3</a>
</div>
</div>
</div>
Bây giờ chúng ta sẽ thiết lập style CSS cho các phần tử HTML cũng như dropdown nhé: /* thanh navigation */
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial;
}
/* đường dẫn bên trong navigation */
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* thành phần dropdown */
.dropdown {
float: left;
overflow: hidden;
}
/* nút dropdown */
.dropdown .nut_dropdown {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
/* thêm màu background khi nút dropdown khi hover */
.navbar a:hover, .dropdown:hover .nut_dropdown {
background-color: #0080ff;
}
/* Ẩn nội dung dropdown*/
.noidung_dropdown {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* thiết lập style cho đường dẫn bên trong dropdown */
.noidung_dropdown a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* chọn background cho đường dẫn bên trong dropdown khi hover*/
.noidung_dropdown a:hover {
background-color: #ddd;
}
/* Hiển thị nội dung dropdown khi được hover */
.dropdown:hover .noidung_dropdown {
display: block;
}
Và kết quả bạn xem ở bên dưới nhé: See the Pen dropdown với navigation by haycuoilennao19 (@haycuoilennao19) on CodePen. Các Ví Dụ Dropdown Khác Cho WebsitePhần dưới đây chúng ta sẽ cùng nhau đi vào tìm hiểu các ví dụ dropdown khác nhé! Thiết Kế Jquery DropdownKết quả bạn xem bên dưới nhé! See the Pen Smooth Accordion Dropdown Menu by fainder (@fainder) on CodePen. Nguồn Kết quả bạn xem bên dưới nhé! See the Pen Smooth Accordion Dropdown Menu by fainder (@fainder) on CodePen. Nguồn Kết quả bạn xem bên dưới nhé! See the Pen Smooth Accordion Dropdown Menu by fainder (@fainder) on CodePen. Nguồn Kết quả bạn xem bên dưới nhé! See the Pen Smooth Accordion Dropdown Menu by fainder (@fainder) on CodePen. Nguồn Kết quả bạn xem bên dưới nhé! See the Pen Smooth Accordion Dropdown Menu by fainder (@fainder) on CodePen. Nguồn Kết quả bạn xem bên dưới nhé! See the Pen Smooth Accordion Dropdown Menu by fainder (@fainder) on CodePen. Nguồn Kết quả bạn xem bên dưới nhé! See the Pen Smooth Accordion Dropdown Menu by fainder (@fainder) on CodePen. Nguồn Kết quả bạn xem bên dưới nhé! See the Pen Smooth Accordion Dropdown Menu by fainder (@fainder) on CodePen. Nguồn Kết quả bạn xem bên dưới nhé! See the Pen Smooth Accordion Dropdown Menu by fainder (@fainder) on CodePen. Nguồn
Kết quả bạn xem bên dưới nhé! See the Pen Smooth Accordion Dropdown Menu by fainder (@fainder) on CodePen. Nguồn
Kết Quả bạn xem bên dưới NHé! Xem Pen 3D Nestration của Nhà giả kim quỷ dữ (@Devilishalchemist) trên Codepen. Nguồn TạO Nút thả xuống JQueryKết Quả bạn xem bên dưới NHé! Xem menu thả xuống tương tác bút của Josh Boothman (@josh_boothman) trên Codepen. Nguồn TạO Nút thả xuống JQueryKết Quả bạn xem bên dưới NHé! Xem menu thả xuống tương tác bút của Josh Boothman (@josh_boothman) trên Codepen. Nguồn TạO Nút thả xuống JQueryKết Quả bạn xem bên dưới NHé! Xem menu thả xuống tương tác bút của Josh Boothman (@josh_boothman) trên Codepen. Nguồn TạO Nút thả xuống JQueryKết Quả bạn xem bên dưới NHé! Xem menu thả xuống tương tác bút của Josh Boothman (@josh_boothman) trên Codepen. Nguồn TạO Nút thả xuống JQueryKết Quả bạn xem bên dưới NHé! Xem menu thả xuống tương tác bút của Josh Boothman (@josh_boothman) trên Codepen. Nguồn TạO Nút thả xuống JQueryKết Quả bạn xem bên dưới NHé! Xem menu thả xuống tương tác bút của Josh Boothman (@josh_boothman) trên Codepen. Nguồn TạO Nút thả xuống JQueryKết Quả bạn xem bên dưới NHé! Xem menu thả xuống tương tác bút của Josh Boothman (@josh_boothman) trên Codepen. Nguồn TạO Nút thả xuống JQueryKết Quả bạn xem bên dưới NHé! Xem menu thả xuống tương tác bút của Josh Boothman (@josh_boothman) trên Codepen. Nguồn TạO Nút thả xuống JQueryKết Quả bạn xem bên dưới NHé! Xem menu thả xuống tương tác bút của Josh Boothman (@josh_boothman) trên Codepen. Nguồn TạO Nút thả xuống JQueryKết Quả bạn xem bên dưới NHé! Xem menu thả xuống tương tác bút của Josh Boothman (@josh_boothman) trên Codepen. Nguồn TạO Nút thả xuống JQueryKết Quả bạn xem bên dưới NHé! Xem menu thả xuống tương tác bút của Josh Boothman (@josh_boothman) trên Codepen. Nguồn TạO Nút thả xuống JQueryKết Quả bạn xem bên dưới NHé! Xem menu thả xuống tương tác bút của Josh Boothman (@josh_boothman) trên Codepen. Nguồn TạO Nút thả xuống JQueryKết Quả bạn xem bên dưới NHé! Xem menu thả xuống tương tác bút của Josh Boothman (@josh_boothman) trên Codepen. Nguồn TạO Nút thả xuống JQueryKết Quả bạn xem bên dưới NHé! Xem menu thả xuống tương tác bút của Josh Boothman (@josh_boothman) trên Codepen. Nguồn TạO Nút thả xuống JQueryKết Quả bạn xem bên dưới NHé! Xem menu thả xuống tương tác bút của Josh Boothman (@josh_boothman) trên Codepen. Nguồn TạO Nút thả xuống JQueryKết Quả bạn xem bên dưới NHé! Xem menu thả xuống tương tác bút của Josh Boothman (@josh_boothman) trên Codepen. Nguồn TạO Nút thả xuống JQueryKết Quả bạn xem bên dưới NHé! Xem menu thả xuống tương tác bút của Josh Boothman (@josh_boothman) trên Codepen. Nguồn TạO Nút thả xuống JQueryKết Quả bạn xem bên dưới NHé! Xem menu thả xuống tương tác bút của Josh Boothman (@josh_boothman) trên Codepen. Nguồn TạO Nút thả xuống JQueryKết Quả bạn xem bên dưới NHé! Xem menu thả xuống tương tác bút của Josh Boothman (@josh_boothman) trên Codepen. Nguồn TạO Nút thả xuống JQueryKết Quả bạn xem bên dưới NHé! Xem menu thả xuống tương tác bút của Josh Boothman (@josh_boothman) trên Codepen. Nguồn TạO Nút thả xuống JQueryKết Quả bạn xem bên dưới NHé! Xem menu thả xuống tương tác bút của Josh Boothman (@josh_boothman) trên Codepen. Nguồn TạO Nút thả xuống JQueryKết Quả bạn xem bên dưới NHé! Xem menu thả xuống tương tác bút của Josh Boothman (@josh_boothman) trên Codepen. Nguồn TạO Nút thả xuống JQueryKết Quả bạn xem bên dưới NHé! Xem menu thả xuống tương tác bút của Josh Boothman (@josh_boothman) trên Codepen. Nguồn TạO Nút thả xuống JQueryKết Quả bạn xem bên dưới NHé! Xem menu thả xuống tương tác bút của Josh Boothman (@josh_boothman) trên Codepen. Nguồn TạO Nút thả xuống JQueryKết Quả bạn xem bên dưới NHé! Xem menu thả xuống tương tác bút của Josh Boothman (@josh_boothman) trên Codepen. Nguồn TạO Nút thả xuống JQueryKết Quả bạn xem bên dưới NHé! Xem menu thả xuống tương tác bút của Josh Boothman (@josh_boothman) trên Codepen. Nguồn TạO Nút thả xuống JQueryKết Quả bạn xem bên dưới NHé! Xem menu thả xuống tương tác bút của Josh Boothman (@josh_boothman) trên Codepen. Nguồn TạO Nút thả xuống JQueryKết Quả bạn xem bên dưới NHé! Xem menu thả xuống tương tác bút của Josh Boothman (@josh_boothman) trên Codepen. Nguồn TạO Nút thả xuống JQueryKết Quả bạn xem bên dưới NHé! Xem menu thả xuống tương tác bút của Josh Boothman (@josh_boothman) trên Codepen. Nguồn TạO Nút thả xuống JQueryKết Quả bạn xem bên dưới NHé! Xem menu thả xuống tương tác bút của Josh Boothman (@josh_boothman) trên Codepen. Nguồn TạO Nút thả xuống JQueryKết Quả bạn xem bên dưới NHé! Xem menu thả xuống tương tác bút của Josh Boothman (@josh_boothman) trên Codepen. Nguồn TạO Nút thả xuống JQueryKết Quả bạn xem bên dưới NHé! Xem menu thả xuống tương tác bút của Josh Boothman (@josh_boothman) trên Codepen. Nguồn Vue Dropdown
Kết quả bạn xem bên dưới nhé! See the Pen Vue Dropdown by Jorge Nieto (@jnieto) on CodePen. Nguồn Vuejs Tailwind Animated DropdownKết quả bạn xem bên dưới nhé! See the Pen Vue Dropdown by Jorge Nieto (@jnieto) on CodePen. Nguồn Vuejs Tailwind Animated Dropdown
Cách Tạo Dropdown See the Pen Vuejs + Tailwind animated dropdown by Djordje (@dzoni404) on CodePen.
Top 10 Khoá Học Lập Trình Web Trên Udemy Nếu bạn muốn tham khảo cách tạo dropdown thì truy cập đường dẫn bên dưới nhé.Cách Tạo DropdownNếu bạn muốn tham khảo khoá học Udemy tốt nhất dành cho lập trình viên thì truy cập đường dẫn bên dưới nhé.Top 10 Khoá Học Lập Trình Web Trên Udemy | 
