Cách Tạo Menu Thả Xuống Theo Chiều Dọc

Mục lục:

Cách Tạo Menu Thả Xuống Theo Chiều Dọc
Cách Tạo Menu Thả Xuống Theo Chiều Dọc

Video: Cách Tạo Menu Thả Xuống Theo Chiều Dọc

Video: Cách Tạo Menu Thả Xuống Theo Chiều Dọc
Video: [Học CSS - 19] Cách làm menu ngang dropdown cơ bản 2024, Tháng mười một
Anonim

Menu thả xuống dọc rất tiện dụng - nó tiết kiệm không gian trên trang web, đồng thời giúp dễ dàng điều hướng trang web. Cố gắng tạo menu thả xuống dựa trên CSS - Cascading Style Sheets. Nếu bạn chưa phải là chuyên gia trong việc tạo mã CSS, hãy sử dụng dịch vụ purecssmenu.com. Bạn được yêu cầu chọn một loại menu, tùy chỉnh giao diện của nó, sau đó điều chỉnh nó cho phù hợp với trang web của bạn. Bản thân dịch vụ sẽ tạo ra mã cần thiết, sau đó bạn chèn vào các tệp trên trang web của mình.

Cách tạo menu thả xuống theo chiều dọc
Cách tạo menu thả xuống theo chiều dọc

Hướng dẫn

Bước 1

Đăng ký trên trang web purecssmenu.com, nếu không bạn sẽ không thể tải xuống menu đã tạo. Nhấp vào nút Mẫu ở phía bên trái của trang. Bên dưới, bạn sẽ thấy một số cửa sổ nhỏ với các mẫu menu thả xuống, nhấp vào đó sẽ tải bản xem trước ở bên phải trong cửa sổ Xem trước. Chọn một mẫu phù hợp với trang web của bạn

Bước 2

Tùy chỉnh phông chữ và màu sắc của menu: sử dụng tab Tham số. Trong trường Phông chữ, hãy chọn phông chữ, cỡ chữ, nếu cần, gạch chân và in đậm. Trong trường Màu sắc, hãy đặt nền menu, màu phông chữ và phông chữ khi di chuột qua và màu nền khi di chuột qua

Bước 3

Mở tab Mục để quản lý các mục trong menu. Nếu bạn nhấp vào nút Xóa thùng rác, các mục mẫu sẽ được xóa và bạn có thể tạo của riêng mình. Để thực hiện việc này, hãy nhấn nút Thêm mục cộng - mục sẽ được thêm vào cuối menu. Nút Thêm mục tiếp theo được sử dụng để thêm một mục sau thời gian được chọn hiện tại. Nút Add Subitem tạo một mục menu phụ cho lựa chọn. Theo đó, để loại bỏ một mục, hãy sử dụng nút Loại bỏ Mục

Bước 4

Hãy chú ý đến trường Thông số mặt hàng ở cuối trang web. Trong dòng Văn bản, chỉ định tên của mục menu, trong dòng Liên kết - url của trang mà mục này sẽ dẫn đến. Trong dòng Mẹo, bạn có thể để lại mô tả của mục, mô tả này sẽ được hiển thị khi bạn di chuột qua liên kết. Dòng Mục tiêu được sử dụng để xác định cách mở trang mà liên kết dẫn đến. Tham số _self trên dòng này sẽ mở trang trong cùng cửa sổ trình duyệt với cửa sổ hiện tại

Bước 5

Sau khi hoàn tất thiết lập menu, hãy tải xuống - nhấp vào nút Tải xuống ở dưới cùng bên phải của trang (chức năng này có sẵn sau khi đăng ký trên trang web). Chọn một thư mục trên ổ cứng của bạn nơi tệp lưu trữ sẽ được lưu. Giải nén nó. Bạn sẽ cần sao chép mã bắt buộc từ tệp purecssmenu.html vào tệp mẫu CSS của trang web của bạn. Mở tệp purecssmenu.html bằng trình soạn thảo văn bản và sao chép mã giữa thẻ và vào mẫu CSS của trang web của bạn (tệp này có phần mở rộng.css và trông giống như tệp.css). Bây giờ, hãy dán mã vào tệp mẫu trang web (chủ đề) của bạn - mã từ purecssmenu.html giữa các nhận xét và thay vì mã menu thông thường. Để làm được điều này, bạn cần ít nhất một chút quen thuộc với lập trình. Đảm bảo dán mã vào đúng tệp và lưu.

Đề xuất: