Ở bước Configure của Tab Bar và Floating Button, mục Submenu Expand Style dùng để chọn kiểu hiện bảng menu con cấp 2 khi khách bấm vào một mục menu có mục con.
Desktop Mega Menu, Mobile Menu, Icon Menu và Mobile Mega Menu không có mục này. Nếu bạn muốn chỉnh mũi tên mở rộng trên từng mục menu, xem bài Mũi tên, nút đóng và hiệu ứng mở menu.
Chọn kiểu mở menu con
Submenu Expand Style
Ô này ở đâu: trên thanh bước dọc bên trái bấm Configure, rồi bấm nút Submenu Expand Style ở hàng nút phía trên tấm Configure. Ô dùng để chọn bảng menu con cấp 2 mở ra theo kiểu nào.
- Lựa chọn: hai thẻ có hình minh hoạ, Default (edge-to-edge) và Dropdown. Mặc định cho menu mới: Default.
- Áp cho: chỉ Tab Bar và Floating Button, cấp 2. Mọi gói đều dùng được; Shopify, Wix và website khác như nhau.
- Chỉ chọn được khi thanh nằm ngang ở đỉnh hoặc đáy màn hình (lý do ở mục “Vì sao mục này bị mờ” bên dưới).
Bạn chọn một trong hai thẻ có hình minh hoạ sẵn. Trên hình, nền xám là màn hình, ô trắng là bảng menu con, còn chấm xám là mục khách vừa bấm.
| Tên trong app | Bảng menu con hiện ra thế nào | Mặc định |
|---|---|---|
| Default (edge-to-edge) | Tràn ngang sát hai mép màn hình, không có mũi tên | Có |
| Dropdown (arrow + margin) | Có khe hở giữa thanh và bảng, kèm mũi tên nhỏ trỏ vào mục vừa bấm; trên điện thoại bảng thụt lề hai bên |
Đổi ô này thì khách thấy gì trên cửa hàng:
- Default (edge-to-edge): bảng menu con dính liền với thanh và trải hết bề ngang, không có mũi tên.
- Dropdown: giữa thanh và bảng có một khe nhỏ, trong khe có mũi tên chỉ vào mục khách vừa bấm; bỏ viền dưới và bóng đổ của bảng cho gọn. Bảng mở xuống nếu thanh ở đáy, mở lên nếu thanh ở đỉnh màn hình.
- Trên điện thoại, bảng của Tab Bar rộng bằng đúng thanh. Nếu thanh sát hai mép màn hình thì bảng thụt vào mỗi bên 16 px để không dính mép. Trên máy tính, bảng giữ nguyên độ rộng đang đặt (ô Submenu width bên dưới), chỉ có thêm mũi tên và khe hở.
Muốn đổi màu nền, bo góc hay khoảng cách trong bảng menu con, bạn xem bài Chỉnh kiểu menu con.
Vì sao mục này bị mờ hoặc hiện dòng báo bên dưới?
Kiểu có mũi tên chỉ dùng được khi Tab Bar nằm ngang ở đỉnh hoặc đáy màn hình. Nếu bạn đặt Tab Bar dọc theo cạnh trái hoặc cạnh phải, hai thẻ sẽ mờ đi hoặc hiện dòng giải thích bên dưới:
- Only available when the bar is placed at the top or bottom of the screen. This menu is docked to the side. — Thanh đang nằm dọc ở cạnh trên cả điện thoại lẫn máy tính. Mục này bị khoá, không bấm chọn được.
- Not applied on mobile — the bar is docked to the side there. — Thanh nằm dọc ở cạnh trên điện thoại. Kiểu bạn chọn chỉ có tác dụng trên máy tính.
- Not applied on desktop — the bar is docked to the side there. — Thanh nằm dọc ở cạnh trên máy tính. Kiểu bạn chọn chỉ có tác dụng trên điện thoại.
App chỉ tính những thiết bị đang bật menu. Nếu bạn tắt Show menu on desktop, app chỉ kiểm tra vị trí của Tab Bar trên điện thoại.
Riêng Floating Button luôn nằm ở đáy màn hình nên mục này không bao giờ bị khoá.
Cách đổi vị trí thanh có trong bài Vị trí và khoảng cách lề của menu. Công tắc bật tắt menu theo thiết bị có trong bài Hiện menu trên điện thoại và máy tính.
Chỉnh độ rộng menu con của Tab Bar trên máy tính
Chỉ Tab Bar mới có ô Submenu width (px). Bạn tìm ô này trong thẻ Display on desktop, phần For desktop only, mục Submenu (Level 2,3).
- Nhập độ rộng tính bằng px. Mặc định là
360. - Số này chỉ áp dụng trên máy tính, không ảnh hưởng đến điện thoại.
Bảng tóm tắt
| Ô trong app | Tác dụng | Mặc định | Loại menu |
|---|---|---|---|
| Submenu Expand Style › Default (edge-to-edge) | Bảng menu con tràn sát hai mép màn hình, không có mũi tên | Có | Tab Bar, Floating Button |
| Submenu Expand Style › Dropdown (arrow + margin) | Bảng menu con có khe hở, có mũi tên trỏ vào mục vừa bấm. Cần đặt Tab Bar ở đỉnh hoặc đáy màn hình | Tab Bar, Floating Button | |
| Submenu width (px) | Độ rộng bảng menu con trên máy tính | 360 |
Tab Bar |
Hai mục này giống hệt nhau trên Shopify, Wix và website khác.