Dropdowns trong CSS là các phần của giao diện người dùng mà cho phép bạn hiển thị một danh sách các mục lựa chọn hoặc nội dung bổ sung khi người dùng tương tác với một phần tử gốc, chẳng hạn như một nút hoặc liên kết. Dropdowns thường được sử dụng để tạo menu thả xuống, danh sách lựa chọn, hoặc hiển thị nội dung liên quan bổ sung.
Dưới đây là một ví dụ cơ bản về cách tạo dropdown trong CSS:
HTML:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Dropdown Example</title>
</head>
<body>
<div class="dropdown">
<button class="dropbtn">Menu</button>
<div class="dropdown-content">
<a href="#">Item 1</a>
<a href="#">Item 2</a>
<a href="#">Item 3</a>
</div>
</div>
</body>
</html>
CSS (styles.css):
css
/* Định dạng dropdown container */
.dropdown {
position: relative;
display: inline-block;
}
/* Định dạng nút hoặc liên kết gốc */
.dropbtn {
background-color: #333;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
}
/* Định dạng nội dung dropdown */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
/* Định dạng các liên kết trong dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Hiển thị nội dung dropdown khi hover hoặc focus */
.dropdown:hover .dropdown-content {
display: block;
}
Trong ví dụ này, chúng ta tạo một dropdown đơn giản:
.dropdownlà container của dropdown..dropbtnlà nút gốc sẽ khiến dropdown hiển thị..dropdown-contentlà nội dung thả xuống chứa các mục menu..dropdown-content ađịnh dạng các mục menu trong dropdown.- Khi hover hoặc focus vào
.dropdown,.dropdown-contentsẽ hiển thị.
Lưu ý rằng ví dụ trên chỉ là một minh họa cơ bản. Trong thực tế, dropdowns thường được tùy chỉnh và phức tạp hơn, và bạn cũng có thể sử dụng JavaScript để thêm các chức năng tương tác nâng cao.
Dưới đây là một ví dụ cụ thể hơn về cách tạo một dropdown menu dọc sử dụng HTML và CSS:
HTML:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Vertical Dropdown Menu Example</title>
</head>
<body>
<div class="dropdown">
<button class="dropbtn">Menu</button>
<div class="dropdown-content">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</div>
</div>
</body>
</html>
CSS (styles.css):
css
/* Định dạng dropdown container */
.dropdown {
position: relative;
display: inline-block;
}
/* Định dạng nút gốc */
.dropbtn {
background-color: #333;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
}
/* Định dạng nội dung dropdown */
.dropdown-content {
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; /* Đặt độ ưu tiên để nằm trên các phần tử khác */
}
/* Định dạng các liên kết trong dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Hiển thị nội dung dropdown khi hover hoặc focus */
.dropdown:hover .dropdown-content {
display: block;
}
Trong ví dụ này, chúng ta tạo một dropdown menu dọc:
.dropdownlà container của dropdown..dropbtnlà nút gốc khiến dropdown hiển thị..dropdown-contentlà nội dung thả xuống chứa các mục menu..dropdown-content ađịnh dạng các mục menu trong dropdown.- Khi hover hoặc focus vào
.dropdown,.dropdown-contentsẽ hiển thị.
Với ví dụ này, bạn sẽ có một dropdown menu dọc đơn giản với các liên kết menu. Bạn có thể tùy chỉnh mã nguồn và kiểu dáng để thích nghi với yêu cầu cụ thể của trang web của bạn.