Các ô trong bài này đều nằm ở bước Configure, áp dụng cho cả menu chứ không chỉnh riêng từng mục. Muốn xem cách làm từng bước, bạn đọc bài Mũi tên, nút đóng và hiệu ứng mở menu. Bài này là bản tra cứu: mỗi ô một mục, để bạn bấm nút (?) cạnh ô là tới đúng chỗ.
Để vào: bấm bước Configure trên thanh bước dọc bên trái. Tấm Configure trượt ra từ bên phải, bạn bấm hàng nút Navigation Icons, Animation, Z-Index ở đầu tấm để nhảy tới đúng thẻ.
Các ô giống nhau trên Shopify, Wix và mọi website khác.
| Ô trong app | Thẻ | Loại menu có ô này |
|---|---|---|
| Expand arrow | Navigation Icons | Cả 6 loại (chỉ đổi được hình ở 3 loại, xem mục riêng) |
| Arrow style | Navigation Icons | Cả 6 loại · gói Elite |
| Hide close icon | Navigation Icons › Close icon | Chỉ Mobile Menu |
| Position | Navigation Icons › Close icon | Chỉ Mobile Menu |
| Offset from menu top | Navigation Icons › Close icon | Chỉ Mobile Menu |
| Animation Style | Animation Style | Cả 6 loại |
| Animation Speed | Animation Speed | Cả 6 loại |
| Z-Index | Z-Index | Cả 6 loại |
Mũi tên và nút đóng
Expand arrow
Ô nằm ở thẻ Navigation Icons, mục Expand arrow, là công tắc Show arrow icons. Bật thì mục nào có menu con sẽ hiện một mũi tên nhỏ báo “còn cấp con bên trong”.
- Lựa chọn: bật hoặc tắt. Menu mới để bật sẵn.
- Áp cho: công tắc có ở cả 6 loại menu. Trên cửa hàng, nó làm mũi tên của mục cấp 1 hiện hay mất ở Mobile Menu, Desktop Mega Menu và Mobile Mega Menu. Với Tab Bar, Floating Button và Icon Menu, tắt công tắc này không làm mũi tên đổi.
- Gói: mọi gói.
- Khách thấy gì khi đổi: tắt công tắc thì mũi tên ở cuối mục cha biến mất, mục cha tự bớt phần trống bên phải cho gọn. Khách vẫn bấm mục cha để mở menu con như thường, chỉ là không còn dấu hiệu báo trước.
- Lưu ý: công tắc này không động tới icon riêng bạn gắn cho từng mục. Xem bài Icon, ảnh và nhãn cho mục menu.
Nền tảng khác
Các bước ở trên dành cho Shopify — đây là cách mặc định.
Giống nhau trên mọi nền tảng.
Giống nhau trên mọi nền tảng.
Arrow style
Ô nằm ngay dưới Expand arrow, ở thẻ Navigation Icons. Gồm 4 ô nhỏ để đổi diện mạo mũi tên: Color, Opacity (0–100), Font size (px) và Icon.
- Lựa chọn và mặc định: để trống cả 4 ô thì mũi tên giữ như cũ. Ô trống hiện gợi ý Inherit: màu theo menu, độ đậm 30, cỡ 20. Icon chọn trong thư viện icon của Navi+.
- Áp cho: cả 6 loại menu. Mũi tên ở mục cấp 1 chỉ có ở Mobile Menu, Desktop Mega Menu và Mobile Mega Menu; mũi tên của các mục con thì mọi loại đều có.
- Gói: Elite. Gói khác thấy ô bị khoá.
- Chỉ hiện tác dụng khi: Expand arrow đang bật.
- Khách thấy gì khi đổi: mũi tên đổi sang màu, độ mờ, cỡ và hình bạn chọn. Ví dụ đặt Opacity là 100 thì mũi tên đậm rõ thay vì mờ nhạt.
- Lưu ý: Opacity chỉ có tác dụng khi bạn đã chọn Color. Font size và Icon thì dùng riêng được.
Nền tảng khác
Các bước ở trên dành cho Shopify — đây là cách mặc định.
Giống nhau trên mọi nền tảng.
Giống nhau trên mọi nền tảng.
Hide close icon
Ô nằm ở thẻ Navigation Icons, mục Close icon, công tắc Hide this icon. Chỉ hiện khi bạn đang sửa Mobile Menu.
- Lựa chọn: bật hoặc tắt. Mặc định tắt (nút ✕ vẫn hiện).
- Áp cho: chỉ Mobile Menu.
- Gói: mọi gói.
- Khách thấy gì khi đổi: bật thì nút ✕ biến mất khỏi khung menu trượt, khách chỉ đóng menu bằng cách chạm vào vùng tối bên ngoài. Hai ô Position và Offset from menu top cũng ẩn theo.
- Nên cân nhắc: nếu khung menu phủ gần hết màn hình thì nên giữ nút ✕ để khách có chỗ bấm đóng.
Nền tảng khác
Các bước ở trên dành cho Shopify — đây là cách mặc định.
Giống nhau trên mọi nền tảng.
Giống nhau trên mọi nền tảng.
Position
Ô nằm ở thẻ Navigation Icons, mục Close icon, cạnh công tắc Hide this icon. Chỉ hiện ở Mobile Menu, và chỉ hiện khi nút ✕ chưa bị ẩn.
- Lựa chọn: Top right (góc trên bên phải) hoặc Top left (góc trên bên trái). Mặc định cho menu mới là Top right.
- Áp cho: chỉ Mobile Menu.
- Gói: mọi gói.
- Chỉ hiện khi: Hide this icon đang tắt.
- Khách thấy gì khi đổi: nút ✕ nhảy từ góc này sang góc kia của khung menu trượt. Chọn Top left nếu menu của bạn trượt ra từ bên phải và bạn muốn nút đóng nằm phía mép màn hình.
Nền tảng khác
Các bước ở trên dành cho Shopify — đây là cách mặc định.
Giống nhau trên mọi nền tảng.
Giống nhau trên mọi nền tảng.
Offset from menu top
Ô nằm ở thẻ Navigation Icons, mục Close icon, cạnh ô Position. Chỉ hiện ở Mobile Menu, khi nút ✕ chưa bị ẩn.
- Đơn vị và mặc định: px. Mặc định 12. Để trống thì hiện gợi ý Inherit (12) và dùng 12.
- Áp cho: chỉ Mobile Menu.
- Gói: mọi gói.
- Chỉ hiện khi: Hide this icon đang tắt.
- Khách thấy gì khi đổi: nút ✕ dịch xuống thấp hơn so với mép trên khung menu. Dùng khi menu của bạn có logo hoặc ảnh ở đầu và nút ✕ đang đè lên.
Nền tảng khác
Các bước ở trên dành cho Shopify — đây là cách mặc định.
Giống nhau trên mọi nền tảng.
Giống nhau trên mọi nền tảng.
Hiệu ứng mở menu
Animation Style
Ô nằm ở thẻ Animation Style của tấm Configure: hai thẻ chọn có hình nhỏ, Slide và Fade.
- Lựa chọn: Slide (bảng trượt ra vào) hoặc Fade (hiện dần lên, mờ dần khi đóng). Mặc định cho menu mới là Slide.
- Áp cho: app ghi chú ở chính thẻ này là dành cho Mobile Menu và Tab Bar. Qua kiểm code cửa hàng, ô này còn đổi kiểu mở bảng con của Floating Button, Desktop Mega Menu và Mobile Mega Menu (Slide là trượt xuống, Fade là hiện dần). Icon Menu không dùng ô này.
- Gói: mọi gói.
- Khách thấy gì khi đổi: chọn Slide, bảng menu con trượt ra rồi trượt vào. Chọn Fade, bảng hiện dần lên và mờ dần khi đóng, không chuyển động ngang dọc.
- Chỉ thấy khác khi: Animation Speed không phải No animation. Tắt hiệu ứng thì Slide hay Fade đều hiện ngay lập tức.
Nền tảng khác
Các bước ở trên dành cho Shopify — đây là cách mặc định.
Giống nhau trên mọi nền tảng.
Giống nhau trên mọi nền tảng.
Animation Speed
Ô nằm ở thẻ Animation Speed, ngay dưới Animation Style: 6 nút chọn từ No animation tới Very fast.
- Lựa chọn: 6 mức, mặc định Medium.
| Mức trong app | Thời gian mở |
|---|---|
| No animation | 0 (hiện ngay) |
| Very slow | 0,5 giây |
| Slow | 0,35 giây |
| Medium (mặc định) | 0,2 giây |
| Fast | 0,12 giây |
| Very fast | 0,06 giây |
- Áp cho: app ghi chú dành cho Mobile Menu, Mega Menu và Tab Bar; code cửa hàng cũng dùng số này khi mở bảng con của Floating Button. Icon Menu không dùng ô này.
- Gói: mọi gói.
- Khách thấy gì khi đổi: mức càng nhanh thì bảng menu con mở càng gọn. Chọn No animation thì menu hiện và ẩn tức thì, hợp với khách thích gọn hoặc cửa hàng nhiều hiệu ứng khác trên trang.
Nền tảng khác
Các bước ở trên dành cho Shopify — đây là cách mặc định.
Giống nhau trên mọi nền tảng.
Giống nhau trên mọi nền tảng.
Lớp hiển thị
Z-Index
Ô nằm ở thẻ Z-Index của tấm Configure, là một ô nhập số, gợi ý Min: 0, max: 2147483647.
- Giá trị: số nguyên từ 0 tới 2147483647. Menu tạo mới hiện sẵn số 50 trong ô.
- Để trống thì sao: Navi+ tự dùng số mặc định theo loại menu: Tab Bar 49, Floating Button 100, Mobile Menu 2147483647 (luôn nổi trên cùng), Desktop Mega Menu và Mobile Mega Menu 49, Icon Menu 1.
- Áp cho: cả 6 loại menu. Gói: mọi gói.
- Khách thấy gì khi đổi: số càng lớn thì menu càng nằm trên các thứ khác của theme như header cố định, banner cookie, nút chat, popup. Menu bị che mất thì tăng số. Menu đè lên giỏ hàng hay nút chat thì giảm số.
- Gợi ý: Tab Bar và Floating Button nên giữ số thấp vì chúng luôn ghim trên màn hình. Mobile Menu thường không cần đụng tới.
Nếu chưa biết các thành phần kia dùng số bao nhiêu, xem bài Menu đè lên widget chat, banner cookie hoặc header.
Nền tảng khác
Các bước ở trên dành cho Shopify — đây là cách mặc định.
Giống nhau trên mọi nền tảng.
Giống nhau trên mọi nền tảng.