Menu con là bảng hiện ra khi khách bấm hoặc rê chuột vào một mục cha trên menu. Phần này có bộ cài đặt riêng, tách khỏi menu chính.
Menu con không tự lấy theo kiểu của cấp 1. Khi bạn đổi màu nền hay màu chữ ở thẻ Main menu, bảng menu con sẽ không đổi theo. Muốn đổi giao diện bảng con, bạn vào thẻ Sub menu, hoặc chọn một Palette để áp dụng màu cho cả hai cùng lúc.
Menu con nằm ở đâu trên từng loại menu?
| Loại menu | Phần menu con là |
|---|---|
| Desktop Mega Menu | Bảng lớn chia nhiều cột thả xuống ngay dưới thanh menu |
| Mobile Mega Menu | Bảng mở ra bên dưới thanh danh mục ngang |
| Mobile Menu | Danh sách mục con mở ra trong khung trượt, xổ xuống hoặc trượt ngang tùy cài đặt |
| Tab Bar | Bảng mở ra từ thanh tab, hiện ngay phía trên khi thanh tab đặt ở đáy màn hình |
| Floating Button | Bảng nhỏ bung ra từ nút nổi |
| Icon Menu | Không có menu con và không có thẻ Sub menu |
Trước khi bắt đầu
- Menu của bạn cần có sẵn mục cha chứa các mục con bên trong. Nếu chưa tạo, bạn xem bài Thêm, sắp xếp và lồng mục menu.
- Menu bạn đang mở không phải là Icon Menu.
Cách chỉnh kiểu menu con
-
Trên thanh bước phía trên, bấm Design rồi chọn thẻ Sub menu.
DesignPaletteMain menuSub menu1Thẻ Sub menuLevel 2-3 — The dropdown interface that expands on tap, and each item within it.Sub menu itemText styleText Color#434343 Text Size (px)Default: 14px Text TransformInherit (main menu) Font WeightDefault Font FamilyGoogle fonts Description ColorInherit Description Size (px)InheritIcon/Small-image StyleFont icon color#434343 Gap: Text ↔ Icon (px)Inherit (main menu) Icon/Small-image size (px)Inherit (main menu)Image styleImage curve (px)Inherit (main menu) Image ratio (auto-crop)InheritEach item spacingPadding (px)Inherit Margin (px)InheritSub menu containerBackground (BG)Is TransparentBG Color#FAFAFAShadowApply drop shadowOthersMin height (px)Default Curve (px)Default Divider color#EEEEEEAdvanced display settingsInteractionsNavigation IconsAnimationDividerZ-IndexCSSJSIcons -
Ở khối Sub menu item, mở phần Text style để chỉnh chữ của mục menu con: màu chữ ở Text Color, cỡ chữ ở Text Size (px), kiểu chữ hoa hay thường ở Text Transform, độ đậm ở Font Weight và phông chữ ở Font Family. Bạn chỉnh dòng mô tả nhỏ bên dưới bằng Description Color và Description Size (px). Nếu bạn để trống ô Text Size, chữ của mục con sẽ tự nhận cỡ 14px chứ không lấy theo cỡ chữ của menu chính.
DesignPaletteMain menuSub menuLevel 2-3 — The dropdown interface that expands on tap, and each item within it.Sub menu itemText styleText Color#434343 Text Size (px)Default: 14px Text TransformInherit (main menu) Font WeightDefault Font FamilyGoogle fonts Description ColorInherit Description Size (px)Inherit 2Text styleIcon/Small-image StyleFont icon color#434343 Gap: Text ↔ Icon (px)Inherit (main menu) Icon/Small-image size (px)Inherit (main menu)Image styleImage curve (px)Inherit (main menu) Image ratio (auto-crop)InheritEach item spacingPadding (px)Inherit Margin (px)InheritSub menu containerBackground (BG)Is TransparentBG Color#FAFAFAShadowApply drop shadowOthersMin height (px)Default Curve (px)Default Divider color#EEEEEEAdvanced display settingsInteractionsNavigation IconsAnimationDividerZ-IndexCSSJSIcons -
Kéo xuống phần Icon/Small-image Style để chỉnh màu icon ở Font icon color, khoảng cách giữa chữ và icon ở Gap: Text – Icon, và cỡ icon hoặc ảnh nhỏ ở Icon/Small-image size (px). Tiếp theo, bạn mở phần Image style để chỉnh độ bo góc ảnh ở Image curve (px) và tỉ lệ cắt ảnh tự động ở Image ratio (auto-crop). Riêng ô Image ratio ở đây có thêm lựa chọn Inherit để lấy theo tỉ lệ ảnh của menu chính.
DesignPaletteMain menuSub menuLevel 2-3 — The dropdown interface that expands on tap, and each item within it.Sub menu itemText styleText Color#434343 Text Size (px)Default: 14px Text TransformInherit (main menu) Font WeightDefault Font FamilyGoogle fonts Description ColorInherit Description Size (px)InheritIcon/Small-image StyleFont icon color#434343 Gap: Text ↔ Icon (px)Inherit (main menu) Icon/Small-image size (px)Inherit (main menu) 3Icon styleImage styleImage curve (px)Inherit (main menu) Image ratio (auto-crop)Inherit 3Image styleEach item spacingPadding (px)Inherit Margin (px)InheritSub menu containerBackground (BG)Is TransparentBG Color#FAFAFAShadowApply drop shadowOthersMin height (px)Default Curve (px)Default Divider color#EEEEEEAdvanced display settingsInteractionsNavigation IconsAnimationDividerZ-IndexCSSJSIcons -
Ở phần Each item spacing, bạn chỉnh khoảng đệm trong Padding (px) và khoảng cách ngoài Margin (px) cho từng mục con theo thứ tự
trên phải dưới trái. Nếu muốn đặt số đo riêng cho điện thoại và máy tính, bạn nhập theo dạng8 | 16.DesignPaletteMain menuSub menuLevel 2-3 — The dropdown interface that expands on tap, and each item within it.Sub menu itemText styleText Color#434343 Text Size (px)Default: 14px Text TransformInherit (main menu) Font WeightDefault Font FamilyGoogle fonts Description ColorInherit Description Size (px)InheritIcon/Small-image StyleFont icon color#434343 Gap: Text ↔ Icon (px)Inherit (main menu) Icon/Small-image size (px)Inherit (main menu)Image styleImage curve (px)Inherit (main menu) Image ratio (auto-crop)InheritEach item spacingPadding (px)Inherit Margin (px)Inherit 4Each item spacingSub menu containerBackground (BG)Is TransparentBG Color#FAFAFAShadowApply drop shadowOthersMin height (px)Default Curve (px)Default Divider color#EEEEEEAdvanced display settingsInteractionsNavigation IconsAnimationDividerZ-IndexCSSJSIcons -
Cuộn xuống khối Sub menu container để chỉnh khung bao quanh cả bảng menu con:
- Background (BG): chọn màu nền cho bảng ở BG Color. Mặc định ô này có màu xám rất nhạt
#fafafa, khác nhẹ với nền trắng của menu chính để bảng con tách thành một lớp riêng. Bảng menu con không hỗ trợ ảnh nền. Nếu muốn làm nền trong suốt, bạn bật Is Transparent — riêng Mobile Menu không có nút này. - Shadow: bật Apply drop shadow để tạo bóng đổ cho bảng menu con. Mục này không hiện ở Mobile Menu vì khung trượt không có cạnh ngoài để đổ bóng.
- Others: chỉnh chiều cao tối thiểu ở Min height (px), độ bo góc bảng ở Curve (px) và màu đường kẻ ngăn cách giữa các mục con ở Divider color.
DesignPaletteMain menuSub menuLevel 2-3 — The dropdown interface that expands on tap, and each item within it.Sub menu itemText styleText Color#434343 Text Size (px)Default: 14px Text TransformInherit (main menu) Font WeightDefault Font FamilyGoogle fonts Description ColorInherit Description Size (px)InheritIcon/Small-image StyleFont icon color#434343 Gap: Text ↔ Icon (px)Inherit (main menu) Icon/Small-image size (px)Inherit (main menu)Image styleImage curve (px)Inherit (main menu) Image ratio (auto-crop)InheritEach item spacingPadding (px)Inherit Margin (px)InheritSub menu containerBackground (BG)Is TransparentBG Color#FAFAFAShadowApply drop shadowOthersMin height (px)Default Curve (px)Default Divider color#EEEEEE5Khung bảng conAdvanced display settingsInteractionsNavigation IconsAnimationDividerZ-IndexCSSJSIcons - Background (BG): chọn màu nền cho bảng ở BG Color. Mặc định ô này có màu xám rất nhạt
-
Bấm Save ở góc trên để lưu menu, rồi mở cửa hàng và bấm vào một mục cha để xem bảng menu con.
Ô nào lấy theo menu chính, ô nào dùng giá trị riêng?
Bạn không cần đoán mà chỉ cần nhìn dòng chữ mờ bên trong từng ô:
- Các ô có chữ mờ Inherit (main menu) sẽ tự lấy theo cài đặt của menu chính nếu bạn để trống, ví dụ như khoảng cách giữa chữ và icon, cỡ icon hay độ bo góc ảnh.
- Các ô đã điền sẵn giá trị riêng như màu chữ, màu icon, màu nền bảng và màu đường kẻ sẽ không lấy theo cấp 1. Những ô này chỉ đổi khi bạn tự sửa trong thẻ Sub menu hoặc chọn lại Palette.
- Riêng ô Text Size khi để trống sẽ luôn dùng cỡ 14px, không lấy theo cỡ chữ của menu chính.
Các cài đặt khác của menu con nằm ở đâu?
- Muốn chia menu con thành nhiều cột, ghim mục hoặc thêm đường kẻ phân cách giữa các mục, bạn xem bài Chia cột, kẻ phân cách và ghim mục trong menu con.
- Muốn chỉnh độ dày, nét đứt hoặc độ dài ngắn của đường kẻ cho toàn bộ menu, bạn vào bước Configure rồi mở mục Divider. Thẻ Sub menu chỉ dùng để đổi màu đường kẻ.
- Muốn chỉnh mũi tên mở rộng và hiệu ứng khi bảng menu con mở ra, bạn xem bài Mũi tên, nút đóng và hiệu ứng mở menu.
Câu hỏi thường gặp
Sao tôi đổi màu menu chính rồi mà menu con vẫn như cũ?
Hai phần này dùng bộ cài đặt tách riêng. Bạn cần mở thẻ Sub menu rồi chỉnh lại Text Color, Font icon color hoặc BG Color tại đó. Nếu muốn đổi đồng bộ cả hai cùng lúc, bạn chọn một Palette.
Sao tôi đã đổi nền ở Main menu mà nền menu con vẫn màu trắng?
Màu nền của menu chính và màu nền của bảng menu con nằm ở hai ô khác nhau. Lúc nãy bạn mới chỉnh nền của menu chính. Bạn hãy chuyển sang thẻ Sub menu, kéo xuống phần Background (BG) và đổi màu ở ô BG Color.
Sao tôi không thấy mục chỉnh bóng đổ trong Sub menu?
Do menu bạn đang mở là Mobile Menu. Loại menu này không có mục Shadow ở menu con, còn các loại menu khác đều có.
Làm sao để đổi đường kẻ sang nét đứt hoặc nét chấm thay vì nét liền?
Thẻ Sub menu chỉ cho phép đổi màu đường kẻ. Để đổi kiểu nét và độ dài đường kẻ, bạn bấm sang bước Configure trên thanh bước rồi mở mục Divider.
Sao chữ ở menu con vẫn là 14px dù tôi đã chỉnh chữ menu chính nhỏ hơn?
Khi ô Text Size trong thẻ Sub menu để trống, chữ của menu con luôn nhận cỡ mặc định là 14px. Bạn hãy nhập trực tiếp cỡ chữ mong muốn vào ô này.
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.