[Thực hành] Tạo menu ngang- Codegym.vn

Mục tiêu

Luyện tập sử dụng CSS để tạo được các menu ngang cơ bản.

Nội dung- Tạo menu ngang

Với CSS, chúng ta có thể dễ dàng tạo ra một trình đơn (menu) có khả năng thả xuống (dropdown) mỗi khi đưa con trỏ vào một mục chọn trong trình đơn (mục chọn có trình đơn con). Trong phần này chúng ta sẽ xây dựng một trình đơn hàng ngang, có khả năng buôn xuống mỗi khi đưa con trỏ qua.

Kết quả của phần thực hành này như sau:

Hướng dẫn

Trước hết, chúng ta cần soạn thảo một trang HTML với cấu trúc chuẩn (gồm html, head và body). Sau đó bạn bổ sung đoạn code dưới đây vào phần body để có một danh sách các liên kết lồng nhau (hai cấp).

Tiếp theo, chúng ta tạo ba bộ chọn sau đây để cố định phông chữ cho trang HTML và đặt phân vùng cho trình đơn (chiều cao, đường viền, khoảng cách và màu nền.

Bây giờ, định nghĩa tiếp một bộ chọn riêng cho các phần tử trong danh sách:

Sau đó, chúng ta định nghĩa một bộ chọn dành cho các liên kết trong trình đơn, bộ chọn này sẽ cố định độ rộng của một mục chọn trong trình đơn, chiều cao, cách hiển thị và định dạng về văn bản của các liên kết trong trình đơn.

Tiếp theo, chúng ta bổ sung thêm một bộ chọn dành cho trường hợp khi các liên kết được con trỏ đưa qua, bộ chọn sẽ chuyển màu nền của liên kết sang màu đỏ khi xảy ra sự kiện này:

Sau đó, chúng ta thêm một bộ chọn dành cho các danh sách con (trình đơn con) để quy định về vị trí hiển thị của chúng so với mục chọn của trình đơn cha. Bộ chọn đó như sau:

Bây giờ, chúng ta có thể thấy các mục chọn của trình đơn con đang hiển thị lên và đè lên nhau, chúng ta cần bổ sung thêm một mô tả với thuộc tính visibility cho bộ chọn #menu ul ul vừa được định nghĩa ở trên, khi đó bộ chọn này sẽ như sau:

Cuối cùng, để các trình đơn bị ẩn sẽ hiển thị mỗi khi con trỏ được đưa qua mục chọn của trình đơn cha, chúng ta cần tạo thêm một bộ chọn nữa. Bộ chọn này được áp dụng cho các danh sách con (trình đơn con) mỗi khi mục chọn tương ứng ở trình đơn cha xảy ra sự kiện đưa con trỏ qua:

Trên đây CodeGym đã cùng với bạn luyện tập sử dụng CSS để tạo được các menu ngang cơ bản. Hãy chụp ảnh màn hình và nộp bài thực hành của bạn trên CodeGymX để cùng nhau luyện tập nhé!