TaiNgheTroThinh hôm nay sẽ chỉ dẫn bạn tạo trình đơn thả xuống trên trang web bằng cách 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 những mục để đi đến trang web của tùy chọn đó.
những bước
1Mở trình soạn thảo văn bản HTML. Bạn có thể 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.2Nhập tiêu đề tài liệu. Đây là mã quyết định loại mã được dùng cho phần còn lại của tài liệu:
9Tạ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): <divclass=”dropdown”><buttonclass=”dropbtn”>Name<divclass=”dropdown-content”>10Thêm những 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. <ahref=”https://www.website.com”>Name<ahref=”https://www.website.com”>Name<ahref=”https://www.website.com”>Name11Đóng tài liệu. Nhập những thẻ sau để đóng tài liệu và chỉ định kết thúc mã của trình đơn thả xuống:
12Xem lại mã quy định trình đơn thả xuống. Đoạn mã sẽ trông tương tự như sau:
<divclass=”dropdown”><buttonclass=”dropbtn”>Social Media<divclass=”dropdown-content”><ahref=”https://www.google.com”>Google<ahref=”https://www.facebook.com”>Facebook<ahref=”https://www.youtube.com”>YouTube
Lời khuyên
Luôn rà soát lại mã trước khi đăng lên website.Những chỉ 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 dùng JavaScript.
Cảnh báo
Màu sắc HTML khá là hạn chế khi chúng ta 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à dùng màu tùy chỉnh tại đây.
