Hướng dẫn làm menu ngang đẹp trong c năm 2024

+ Để 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ự.

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

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ùng

  • Người dùng có thể nhìn thấy hết các mục mà nhà thiết kế muốn truyền tải
  • Người dùng có thể dễ dàng tìm kiếm các sản phẩm

  Kết luận

  Có thể nói menu đa cấp đã đem lại sự tiện lợi cho cả người thiết kế và người sử dụng. Vừa truyền đạt được nhiều thông tin lại không gây rối mắt tăng tương tác với người dùng. Như 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.