Cách dùng Icon menu hamburger
- Di chuột qua một icon để xem trạng thái mở, hoặc đánh dấu Hiện trạng thái mở để xem tất cả icon ở trạng thái mở. Nhấp vào icon bạn thích.
- Đặt chiều rộng, độ dày, khoảng cách, màu sắc và tốc độ. Mọi icon sẽ cập nhật ngay lập tức.
- Sao chép CSS, HTML và JS, hoặc dùng Sao chép tất cả để lấy một khối code duy nhất.
- Với Webflow, nhấn Sao chép vào Webflow rồi dán vào Designer bằng Ctrl/⌘+V.
Nút menu ai cũng dùng được
Mỗi icon là một <button> thật, không phải một div có thể nhấp, nên hoạt động với bàn phím và trình đọc màn hình ngay từ đầu.
- aria-expanded cho công nghệ hỗ trợ biết menu đang mở hay đóng, và CSS dùng chính thuộc tính này để tạo hoạt ảnh. Một nguồn dữ liệu duy nhất.
- aria-label đặt tên cho nút, vì nút không có chữ hiển thị.
- Vùng chạm: phần đệm giữ vùng nhấp có kích thước ít nhất 44 pixel vuông.
- Giảm chuyển động sẽ tắt hoạt ảnh với những người dùng muốn hạn chế chuyển động.
Kết nối với menu của bạn
Đoạn script nhỏ sẽ đổi aria-expanded khi nhấp. Để hiển thị menu, thêm aria-controls="menu" và một quy tắc như .burger[aria-expanded="true"] ~ #menu { display: block; }, hoặc bật/tắt một class trên menu trong cùng hàm xử lý nhấp.
Trong Webflow, Sao chép vào Webflow sẽ dán một Embed gồm icon, style và script. Để mở navbar Webflow bằng icon này, hãy đặt Embed bên trong phần tử Menu Button của navbar. Xem thêm: CSS Button Styles, CSS Hover Animation Generator, CSS Loader Generator.
Cũng được tìm dưới tên: hiệu ứng icon menu hamburger, menu burger css, icon hamburger css, hoạt ảnh menu hamburger css, icon burger thành dấu x, menu hamburger webflow, tạo icon menu css.
Các công cụ dùng kèm tốt với Icon menu hamburger
- Tạo Nút CSS — Thiết kế một nút bấm đẹp ở mọi trạng thái.
- Trình tạo CSS Keyframes — Trình chỉnh sửa trực quan cho @keyframes.
- Tạo Select Menu — Đừng gõ tay từng danh sách lựa chọn nữa.
- Trình tạo animation CSS — Thiết kế animation CSS trên timeline keyframe thực tế.