Định nghĩa: Menu Hamburger là biểu tượng 3 dấu gạch ngang phổ biến trên giao diện thiết bị di động. Khi người dùng nhấp vào, một menu điều hướng sẽ xổ ra.
Lợi ích/Giá trị: Tiết kiệm tối đa không gian màn hình thiết kế trên mobile/tablet, mang lại trải nghiệm duyệt web gọn gàng, chuyên nghiệp.
Đối tượng sử dụng: Marketer, Designer.
2. Giải thích Thuật ngữ & Thông số
Interaction (Tương tác): Hành động được kích hoạt khi người dùng thực hiện một thao tác nào đó (ví dụ: click vào icon sẽ mở ra menu).
Display None (Ẩn): Trạng thái không hiển thị phần tử trên giao diện, nhưng phần tử vẫn tồn tại trong cấu trúc trang.
Đường dẫn truy cập: Marketing → Landing Page → Landing Page Builder → Nhấp vào tên trang để mở Editor.
4. Các bước thực hiện
4.1. Thiết lập nút Hamburger
Bước 1: Chuyển Editor sang chế độ thiết kế Mobile (áp dụng cho màn hình từ 750px trở xuống).
Bước 2: Thêm một Vùng chứa để đặt Menu Hamburger.
Bước 3: Kéo thả phần tử Menu Hamburger vào Vùng chứa vừa tạo và căn chỉnh vị trí.
Bước 4: Chọn Menu Hamburger → Chọn tab Tương tác.
Bước 5: Tạo sự kiện tương tác bằng cách chọn Click phần tử (Tạo sự kiện mới hoặc chọn sự kiện đã có).
4.2. Tạo danh sách Menu mở rộng
Bước 1: Thêm danh sách các menu con (Text/Button) và cấu hình liên kết (URL).
Bước 2: Chỉnh bố cục menu sang dạng Dọc.
Bước 3: Thiết lập kích thước Menu là 100% chiều rộng màn hình.
4.3. Cài đặt hiệu ứng đóng/mở Menu
Để menu xổ ra khi bấm, bạn cần cấu hình lắng nghe sự kiện trên Vùng chứa của Menu mở rộng:
Bước 1: Chọn Vùng chứa của phần Menu mở rộng → Chọn tab Tương tác → Thiết lập Lắng nghe sự kiện.
Bước 2: Mở tab Bố cục → Ở phần Trạng thái, chọn chế độ Bình Thường. Cài đặt thuộc tính TRANSFORM, chọn Độ mờ (Opacity) là 0 (Ẩn đi khi bình thường).
Bước 3: Tiếp tục ở tab Bố cục → Ở phần Trạng thái, chọn chế độ Sự kiện tùy chỉnh / Đóng mở menu hamburger. Cài đặt thuộc tính TRANSFORM, chọn Độ mờ (Opacity) là 1 (Hiện ra khi có sự kiện).
5. Quy tắc vận hành
Menu Hamburger thường chỉ nên cấu hình cho chế độ Mobile/Tablet. Đối với Desktop, bạn nên ẩn Icon Hamburger và hiển thị thẳng Menu dàn ngang bằng cách sử dụng cài đặt “Chế độ hiển thị nội dung theo thiết bị” (Visibility).
6. Các câu hỏi thường gặp (FAQ)
Hỏi: Làm sao để ẩn Menu đi khi khách hàng nhấp vào nút X?
Trả lời: Bạn cần tạo thêm một icon (hình chữ X) bên trong Section Menu và cấu hình Action/Interaction cho icon X đó là: Khi click -> Ẩn (Hide) Section Menu.
