Hướng dẫn navbar html & css - thanh điều hướng html & css
Bất kỳ ai có liên kết 2 phút đọc 2 phút đọc Mở đầuBài viết này mình sẽ hướng dẫn cho các bạn mới cách responsive thanh navbar chỉ bằng css Như mọi người thường thấy khi dùng điện thoại thì sẽ có 1 icon bars để xem nội dung của thanh navbar, thường mọi người sẽ nghĩ làm cái này bằng javascript nhưng thực ra css vẫn làm được Nội dungĐầu tiên chúng ta tạo 1 thanh navbar như bình thường,có thêm thẻ input có type checkbox, và có cả icon bars và mình sẽ ẩn nó đi chỉ để hiện trên mobile
Thanh navbar này sẽ hiện trên pc Giờ mình sẽ tạo 1 lớp overlay và cũng cho nó ẩn đi
Thông thường nội dung navbar trên pc và mobile không giống nhau nên mình sẽ tạo thêm 1 thanh navbar dành cho mobile có thêm cả icon times để đóng
Ban đầu mình sẽ cho nó ẩn bên trái phía màn hình và cho nó có hiệu ứng chuyển động đi vào bằng thuộc tính
Giờ chúng ta sẽ sử dụng thuộc tính :checked của thẻ input có type checkbox ở trên Chắc mọi người cũng biết tác dụng của thẻ label với checkbox rồi đúng không Giờ việc của chúng ta là đổi tên thẻ chứa overlay, icon times, icon bars, mình sẽ thu gọn lại cho mọi người dễ nhìn Đoạn code css dưới đây nghĩa nôm na là khi thẻ input được checked bằng icon bars thì thanh navbar dành cho mobile sẽ trượt từ trái sang. Cộng thêm việc lớp overlay hiện lên. Khi chúng ta click vào icon times hoặc ấn vào lớp overlay thì lớp overlay sẽ ẩn và thanh navbar sẽ trượt về phía bên trái màn hình Còn phần @media có nghĩa là khi màn hình dưới 1024px thì sẽ mất thanh navbar của pc và hiện icon bars.
Nói thì có vẻ dài dòng nên mọi người có thể xem code ở đây để trực quan hơnhttps://codepen.io/duyvu0302/pen/LYxeQJQ Kết thúcBài viết trên mình đã nói hướng dẫn các bạn làm navbar responsive trên mobile chỉ bằng css, các bạn cũng có thể làm nhiều thứ hơn với nó như modal chẳng hạn... Hy vọng bài viết này có ích cho bạn. Cảm ơn bạn đã quan tâm ! Nguồn tham khảo : https://www.youtube.com/watch?v=HYy4c6lcOlM&t=1457s All rights reserved |