Tạo menu đa cấp responsive bằng html css javascript

0
1694

Trong bài viết này mình sẽ hướng dẫn các bạn làm một menu đa cấp đơn giản bằng html css và thêm một  tí javascript nữa. Tuy làm khá đơn giản nhưng nhìn nó cũng khá mượt 😀 và đặc biệt là nó còn responsive nữa. Mình xin được bắt đầu bài viết

form đang ky html css

Tạo menu đa cấp responsive bằng html css javascript

Demo:

Các bạn có thể click vào đây để xem kết quả, nhớ scale màn hình trình duyệt để xem giao diện trên mobile của nó.

Bây giờ mình sẽ code và giải thích chi tiết ngay phía sau

Mình xin 5 phút quảng cáo nha =))

Code:html

Code: css

Code: JS

Kết Quả:

Giao diện trên pc

menu đa cấp

Giao diện trên mobile

menu sidebar

Giải thích:

Chắc có lẽ mình không cần giải thích cách để tạo ra thanh ngang menu đúng không, vấn đề ở đây là tạo menu 2 cấp. Để tạo ra menu 2 cấp hoặc là n cấp chúng ta sẽ tạo thêm khối ul từ những thẻ li, sau đó sử dụng position relative và absolute để căn chỉnh vị trí là được rồi. Ẩn đi bằng cách đặt display:none cho khối li > ul, sau đó chúng ta tạo hiệu ứng hover. Trong hover thì đặt display:block để khi rê chuột vào menu xuất hiện.

Còn phần responsive, chúng ta cần một ít code js để xử lý. Chỉ là thêm bớt class bằng hàm toggle, tức là khi click vào icon nó sẽ add và remove class. Trong phần css lúc này chúng ta sẽ dụng thuộc tính position:fixed đặt width height và điều chỉnh vị trị của khối menu thôi. Chỉ vậy thôi :D.

Vậy là mình đã tạo ra một menu đa cấp responsive rất đơn giản rồi nhé. Mình xin được kết thúc bài viết tại đây.

Xem các bài viết khác tại đây

avatar
  Subscribe  
Notify of