Cách để Tạo trình đơn thả xuống trong ngôn ngữ HTML và CSS

How.com.vn hôm nay sẽ hướng dẫn bạn tạo trình đơn thả xuống trên trang web bằng cách sử dụng mã HTML và CSS. Trình đơn thả xuống sẽ hiện ra khi người truy cập di con trỏ chuột lên nút được chỉ định; tiếp theo, họ có thể nhấp vào một trong các mục để đi đến trang web của tùy chọn đó.

Các bước

Tải về bản PDF

1
Mở trình soạn thảo văn bản HTML. Bạn có thể sử dụng trình soạn thảo văn bản đơn giản (Notepad, TextEdit) hoặc nâng cao hơn (Notepad++).
- Nếu quyết định đến với Notepad++, bạn cần chọn HTML từ phần chữ "H" của trình đơn Language (Ngôn ngữ) ở đầu cửa sổ trước khi tiếp tục.
2
Nhập tiêu đề tài liệu. Đây là mã quyết định loại mã được sử dụng cho phần còn lại của tài liệu:
```
<!DOCTYPE html><html><head><style>
```
3
Tạo trình đơn thả xuống. Nhập đoạn mã sau để xác định kích thước và màu sắc của trình đơn thả xuống, nhớ thay dấu "#" bằng thông số mà bạn muốn sử dụng (số càng lớn thì trình đơn thả xuống sẽ càng to). Chúng ta cũng có thể thay giá trị màu nền "background-color" và màu sắc "color" bằng bất cứ màu (hoặc mã màu HTML) mà bạn mong muốn:^{[1]XNguồn nghiên cứu}
```
.dropbtn {    background-color: black;    color: white;    padding: #px;    font-size: #px;    border: none;}
```
4
Chỉ định rằng bạn muốn thay thế những liên kết trong trình đơn thả xuống. Vì sau đó bạn sẽ thêm liên kết vào trình đơn nên bạn có thể thay thế chúng vào trong trình đơn thả xuống bằng cách nhập mã sau:
```
.dropdown {    position: relative;    display: inline-block;}
```
5
Tạo sự xuất hiện của trình đơn thả xuống. Mã sau sẽ xác định kích thước và màu sắc của trình đơn thả xuống, bao gồm cả vị trí khi kết hợp với các phần tử khác trên trang web. Đừng quên thay dấu "#" trong phần "min-width" bằng số mà bạn muốn (ví dụ: 250) và đổi tiêu đề "background-color" (màu nền) thành màu sắc hoặc mã HTML cụ thể:
```
.dropdown-content {    display: none;    position: absolute;    background-color: lightgrey;    min-width: #px;    z-index: 1;}
```
6
Thêm chi tiết vào nội dung của trình đơn thả xuống. Mã sau sẽ chỉ định màu sắc văn bản bên trong và kích thước của nút trình đơn thả xuống. Đừng quên thay dấu "#" bằng số pixel xác định kích thước nút trình đơn:
```
.dropdown-content a {    color: black;    padding: #px #px;    text-decoration: none;    display: block;}
```
7
Chỉnh sửa sự thay đổi của con trỏ chuột khi được di vào trình đơn thả xuống. Khi bạn di con trỏ chuột vào nút trình đơn thì một vài màu sắc cần được thay đổi. Đường "background-color" sẽ phản ánh màu sắc được thay đổi khi bạn chọn mục nào đó trong trình đơn thả xuống, còn dòng "background-color" thứ hai là màu sắc mà nút trình đơn sẽ chuyển sang. Tốt nhất là cả hai màu này nên nhạt hơn so với lúc chưa được chọn:
```
.dropdown-content a:hover {background-color: white;}.dropdown:hover .dropdown-content {display: block;}.dropdown:hover .dropbtn {background-color: grey;}
```
8
Đóng phần CSS. Nhập mã sau để chỉ định rằng bạn đã xong phần CSS trong tài liệu:
```
</style></head>
```
9
Tạo tên cho nút trình đơn. Nhập mã sau nhưng nhớ thay "Name" bằng tên của nút trình đơn thả xuống (ví dụ: Menu):
```
<div class="dropdown"><button class="dropbtn">Name</button><div class="dropdown-content">
```
10
Thêm các liên kết vào trình đơn. Mỗi mục trong trình đơn thả xuống sẽ liên kết đến nội dung nào đó, có thể là một trang thuộc website hiện tại hoặc website bên ngoài. Hãy thêm lựa chọn vào trình đơn thả xuống bằng cách nhập mã sau, trong đó bạn cần thay https://www.website.com bằng địa chỉ liên kết (giữ lại dấu ngoặc đơn) và thay "Name" bằng tên liên kết.
```
<a href="https://www.website.com">Name</a><a href="https://www.website.com">Name</a><a href="https://www.website.com">Name</a>
```
11
Đóng tài liệu. Nhập các thẻ sau để đóng tài liệu và chỉ định kết thúc mã của trình đơn thả xuống:
```
</div></div></body></html>
```

How.com.vn Tiếng Việt: Step 12 Xem lại mã quy định trình đơn thả xuống.

Đoạn mã sẽ trông tương tự như sau:^{[2]XNguồn nghiên cứu}

<!DOCTYPE html><html><head><style>.dropbtn {    background-color: black;    color: white;    padding: 16px;    font-size: 16px;    border: none;}.dropdown {    position: relative;    display: inline-block;}.dropdown-content {    display: none;    position: absolute;    background-color: lightgrey;    min-width: 200px;    z-index: 1;}.dropdown-content a {    color: black;    padding: 12px 16px;    text-decoration: none;    display: block;}.dropdown-content a:hover {background-color: white;}.dropdown:hover .dropdown-content {display: block;}.dropdown:hover .dropbtn {background-color: grey;}</style></head><div class="dropdown"><button class="dropbtn">Social Media</button><div class="dropdown-content"><a href="https://www.google.com">Google</a><a href="https://www.facebook.com">Facebook</a><a href="https://www.youtube.com">YouTube</a></div></div></body></html>

Quảng cáo

Lời khuyên

Luôn rà soát lại mã trước khi đăng lên website.
Những hướng dẫn trên dành cho trình đơn thả xuống sẽ hoạt động khi bạn di con trỏ chuột lên nút trình đơn. Nếu muốn tạo trình đơn chỉ thả xuống khi được nhấp chuột vào thì bạn cần sử dụng JavaScript.^{[3]XNguồn nghiên cứu}

Cảnh báo

Màu sắc HTML khá là hạn chế khi chúng ta sử dụng thẻ như "black" hoặc "green". Bạn có thể xem thử trình tạo mã màu HTML cho phép người dùng tạo và sử dụng màu tùy chỉnh tại đây.