Bài tập javascript 5 – Viết hiệu ứng cho menu side bar phần 1

0
561
bài tập javascript

bài tập javascript 5 này, chúng ta sẽ làm các hiệu ứng chuyển động cho menu side bar. Nhìn chung thì chúng cũng khá đơn giản thôi chỉ truy xuất phần tử và thêm bớt class thôi mà, okê mình tiến hành luôn 😀

Bài tập javascript 5

Kiến thức cần có:

  1. Biến
  2. Mảng
  3. Hàm
  4. Event
  5. HTML DOM

Bài tập javascript 5: Viết hiệu ứng cho menu side bar phần 1

Mô tả bài tập: Click 1 lần vào button thì thanh menu hiện từ trái ra đồng thời một khối đen hiện lên, khi ta click vào khối đen thì menu và khối đen biến mất.

Demo:

Click vào bài tập js 5 để xem kết quả

Mình sẽ code và giải thích chi tiết ở ngay phía sau.

Code: html

Code: css

Kết quả:

Bài tập javascript 5

Lưu ý là khối đen sẽ ẩn đi  vì mình để opacity: 0 và visibility: hidden  và khối menu sẽ không thấy vì mình đã để transform:translateX(-100%) nó sẽ ẩn về phía bên trái hoàn toàn. Để z-index cho từng khối lần lượt menu là 3 khối đen là 2 và button là 1.

Code: Js

File js :

  • Chỉ là  truy xuất phần tử và add , remove class thông thường thôi đúng không :D. Nếu bạn nào chưa biết thì đọc lại những bài tập trước của mình nhé.

Với loại bài tập xử lý menu side bar này chúng ta chỉ cần sử dụng các thuộc tính css một cách ảo lòi là được rồi còn js thì chỉ thêm bớt class thôi.

Vậy là mình đã xử lý xong Bài tập javascript 5 – Viết hiệu ứng cho menu side bar phần 1 rồi nhé :D, chúng ta sẽ viết thêm các hiệu ứng ảo hơn cho menu side bar ở phần tiếp theo nhé.

Xem bài viết tiếp theo tại đây.

avatar
  Subscribe  
Notify of