Tạo menu có lẽ là một trong những điểm chính trong quá trình phát triển các trang web và chương trình. Ngoài ra, một sự xây dựng và thiết kế hợp lý của một menu như vậy sẽ là bộ mặt của một trang web hoặc bất kỳ chương trình nào. Ví dụ, chúng ta hãy lấy Microsoft và hệ điều hành Windows 7. Sau khi phát hành Windows 7, Microsoft đã phải nghe rất nhiều lời chỉ trích không có thiện cảm với bản thân. Đã có rất nhiều lời chỉ trích, nhưng hầu hết các mục menu đều được định vị không thuận tiện. Hãy đọc kỹ hướng dẫn này về cách tạo menu thả xuống theo chiều ngang với CSS và Expression Web. Kiểu thẻ sẽ thay đổi để tạo menu
Hướng dẫn
Bước 1
Đi tới Quản lý kiểu và sau đó nhấp vào nút Kiểu mới. Đặt tên Selector ul li cho kiểu mới bạn vừa tạo. Ngoài ra, hãy nhớ đảm bảo rằng kiểu mới phải được xác định trong tệp drop-down.css.
Bước 2
Để kéo dài menu ngang, bạn cần cho các mục menu biết rằng menu sẽ nằm ngang. Tiếp theo, bạn cần xác định chiều rộng của từng mục menu và loại bỏ tất cả các dấu chấm không cần thiết ở phía trước của tất cả các mục trong danh sách.
Bước 3
Để căn chỉnh theo chiều ngang, hãy chuyển đến Bố cục và đặt thuộc tính hiển thị thành nội tuyến. Đặt thuộc tính float sang trái. Nhấp vào nút Áp dụng. Tất cả các mục danh sách phải được đặt trên một dòng. Để chúng không chồng lên nhau, bạn cần làm như sau: đặt giá trị Vị trí của thuộc tính chiều rộng là 150px. Bây giờ hãy kiểm tra nó ra. Tất cả các phần tử của danh sách phải có cùng kích thước.
Bước 4
Bây giờ chúng ta cần cố gắng loại bỏ các dấu chấm ở phía trước của các mục trong danh sách. Để thực hiện việc này, hãy chuyển đến List và đặt thuộc tính list-style –type thành không có.
Bước 5
Bấm OK để chấp nhận tất cả các thay đổi.
Bước 6
Để điều chỉnh kích thước phông chữ cho kiểu ul li, bạn cần thực hiện như sau. Trong Quản lý kiểu, nhấp chuột phải vào kiểu ul li mà bạn cần để chọn Sửa kiểu. Hộp thoại quen thuộc để thêm hoặc thay đổi thuộc tính sẽ mở ra. Chuyển đến danh mục Phông chữ và đặt thuộc tính font-family thành Arial, Helvetica, sans-serif. Tiếp theo, chuyển đến thuộc tính font-size và đặt nó thành 0.9em. Sau đó, thiết lập thuộc tính text-biến đổi, đặt giá trị cho nó thành chữ hoa.
Bước 7
Chiều cao của các mục trong menu đã tạo có thể được điều chỉnh trong danh mục Vị trí. Đặt thuộc tính chiều cao thành 30px.
Bước 8
Tiếp theo, bạn cần lưu tệp menu.html. Để thực hiện việc này, Expression Web sẽ mở cửa sổ Save Embedded Files cần thiết để lưu tệp. Lưu trong tệp drop-down.css. Nhấn OK để lưu.
Bước 9
Bây giờ kiểm tra kết quả của bạn. Để có độ tin cậy, tốt hơn nên kiểm tra nó trên các trình duyệt khác nhau. Để kiểm tra kết quả nhận được trong trình duyệt mặc định, bạn phải nhấn phím F12 trên bàn phím.
