Cách Tạo Menu Trượt

Mục lục:

Cách Tạo Menu Trượt
Cách Tạo Menu Trượt

Video: Cách Tạo Menu Trượt

Video: Cách Tạo Menu Trượt
Video: [NukeViet] Hướng dẫn tạo menu trượt ngang trái sang phải trên giao diện di động 2024, Có thể
Anonim

Một trong những khía cạnh quan trọng nhất của phát triển trang web và phần mềm là tạo menu. Một menu trượt đẹp vẫn là một tiêu chuẩn cho nhiều chủ sở hữu trang web và lập trình viên. Điều này có thể được thực hiện bằng cách sử dụng các công cụ CSS và Expression Web.

Cách tạo menu trượt
Cách tạo menu trượt

Hướng dẫn

Bước 1

Mở Web Biểu thức và đi tới Quản lý Kiểu để bắt đầu tạo menu trượt và nhấn phím Kiểu Mới. Đặt tên cho kiểu mới Selector ul li. Đảm bảo rằng tệp được tạo có phần mở rộng drop-down.css. Để tạo menu trượt, hãy chỉ định vị trí thích hợp trên màn hình. Xác định chiều rộng của từng mục menu và loại bỏ các dấu chấm không cần thiết có thể ở phía trước chúng.

Bước 2

Chạy tùy chọn Bố cục và đặt thuộc tính Hiển thị. Cung cấp cho nó một giá trị Nội tuyến thích hợp để căn chỉnh trên màn hình. Đặt thuộc tính Float thành Left và nhấn phím Áp dụng. Đặt tất cả các phần tử của danh sách thành một dòng. Để giữ cho chúng có thứ tự gọn gàng và không chồng chéo lên nhau, hãy đặt thuộc tính Chiều rộng thành Vị trí ở dạng 150 px. Đảm bảo rằng tất cả các mục trong danh sách có cùng kích thước. Loại bỏ các dấu chấm ở phía trước của mỗi phần tử bằng cách đi tới thuộc tính Danh sách và đặt Kiểu kiểu danh sách thành Không có. Nhấp vào "OK" để chấp nhận các thay đổi và có hiệu lực.

Bước 3

Điều chỉnh kiểu và kích thước phông chữ cho ul li. Vào Manage Styles và nhấp chuột phải vào ul li, chọn Modify Style. Bạn sẽ thấy menu hộp thoại đã quen thuộc. Vào Font, chọn Font-family và đặt thuộc tính này thành Helvetica, Arial, Sans-serif. Điều chỉnh kích thước phông chữ và đặt nó thành 0, 9. Đặt thuộc tính Text-biến đổi thành Chữ hoa. Trong thuộc tính Chiều cao - Vị trí, chỉ định chiều cao chính xác của các mục menu bằng cách đặt giá trị thành 30 px.

Bước 4

Lưu tệp dưới dạng menu.html khi tất cả các hành động sửa chữa được hoàn thành. Kiểm tra menu bạn vừa tạo trong các ứng dụng và trình duyệt khác nhau để xem nó có hoạt động không. Như bạn thấy, không khó để tạo một menu như vậy.

Đề xuất: