Cách để Tạo Trình đơn Thả Xuống Trong Ngôn Ngữ HTML Và CSS

Có thể bạn quan tâm

Trang đầu
Ngẫu nhiên
Duyệt các Chuyên mục
Giới thiệu về wikiHow

Đăng nhập / Đăng ký

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

Tải về bản PDF Cùng viết bởi Nhân viên của wikiHow

Tải về bản PDF X

Bài viết này có đồng tác giả là đội ngũ biên tập viên và các nhà nghiên cứu đã qua đào tạo, những người xác nhận tính chính xác và toàn diện của bài viết. Nhóm Quản lý Nội dung của wikiHow luôn cẩn trọng giám sát công việc của các biên tập viên để đảm bảo rằng mọi bài viết đều đạt tiêu chuẩn chất lượng cao. Bài viết này đã được xem 3.584 lần.

Trong bài viết này: Các bước Mẹo và cảnh báo Bài viết có liên quan Tham khảo

wikiHow 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] .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>
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] <!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]

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.

Bài viết wikiHow có liên quan

Cách đểTải Video Miễn phí từ Mọi Trang Web

Cách đểXem Lịch sử Duyệt web

Cách đểTạo một trang web đơn giản với HTML

Cách đểTìm kiếm thông tin về ai đó bằng hình ảnh

Cách đểTạo trang web đơn giản bằng Notepad

Cách đểLấy liên kết URL của hình ảnh

Cách đểChạy tập tin HTML

Xem video đã xóa trên YouTube bằng WayBack Machine

Cách đểTạo link tải MP3

Cách đểKhông bị bắt gặp khi xem phim khiêu dâm

Cách đểLàm tốt vlog đầu tiên

Cách đểCho phép chỉnh sửa tài liệu Google Doc

Cách đểTải video về từ Youtube

Cách đểXem trang cá nhân Facebook không cần đăng ký Quảng cáo

Tham khảo

↑ https://www.w3schools.com/howto/howto_css_dropdown.asp
↑ https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_dropdown_hover
↑ https://www.w3schools.com/howto/howto_js_dropdown.asp

Về bài wikiHow này

Cùng viết bởi: Nhân viên của wikiHow Người viết bài của wikiHow Bài viết này có đồng tác giả là đội ngũ biên tập viên và các nhà nghiên cứu đã qua đào tạo, những người xác nhận tính chính xác và toàn diện của bài viết. Nhóm Quản lý Nội dung của wikiHow luôn cẩn trọng giám sát công việc của các biên tập viên để đảm bảo rằng mọi bài viết đều đạt tiêu chuẩn chất lượng cao. Bài viết này đã được xem 3.584 lần. Chuyên mục: Mạng Internet Ngôn ngữ khác Tiếng Anh Tiếng Tây Ban Nha Tiếng Đức Tiếng Italy Tiếng Nga Tiếng Pháp Tiếng Hà Lan Tiếng Trung Tiếng Indonesia Tiếng Ả Rập Tiếng Thái Tiếng Hindi Tiếng Hàn Tiếng Nhật

Trang này đã được đọc 3.584 lần.

Bài viết này đã giúp ích cho bạn?

Có Không Quảng cáo Cookie cho phép wikiHow hoạt động tốt hơn. Bằng việc tiếp tục sử dụng trang web của chúng tôi, bạn đồng ý với chính sách cookie của chúng tôi.