Mũi tên báo còn mục con bên trong, nút X đóng menu và tốc độ menu mở ra đều nằm ở bước Configure. Các cài đặt này áp dụng cho toàn bộ menu chứ không chỉnh riêng từng mục menu.
Trước khi bắt đầu
- Mở menu bạn muốn chỉnh trong Navi+.
- Một số cài đặt chỉ có trên vài loại menu nhất định. Từng bước bên dưới sẽ ghi rõ loại menu nào có.
Mũi tên mở rộng và nút đóng
-
Bấm bước Configure trên thanh bước dọc bên trái. Trong tấm Configure vừa trượt ra, bạn có thể bấm hàng nút Navigation Icons, Animation, Z-Index ngay bên dưới để nhảy thẳng tới từng thẻ.
ConfigureVisibility RulesNavigation IconsSubmenu Expand StyleAnimationDividerZ-IndexCSS1Hàng nút nhảy tới thẻNavigation IconsIcons used to navigate within the menu, such as the expand arrow and the close button.Expand arrowShow arrow on parent items that have a submenuShow arrow icons2Mũi tên mở rộngArrow styleColorInherit Opacity (0–100)Inherit (30) Font size (px)Inherit (20) Iconri-arrow-right-s-lineClose iconIcon to dismiss the mobile menuHide this iconPositionTop rightTop leftOffset from menu topInherit (12)3Nút đóng -
Ở thẻ Navigation Icons, tìm mục Expand arrow rồi bật công tắc Show arrow icons để các mục cha có menu con hiện mũi tên nhỏ. Công tắc này bật sẵn và áp dụng cho cả menu. Nếu muốn đổi giao diện mũi tên, bạn chỉnh ở mục Arrow style ngay bên dưới: chọn màu ở Color, độ đậm nhạt ở Opacity (0–100), kích thước ở Font size (px) và chọn hình mũi tên trong thư viện của Navi+ ở Icon. Nếu bạn để trống các ô này, Navi+ sẽ dùng giá trị mặc định gồm màu theo menu, độ mờ 30 và cỡ 20.
9:41•••yourshop.comSTORESTOREHomeShop2Mũi tên của mục chaNew arrivalsBest sellersSaleCollectionsAbout usContact -
Riêng với Mobile Menu, thẻ Navigation Icons có thêm mục Close icon để chỉnh nút X đóng khung menu trượt. Bật Hide this icon nếu bạn muốn ẩn hẳn nút X. Ở Position, chọn Top right để đặt nút ở góc trên bên phải hoặc Top left cho góc trên bên trái. Ô Offset from menu top giúp bạn đẩy nút X dịch xuống thấp hơn mép trên, mặc định là 12px.
9:41•••yourshop.comSTORESTORE3Nút đóngHomeShopCollectionsAbout usContact
Khi bạn ẩn nút X của Mobile Menu, khách chỉ đóng được menu bằng cách chạm vào vùng tối bên ngoài. Nếu khung menu rộng phủ gần hết màn hình, bạn nên giữ lại nút X để khách có chỗ bấm đóng.
Mục Arrow style dùng để đổi màu, cỡ và icon mũi tên thuộc gói Elite, nên ở các gói khác phần này sẽ bị khoá. Riêng công tắc bật tắt mũi tên Show arrow icons thì gói nào cũng dùng được.
Kiểu mở và tốc độ hiệu ứng
-
Chọn kiểu mở menu con tuỳ theo loại menu:
- Với Tab Bar và Floating Button: mở thẻ Submenu Expand Style. Chọn Default (edge-to-edge) để bảng menu con rộng hết bề ngang màn hình, hoặc chọn Dropdown (arrow + margin) để thu gọn bảng lại kèm mũi tên chỉ và khoảng lề xung quanh giống menu thả xuống cổ điển.
- Với Mobile Menu: mở thẻ Submenu Slide Direction (Mobile) để chọn cho menu con xổ xuống ngay tại chỗ hay trượt ngang sang như một trang mới. Thẻ này không hiện nếu bạn dùng Mobile Menu dạng hai cột, vì khi đó menu cấp 2 luôn nằm cố định ở cột bên phải.
- Mega Menu và Icon Menu không có cài đặt này.
ConfigureVisibility RulesNavigation IconsSubmenu Expand StyleAnimationDividerZ-IndexCSSSubmenu Expand StyleChoose how the level 2 submenu panel appears when openedDefaultDefaultDropdownDropdown -
Ở thẻ Animation Style, chọn Slide để bảng menu trượt ra vào, hoặc chọn Fade để menu hiện dần lên rồi mờ đi khi đóng. Thẻ này chỉ có trên Mobile Menu và Tab Bar. Tiếp theo, ở thẻ Animation Speed, chọn một trong sáu mức tốc độ từ No animation đến Very fast. Tốc độ hiệu ứng áp dụng cho Mobile Menu, Mega Menu và Tab Bar.
ConfigureVisibility RulesNavigation IconsSubmenu Expand StyleAnimationDividerZ-IndexCSSAnimationAnimation StyleChoose animation style for Mobile menu and Tab Bar. Slide: panels glide in/out. Fade: menus fade in/out.SlideFade1Kiểu mởAnimation SpeedAdjust the animation speed for menus. Applies to Mobile menu, Mega menu, and Tab Bar.No animationVery slowSlowMediumFastVery fast2Tốc độ -
Bấm Save ở góc trên để lưu menu, rồi mở ngoài cửa hàng và bấm thử đóng mở menu để xem hiệu ứng.
Chỉnh lớp hiển thị (z-index) khi menu bị che hoặc đè lên thứ khác
Trên trang web thường có nhiều thành phần nổi cùng lúc như banner cookie, nút chat, ngăn giỏ hàng hay thanh header cố định. Mỗi thành phần đều có một con số z-index để quy định thứ tự xếp lớp, số nào lớn hơn sẽ nằm ở lớp trên. Vì giao diện theme và từng app tự đặt số riêng chứ không theo quy chuẩn chung, đôi khi chúng sẽ đè lên nhau.
Bạn chỉ cần đổi số z-index của Navi+ trong hai trường hợp:
- Menu bị header, banner hoặc popup của app khác che mất: tăng số z-index lên cao hơn thành phần đang che.
- Menu đè lên nút chat, ngăn giỏ hàng hoặc banner: giảm số z-index xuống thấp hơn thành phần bị che.
Gợi ý đặt số theo từng loại menu:
- Tab Bar và Floating Button: nên đặt số thấp. Hai loại menu này luôn ghim cố định trên màn hình, nếu đặt số quá cao làm đè lên ngăn giỏ hàng sẽ rất vướng khi khách mua sắm.
- Desktop Mega Menu đặt trong header: cần đặt số đủ cao để bảng menu con mở ra không bị chìm xuống dưới các thành phần khác của header.
- Mobile Menu: Navi+ đã đặt sẵn một số rất cao để khung menu trượt luôn nằm trên cùng, thường bạn không cần chỉnh lại.
- Icon Menu: menu nằm ngay trong nội dung trang nên hầu như không cần chỉnh tới z-index.
Nếu bạn để trống ô này, Navi+ sẽ tự dùng số mặc định riêng cho từng loại menu.
Muốn đổi số thứ tự lớp, bạn vào bước Configure, mở thẻ Z-Index, nhập một số từ 0 đến 2147483647 rồi bấm Save. Nếu chưa biết các thành phần kia đang dùng số bao nhiêu, bạn xem bài Menu đè lên widget chat, banner cookie hoặc header để xử lý theo từng trường hợp, hoặc nhờ hỗ trợ để đội ngũ Navi+ xem và báo lại con số chính xác cho bạn.
Câu hỏi thường gặp
Sao tôi tắt mũi tên mở rộng rồi mà vẫn còn?
Bạn vào thẻ Navigation Icons và tắt công tắc Show arrow icons để ẩn mũi tên mở rộng của toàn bộ menu. Nếu một mục menu cụ thể vẫn hiện hình mũi tên, có thể mục đó đang được gắn icon riêng. Công tắc này không tắt icon riêng của từng mục — bạn xem cách gỡ trong bài Icon, ảnh và nhãn cho mục menu.
Sao tôi không thấy mục Close icon?
Mục Close icon chỉ hiện khi bạn đang chỉnh Mobile Menu. Các loại menu khác không có khung trượt nên không cần nút đóng này.
Sao mục Arrow style bị khoá?
Mục Arrow style thuộc gói Elite. Bạn xem chi tiết quyền lợi các gói tại bài Gói dịch vụ và thanh toán.
Sao tôi chọn Dropdown ở Submenu Expand Style mà menu không đổi?
Với Tab Bar, kiểu Dropdown (arrow + margin) chỉ hoạt động khi thanh menu đặt ở đỉnh hoặc đáy màn hình. Nếu bạn gắn thanh menu dọc ở cạnh trái hoặc cạnh phải, Navi+ sẽ tự dùng kiểu Default (edge-to-edge). Riêng Floating Button thì luôn dùng được kiểu Dropdown (arrow + margin).
Sao tôi đổi tốc độ hiệu ứng mà không thấy khác?
Thanh tốc độ ở Animation Speed chỉ áp dụng cho Mobile Menu, Mega Menu và Tab Bar. Khi bạn chọn No animation, hiệu ứng mở sẽ tắt hẳn. Nếu bạn đang dùng Icon Menu hoặc Floating Button thì cài đặt tốc độ này không có tác dụng. Tương tự, hai kiểu hiệu ứng Slide và Fade trong Animation Style cũng chỉ áp dụng cho Mobile Menu và Tab Bar.
Menu bị che khuất hoặc đè lên thứ khác thì làm sao?
Đây là vấn đề thứ tự lớp hiển thị trên trang. Bạn làm theo phần hướng dẫn chỉnh thẻ Z-Index ở trên, hoặc 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.