Công Nghệ
Phương pháp Tạo trình đơn thả xuống trong ngôn ngữ HTML và CSS
Th7
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: <!DOCTYPE html><html><head><style>3Tạ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 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:.dropbtn{background-color:black;color:white;padding:#px;font-size:#px;border:none;}4Chỉ đị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;}5Tạ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 những 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;}6Thê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-contenta{color:black;padding:#px#px;text-decoration:none;display:block;}7Chỉ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-contenta: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>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</button><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</a><ahref=”https://www.website.com”>Name</a><ahref=”https://www.website.com”>Name</a>11Đó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: </div></div></body></html>12Xem lại mã quy định trình đơn thả xuống. Đoạn mã sẽ trông tương tự như sau:<!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-contenta{color:black;padding:12px16px;text-decoration:none;display:block;}.dropdown-contenta:hover{background-color:white;}.dropdown:hover.dropdown-content{display:block;}.dropdown:hover.dropbtn{background-color:grey;}</style></head><divclass=”dropdown”><buttonclass=”dropbtn”>Social Media</button><divclass=”dropdown-content”><ahref=”https://www.google.com”>Google</a><ahref=”https://www.facebook.com”>Facebook</a><ahref=”https://www.youtube.com”>YouTube</a></div></div></body></html>
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.
