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

Mục tiêu

Tạo menu dọc. Luyện tập sử dụng CSS để tạo được các hiệu ứng cho menu cơ bản.

Nội dung- Tạo menu dọc

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 chuột vào một mục chọn trong trình đơn (mục chọn có trình đơn con). Trong phần hướng dẫn này chúng ta sẽ tạo một trình đơn “dropdown” dọc đơn giản. Menu của chúng ta hoạt động như sau:

Hướng dẫn

Đầu tiên, chúng ta cần soạn thảo một tài liệu HTML với cấu trúc cơ bản (gồm html, head, body). Sau đó, chúng ta soạn thảo đoạn mã HTML sau vào phần body. Đoạn mã này cho phép bạn tạo ra một vùng div (có id là menu) chứa các Danh sách không có thứ tự (Unordered List – ul) lồng nhau.

Để tránh có sự khác biệt giữa các trình duyệt, chúng ta bổ sung đoạn mã CSS sau. Các bộ chọn (selector) này đặt cố định loại font chữ cho tài liệu và đặt các thuộc tính căn lề cho khung và cho nội dung của các danh sách, phần tử trong danh sách (ul, li).

Chúng ta tiếp tục bổ sung bộ chọn với các thuộc tính sau cho các phần tử trong danh sách (li).

• list-style:  none; Bỏ đi các ký hiệu đánh dấu đầu mỗi phần tử của danh sách (bullet).
• position: relative; Cho phép các danh sách con được đặt cạnh phần tử chứa nó (phần tử của danh sách ngoài)
• width:100px; và height: 30px; Cố định chiều rộng và chiều cao của một phần tử trong danh sách.
• padding:0 20px; Cố định lề trái (left) và phải (right) dành cho các nội dung bên trong phần tử danh sách (li) với khung viền của nó.
• background-color: black;  Đổi màu nền sang mà đen cho tất cả các phần tử trong danh sách.
• line-height: 30px; Cố định chiều cao cho mỗi dòng văn bản trong phần tử của danh sách.
• cursor: pointer; chuyển biểu tượng của con trỏ màn hình sang hình bàn tay.

Chúng ta tiếp tục định nghĩa thêm một bộ chọn mới dành cho các liên kết bên trong các danh sách (thẻ a); bộ chọn này gồm các mô tả sau: text-decoration: none; dùng để bỏ các gạch chân của liên kết và color: white; dùng để đổi màu liên kết sang màu trắng:

Để mỗi khi chúng ta đưa chuột qua các phần tử của danh sách (giờ là mục chọn trong trình đơn) màu nền của chúng bị thay đổi, thì chúng ta cần định nghĩa một bộ chọn như sau:

Bộ chọn tiếp theo sẽ dành cho các danh sách con (danh sách bên trong một phần tử của danh sách khác), mô tả position: absolute; cho phép cố định vị trí xuất hiện của các danh sách con, mô tả top: 0; và left: 160px; xác định vị trí góc trên trái của khung chứa danh sách con (so với vị trí của phần tử chứa danh sách này), mô tả visibility: hidden; sẽ ẩn làm các danh sách con.

Cuối cùng, chúng ta thêm một bộ chọn dành cho các danh sách con khi phần tử của danh sách ngoài bị đưa con trỏ qua. Bộ chọn này sẽ cho phép danh sách con tương ứng của phần tử đó được hiển thị lên.

Trên đây CodeGym đã cùng với bạn luyện tập sử dụng CSS để tạo được các hiệu ứng cho menu 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é!