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

  1. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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ìm xem Ai đã Chặn bạn trên Facebook

Cách để

Tìm kiếm bằng Hình ảnh trên Google

Cách để

Khôi phục tài khoản Facebook bị vô hiệu hóa

Cách để

Bỏ chặn Ai đó trên Facebook

Cách để

Biết nếu ai đó chặn bạn trên Facebook Messenger

Cách để

Khắc phục lỗi không thể truy cập vào một trang web

Cách để

Kết nối mạng cho máy tính thông qua điện thoại di động

Cách để

Trò chuyện trên Tinder

Cách để

Tải Video Miễn phí từ Mọi Trang Web

Cách để

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

Cách để

Sao chép và dán nội dung trên Facebook

Cách để

Đặt tên kênh YouTube hay

Cách để

Đặt ảnh về chế độ riêng tư trên Facebook

Cách để

Chèn nhạc vào hình ảnh trên Instagram
Quảng cáo

Về bài wikiHow này

Nhân viên của wikiHow
Cùng viết bởi
Biên tập viên 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.
Chuyên mục: Mạng Internet
Trang này đã được đọc 264 lần.

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

Quảng cáo