Cách sử dụng?

Mega Menu là một trong những loại menu phổ biến và hiệu quả nhất, đặc biệt trên máy tính để bàn. Người dùng tự nhiên mong đợi tìm thấy một Mega Menu ngay bên dưới tiêu đề trang web. Tuy nhiên, menu mặc định của Shopify thường đơn giản, thiếu cấu trúc mạnh mẽ và hầu như không hỗ trợ hình ảnh. Đó là lý do tại sao bạn nên sử dụng Navi+ Mega Menu.

Lợi ích chính:

• Thay thế hoàn toàn menu mega đơn giản mặc định của Shopify
• Cung cấp nhiều kiểu trình bày với hình ảnh, lưới, và bố cục nhiều cấp cho trải nghiệm phong phú, chuyên nghiệp
• Hoạt động liền mạch trên cả di động và máy tính để bàn để có trải nghiệm nhất quán

Câu hỏi thường gặp:

Bước 1: Chỉnh sửa cây menu

1.1. Hiểu về Cây Menu

Cây menu là phần quan trọng nhất của bất kỳ menu nào — nó xác định cấu trúc.

Dưới đây là một ví dụ về cây menu của menu mega đầy đủ trên máy tính để bàn:

[+] Menu  
[+] Categories
[+] Alphabets 
Skateboarding  
   - Components (Tên nhóm)  
   - Desks
   - Trucks
   - More (Liên kết màu xanh để chi tiết..)   
   - Completes      
        - Hats (Tên nhóm)
        - Burton Lunchlap Earflap Hat           
        - Volcom Ramp Stone Adjustable Hat
        - ...
[+] Accessories  
[+] Blogs  
[+] Support
[+] More

Đây là một cây menu 3 cấp. Cấp 1 bao gồm Menu, Categories, Alphabets, Skateboarding… và More... Skateboarding có 5 menu con cấp-2: Components, Desks, Completes (Bao gồm một số menu con cấp-3: Hats, Burton Lunchlap Earflap Hat…)

Bạn sẽ dành phần lớn thời gian của mình để xây dựng cây menu này cho trang web của mình, giúp khách hàng tìm thấy nội dung họ đang tìm kiếm.

1.2. Các tương tác cơ bản với Cây Menu

Bạn có thể kéo và thả các mục menu lên và xuống hoặc sang trái và phải để thay đổi vị trí và mối quan hệ cha-con trong cây menu.

Khi bạn di chuột qua bất kỳ mục menu nào, bạn sẽ thấy các tùy chọn bổ sung: chỉnh sửa chi tiết của mục, xóa nó khỏi cây menu, hoặc sao chép và dán nó ở nơi khác.

Mẹo: Bạn có thể sao chép một mục menu từ menu này sang menu khác bằng cách mở ứng dụng Navi+ trong hai tab trình duyệt.

1.3. QUAN TRỌNG! Xóa các mục menu mẫu và chỉ giữ lại cấu trúc bạn muốn.

Đây là một tình huống phổ biến khi tạo một menu với Navi+. Khi bạn tạo một menu mới, chúng tôi bao gồm một ví dụ đầy đủ với các mục menu phổ biến để hiển thị ý tưởng bố cục và cho phép bạn sao chép/dán khi cần. Tuy nhiên, nếu bạn mới sử dụng Navi+ và đang sử dụng gói Starter, bạn sẽ thấy nhiều cảnh báo đỏ (i) cho các tính năng không khả dụng, chẳng hạn như tải lên hình ảnh hoặc sử dụng các tương tác nâng cao.

Nếu bạn thích những tính năng nâng cao này, hãy xem xét việc nâng cấp lên gói Business hoặc Elite. Nhưng nếu bạn muốn tiếp tục với gói Starter, hãy tìm và xóa các mục menu có cảnh báo đỏ (i).

Mẹo quan trọng: Khi xác nhận xóa xuất hiện, hãy bật “Đừng hỏi lại lần sau” để xóa nhanh hơn.

1.4. Thêm các mục menu vào Cây Menu

Để thêm một mục menu, bạn có hai tùy chọn:

Tùy chọn 1 **(Không khuyến nghị nếu bạn mới sử dụng Navi+)**: Nhấp vào “Thêm menu” để chèn một mục menu trống ở cuối cây menu. Phương pháp này yêu cầu bạn phải hiểu rõ về cài đặt mục menu, điều này chúng tôi sẽ đề cập bên dưới. Nó có thể cảm thấy choáng ngợp lúc đầu, vì vậy bạn có thể khám phá điều này sau.

Tùy chọn 2 (Khuyến nghị): Chúng tôi đã chuẩn bị nhiều mẫu mục menu được thiết kế tốt cho bạn. Chỉ cần sao chép và dán chúng vào đúng vị trí. Sau khi hoàn thành cây menu của bạn, chỉ cần xóa các mẫu không sử dụng.

1.5. QUAN TRỌNG! Thuộc tính “Is Multi-Column menu item” (chỉ có sẵn cho máy tính để bàn và cho Mega menus).

Đây là một tính năng chuyên biệt được thiết kế đặc biệt cho các Mega Menus trên máy tính để bàn. Nó được sử dụng khi bạn cần một mục menu toàn màn hình với nhiều cột. Mỗi cột có thể được cấu hình với chiều rộng tùy chỉnh (ví dụ: 3/12, 4/12, 6/12…). Mục menu Multi-Column cực kỳ mạnh mẽ và linh hoạt cho việc xây dựng các bố cục menu phức tạp phù hợp với nhu cầu của bạn.

Nếu bạn không cần các bố cục phức tạp như các mục menu Multi-Column — hoặc có kế hoạch sử dụng chúng sau này — bạn có thể an toàn xóa chúng khỏi các mục menu cấp-1 của bạn.

Xem hướng dẫn chi tiết về cách sử dụng thuộc tính “Is Multi-Column menu item”.

Khi một mục menu cấp-1 được đặt thành “Is Multi-Column menu item”, nó sẽ được làm nổi bật bằng màu vàng nhạt trên Cây Menu, và các mục menu cấp-2 của nó sẽ tự động được chuyển đổi thành Cột (với biểu tượng đỏ), bất kể bất kỳ thuộc tính nào khác mà bạn gán.

Đối với các Các mục menu cấp-2 Cột, thuộc tính duy nhất có thể sử dụng là Chiều rộng bố cục. Tất cả các mục menu con dưới cột đó sẽ được sắp xếp trong một cột duy nhất.

Bạn có thấy loại menu này khó sử dụng không? Bạn đúng! Nhưng kết quả bạn nhận được với thuộc tính này thực sự là WOW.

Nếu bạn xóa thuộc tính “Is Multi-Column menu” khỏi mục menu cấp-1, mọi thứ sẽ trở lại trạng thái ban đầu.

Tại sao bạn cần thuộc tính “Dropdown width when expanded”?

Mặc định, khi sử dụng thuộc tính “Is Multi-Column menu item”, menu con (dropdown) mở rộng ra toàn bộ chiều rộng màn hình (hoặc dựa trên kích thước của container, thường là 1280, 1366, 1440, hoặc 100% — có thể cấu hình trong tab Advanced). Tuy nhiên, với một khu vực rộng như vậy, bạn có thể không luôn có đủ nội dung hoặc ý tưởng để lấp đầy không gian.

Trong trường hợp này, bạn có thể giới hạn chiều rộng của menu con (từng cái cho mỗi mục menu Multi-Column) để tránh một cái nhìn trống rỗng hoặc không cân bằng.

Ví dụ: Bạn có thể tạo một menu với chiều rộng 700px và hai cột mỗi cột 6/12. Bằng cách này, bạn vẫn có được một bố cục rộng rãi mà không lãng phí quá nhiều không gian màn hình.