Tạo menu ngang đa cấp với Html và Css (P2)

0
507

[VIDEO TUT]

  • Đang cập nhật…
Bấm Subscribe Nhận video học mới nhất :

1. Lời mở đầu

  • Trong phần 1 bài học html và css thì mình đã giới thiệu với các bạn cách tạo một menu ngang đơn giản thì tiếp tục trong phần 2 này chúng ta cùng đi vào tạo thành phần menu ngang đa cấp. Như các bạn đã biết thì menu chắc chắn là thành phần không thể thiếu của một website. Đây sẽ là một bài hướng dẫn với các kiến thức căn bản nhất với html và css. Giờ thì chúng ta cùng bắt đầu đi vào thực hiện

2. Tiến hành 

  • Để bắt đầu với mã HTML thì mình sẽ giữ nguyên cấu trúc mã HTML như trong phần một mà mình đã tạo

  • Ở đây các bạn có thể thấy mình chỉ thêm vào đoạn mã HTML các đoạn thẻ <ul><li> chủ yếu là để tạo các submenu con.
  • Tiếp theo là đoạn mã CSS để tạo nên cấu trúc cho thành phần HTML này:

  • Ở trên đây mới chỉ là thành phần CSS cho menu cấp 1 của mình. Công việc tiếp theo là tạo thành phần CSS cấp 2 cho đoạn thẻ <ul><li>

  • Ok như vậy là chúng ta đã có một menu đa cấp rồi. Giờ chúng ta hãy cùng kiểm tra trên trình duyệt để xem thành quả nhé

3. Hiển thị trên trình duyệt

1

  • Như vậy là đã có menu đa cấp của mục sản phẩm rồi

1

  • Tiếp theo là menu đa cấp của mục diễn đàn.

4. Lời kết

  • Như vậy là trong 2 bài viết vừa rồi mình đã hướng dẫn với các bạn cách tạo một menu đơn giản và một menu đa cấp. Qua bài viết này hi vọng sẽ giúp được các bạn mới làm quen và hiểu hơn về html và css. Xin chào chúc các bạn học thật tốt.

Tham khảo các bài viết khác:

Tác giả : Hà Trần Vietpro

 

[Total: 1    Average: 5/5]

LEAVE A REPLY

Please enter your comment!
Please enter your name here