Hầu hết các trang web ngày nay đều có phần menu và khi click vào menu sẽ trỏ ra một list các menu item ở phía dưới. Bài viết này các bạn hãy cùng thử làm với menu của codelearn với mình nhé
Menu đa cấp là gì?
Menu đa cấp là menu cung cấp danh sách các tùy chọn thường xuất hiện ở phần đầu tiên của mỗi trang web. Khi mục hiển thị được nhấp vào, các mục khác từ danh sách sẽ "thả xuống" list các danh sách con trong chế độ xem và người dùng có thể chọn từ các tùy chọn đó.
Tạo menu đa cấp cho phép người dùng lựa chọn một tùy chọn từ danh sách. Đây là một giải pháp không thể thiếu trong thiết kế trang web, đăc biệt là các website có số lượng chỉ mục nhiều, không thể sắp xếp toàn bộ trên giao diện
Các thành phần cần có của một menu đa cấp
Để tạo menu đa cấp nói riêng cũng như các loại menu khác nói chung thì các thành phần cũng tương tự gần như nhau.
+ Thẻ là một thẻ được dùng để gom nhóm nhiều phần tử. Thường được dùng để tạo bố cục cho website trong đó phải kể đến menu đa cấp. Thẻ gom nhóm các phần tử của menu vào một khu vực để tách với các phần khác.
+ Để tạo danh sách các menu item có trong menu đa cấp chúng ta cần phải sự dụng cac thẻ như , . Các thẻ này thường đi kèm vơi thẻ
Thẻ sử dụng để tạo danh sách không có thứ tự.sử dụng để tạo danh sách không có thứ tự.
Thẻ sử dụng để tạo danh sách có thứ tự.
+ Để tạo danh sách các menu item có trong menu đa cấp chúng ta cần phải sự dụng cac thẻ như , . Các thẻ này thường đi kèm vơi thẻ
Thẻ sử dụng để tạo danh sách không có thứ tự.
tạo một file index.html để thiết kế bố cục cho menu đa cấp
Thẻ sử dụng để tạo danh sách có thứ tự.
Ngoài ra để có thể tạo một menu đa cấp hoàn chỉnh chúng ta cần phải sự dụng CSS để căn chỉnh các thành phần để nó có thể về đúng vị trí và trông đẹp mắt hơn
Cách tạo ra một menu đa cấp đơn giản Tạo 1 file style.css hoặc bạn có thể viết luôn css vào file index.html
Bước 1: tạo một file index.html để thiết kế bố cục cho menu đa cấp
Trong cái file này chúng ta có:
Menu ở đây có 9 mục trong đó menu đa cấp được thể hiện tại "Học tâp". Trong "Học tập" có 3 menu item nhỏ như HTML, CSS, Javascript
Bước 2: Tạo 1 file style.css hoặc bạn có thể viết luôn css vào file index.html
+ viết css trong file index.html
Nếu bạn muốn viết css ra file riêng bạn chỉ cần tạo 1 file style.css rồi paste code css vào.
Lưu ý: để file index.html có thể kết nối đc file style.css bạn cần phải gọi lại cái linhk css đó bằng cách
Trong file css chúng ta có :
- Thiết kế cho thẻ:
Sử dụng thuộc tính 'list-style-type: none' để loại bỏ các dấu chấm ở đầu mỗi thành phần của menu
+ Khi chưa có 'list-style-type: none' :
+ Sau khi có 'list-style-type: none' :
Thiết kế cho thẻ
Sử dụng thuộc tính 'float' : left để cho các thành phần của menu dàn thành hàng ngang
Để xóa các dấu gạch chân dưới menu chúng ta set thuộc tính 'text-decoration: none'
Bên cạnh đó ta set khoảng cách giũa các từ và màu chữ
Menu sau khi set các thuộc tính trên
Thay đổi màu nền khi chúng ta click vào bất kỳ mục nào trên menu
Menu sẽ như này:
- Tiếp theo chúng ta sẽ thiết kế menu đa cấp tại mục " Học tâp ". Tại đây sử dụng các thuộc tính sau:
- Sau khi làm xong chúng ta sẽ có giao diện menu đa cấp như sau:
Sự tiện lợi của menu đa cấp
- Đối với người thiết kế giao diện:
- Nếu không có menu đa cấp thì việc hiển thị cùng một lúc tất cả danh mục rất khó vì mỗi giao diện đều có kích cỡ nhất định nếu người thiết kế cho quá nhiều danh mục trên một thanh menu thì sẽ gây ra dối mắt và mất thẩm mĩ còn danh mục quá ít thì sự truyền tải nội dung của người thiết kế đến người dùng là chưa đ
Menu đa cấp giúp người thiết kế linh hoạt hơn cho việc thiết kế
Đối với người dùngNhư vậy mình đã hướng dẫn xong các bạn tạo menu đa cấp với HTML và CSS codelearn. Việc tạo menu đa cấp không khó như chúng ta nghĩ. Các bạn hãy thử tạo một menu đa cấp cho chính website của các bạn.