Khung menu — chiều cao, nền, bóng, bo góc

Khung menu là phần nền bao quanh các mục menu, ví dụ như thanh Tab Bar hoặc bảng danh sách mở ra khi khách bấm vào một mục.

Bạn chỉnh phần khung này ở bước Design, trong khối Main menu container của thẻ Main menu và khối Sub menu container của thẻ Sub menu. Nếu muốn chỉnh khoảng trống trong và ngoài khung như margin hay padding, bạn xem bài Khoảng cách trong và ngoài. Các ô dưới đây giống nhau trên Shopify, Wix và mọi website khác.

Chỉnh chiều cao thanh menu

Bạn vào thẻ Main menu › Main menu container › Layout.

Design

PaletteMain menuSub menu

Main menu item

Text styleText Color#000000 Text Size (px)12 Text TransformDefault Font WeightDefault Font FamilyRoboto Description ColorInherit (opacity 0.6) Description Size (px)Inherit (70%)

Icon/Small-image StyleFont icon color#000000 Gap: Text ↔ Icon (px)2 Icon/Small-image size (px)22

Image styleImage curve (px)0 Image ratio (auto-crop)Unchanged

Each item spacingPadding (px)Inherit (top right bottom left) Margin (px)Inherit (top right bottom left)

Main menu container

LayoutMenu height (px)50 Min height (px)Default

Container spacingMarginPaddingTop · Right · Bottom · Left

ShadowApply drop shadow

Background (BG)Is TransparentBG Color#FFFFFF BG ImageSelect

OthersCurve (px)0 Badge color#FF0000

Advanced display settingsInteractionsNavigation IconsAnimationDividerZ-IndexCSSJSIcons

Ô trong app	Tác dụng	Mặc định khi tạo mới
Menu height (px)	Đặt chiều cao cho thanh menu.	50
Min height (px)	Giữ chiều cao tối thiểu để thanh menu không bao giờ co thấp hơn mức này.	Để trống: Inherit (px)

Ô Menu height (px) có ở Tab Bar, Floating Button, Desktop Mega Menu, Mobile Mega Menu và Icon Menu. Ô Min height (px) cũng có ở các menu này, trừ Icon Menu. Riêng Mobile Menu không có khối Layout vì danh sách mục cấp 1 đã tự trải kín khung menu.

Khi nào cần chỉnh: nếu thấy thanh Tab Bar hơi cao làm che bớt nội dung trang thì bạn giảm Menu height (px) xuống, còn muốn khách bấm ngón tay thoải mái hơn thì tăng số này lên.

Chỉnh nền, bóng đổ và bo góc cho khung menu chính

Bạn vào thẻ Main menu › Main menu container, kéo xuống các khối Background (BG), Shadow và Others. Cả 6 loại menu đều có phần này, trừ vài điểm khác biệt ghi ở cuối mục.

Design

PaletteMain menuSub menu

Main menu item

Text styleText Color#000000 Text Size (px)12 Text TransformDefault Font WeightDefault Font FamilyRoboto Description ColorInherit (opacity 0.6) Description Size (px)Inherit (70%)

Icon/Small-image StyleFont icon color#000000 Gap: Text ↔ Icon (px)2 Icon/Small-image size (px)22

Image styleImage curve (px)0 Image ratio (auto-crop)Unchanged

Each item spacingPadding (px)Inherit (top right bottom left) Margin (px)Inherit (top right bottom left)

Main menu container

LayoutMenu height (px)50 Min height (px)Default

Container spacingMarginPaddingTop · Right · Bottom · Left

ShadowApply drop shadow

Background (BG)Is TransparentBG Color#FFFFFF BG ImageSelect

OthersCurve (px)0 Badge color#FF0000

Advanced display settingsInteractionsNavigation IconsAnimationDividerZ-IndexCSSJSIcons

Khối Background (BG)

Ô trong app	Tác dụng	Mặc định khi tạo mới
Is Transparent	Làm nền menu trong suốt để lộ phần trang web phía sau. Khi bạn bật công tắc này, hai ô chọn màu và ảnh nền sẽ tạm ẩn đi nhưng không mất cài đặt cũ, tắt công tắc là hiện lại.	Tắt
BG Color	Đổi màu nền. Trong bảng chọn màu có sẵn thanh kéo độ trong suốt nếu bạn muốn làm nền hơi mờ.	#FFFFFF
BG Image	Dùng ảnh làm nền. Bạn bấm Select để chọn ảnh từ thư viện, hoặc bấm dấu × để xóa ảnh đang dùng. Sau khi chọn ảnh, thanh Opacity sẽ hiện ra để bạn chỉnh độ đậm nhạt của ảnh.	Trống

Khối Shadow

Ô trong app	Tác dụng	Mặc định khi tạo mới
Apply drop shadow	Tạo bóng đổ quanh khung để menu tách nổi lên khỏi mặt trang. Bóng đổ rất hợp với Tab Bar, nút nổi và các bảng menu thả xuống.	Bật

Khối Others

Ô trong app	Tác dụng	Mặc định khi tạo mới
Curve (px)	Bo tròn góc khung menu. Bạn bấm vào ô để chọn mức có sẵn hoặc tự gõ số: 0 là góc vuông, 500 là bo tròn hẳn hai đầu.	0
Badge color	Đổi màu nền của nhãn badge gắn trên các mục menu. Nếu muốn xem cách gắn nhãn này, bạn đọc bài Icon, ảnh và badge.	#FF0000
Hide all texts	Ẩn toàn bộ tên mục trên thanh menu, chỉ giữ lại icon.	Tắt

Điểm khác nhau giữa các loại menu:

• Icon Menu không có khối Background (BG).
• Mobile Menu không có công tắc Is Transparent, nhưng bạn vẫn chỉnh được BG Color và BG Image.
• Công tắc Hide all texts chỉ có ở Tab Bar và Floating Button.

Khi nào cần chỉnh:

• Muốn menu đồng bộ với màu thương hiệu: bạn đổi màu ở BG Color, hoặc đổi nhanh cả bộ màu bằng tính năng Palette.
• Muốn thanh Tab Bar trông gọn và nổi trên mặt trang: tăng số Curve (px) để bo tròn góc và bật Apply drop shadow.
• Muốn thanh menu tối giản hết mức: bật Hide all texts để chỉ hiện hàng icon.

Menu height (px)

Ô nằm ở bước Design › thẻ Main menu › Main menu container › khối Layout. Ô này đặt chiều cao của mỗi mục cấp 1, nên thanh menu cao lên hay thấp xuống theo số bạn nhập.

• Đơn vị: px, bạn gõ số.
• Mặc định: ô hiện 50 khi menu chưa có số riêng. Menu dựng từ mẫu hoặc từ trình tạo thường có số riêng theo loại, ví dụ Desktop Mega Menu 40, Floating Button 52, Icon Menu 80.
• Áp cho: Tab Bar, Floating Button, Desktop Mega Menu, Mobile Mega Menu và Icon Menu, ở cấp 1. Mobile Menu không có ô này.
• Gói cần có: không đòi gói riêng.
• Trên cửa hàng: ở Tab Bar, số này là độ cao của thanh, tăng lên thì ngón tay bấm thoải mái hơn nhưng thanh che nhiều nội dung trang hơn. Ở Floating Button, nút nổi to ra hoặc nhỏ lại theo số này. Ở Desktop Mega Menu và Mobile Mega Menu, số này cũng là chiều cao tối thiểu của cả dải menu.
• Wix và website khác: giống Shopify.

Min height (px)

Ô nằm ngay dưới Menu height (px), trong khối Layout của Main menu container. Ô này đặt chiều cao tối thiểu cho từng mục cấp 1, hữu ích khi nội dung các mục cao thấp khác nhau mà bạn muốn chúng cao bằng nhau.

• Đơn vị: px. Để trống thì hiện Inherit (px), nghĩa là không ép mức tối thiểu nào.
• Mặc định: để trống.
• Áp cho: Tab Bar, Floating Button, Desktop Mega Menu và Mobile Mega Menu. Mobile Menu và Icon Menu không có ô này.
• Gói cần có: không đòi gói riêng.
• Trên cửa hàng: mỗi mục cấp 1 không bao giờ thấp hơn số bạn nhập. Số nhỏ hơn chiều cao thật của mục thì không thấy khác gì.
• Wix và website khác: giống Shopify.

Is Transparent (khối Background của Main menu)

Ô nằm ở Design › Main menu › Main menu container › khối Background (BG). Bật lên thì khung menu chính không còn nền, khách nhìn xuyên thấy phần trang phía sau menu. Kiểu này hợp khi bạn đặt menu đè lên ảnh banner đầu trang.

• Lựa chọn: công tắc Bật / Tắt, mặc định Tắt.
• Áp cho: Tab Bar, Floating Button, Desktop Mega Menu và Mobile Mega Menu. Mobile Menu không có công tắc này, Icon Menu không có cả khối Background (BG).
• Gói cần có: không đòi gói riêng.
• Trên cửa hàng: khi bật, menu bỏ luôn BG Color, BG Image và cả bóng đổ của khung, dù ô Apply drop shadow vẫn đang bật. Hai ô màu nền và ảnh nền ẩn đi trong app nhưng giá trị cũ vẫn được giữ, tắt công tắc là nền trở lại như cũ.
• Wix và website khác: giống Shopify.

BG Color

Ô nằm trong khối Background (BG) của Main menu container. Ô này đổi màu nền của khung menu chính.

• Lựa chọn: bấm vào ô để chọn màu hoặc gõ mã dạng #RRGGBB. Bảng chọn màu có thanh kéo độ trong suốt nếu bạn muốn nền hơi mờ.
• Mặc định: #FFFFFF (trắng).
• Áp cho: Tab Bar, Floating Button, Mobile Menu, Desktop Mega Menu và Mobile Mega Menu. Icon Menu không có ô này. Ở Mobile Menu, màu này là nền của cả ngăn kéo.
• Gói cần có: không đòi gói riêng.
• Chỉ hiện khi: công tắc Is Transparent đang tắt.
• Trên cửa hàng: nền khung menu đổi sang màu bạn chọn. Nếu cùng lúc có BG Image, màu này nằm dưới ảnh và lộ ra khi bạn kéo Opacity của ảnh xuống.
• Wix và website khác: giống Shopify.

BG Image

Ô nằm trong khối Background (BG) của Main menu container. Ô này dùng một bức ảnh làm nền khung menu.

• Cách dùng: bấm Select để chọn ảnh từ thư viện, bấm dấu × để bỏ ảnh. Sau khi chọn ảnh, thanh Opacity hiện ra.
• Mặc định: trống.
• Áp cho: Tab Bar, Floating Button, Mobile Menu, Desktop Mega Menu và Mobile Mega Menu. Icon Menu không có ô này.
• Gói cần có: không đòi gói riêng.
• Chỉ hiện khi: công tắc Is Transparent đang tắt.
• Trên cửa hàng: ảnh phủ kín khung menu, tự co dãn cho vừa. Kéo Opacity xuống thì ảnh nhạt dần vì màu BG Color phủ lên nhiều hơn, nên hãy đặt một màu nền hợp với ảnh.
• Wix và website khác: giống Shopify.

Apply drop shadow (khối Shadow của Main menu)

Ô nằm ở Design › Main menu › Main menu container › khối Shadow. Bật thì khung menu có bóng đổ nhẹ quanh viền, giúp menu tách nổi khỏi mặt trang.

• Lựa chọn: công tắc Bật / Tắt, mặc định Bật.
• Áp cho: cả 6 loại menu. Bóng đổ hợp nhất với Tab Bar, Floating Button và các bảng thả xuống.
• Gói cần có: không đòi gói riêng.
• Trên cửa hàng: tắt đi thì khung menu phẳng, không có bóng. Nếu Is Transparent đang bật thì khung menu không có bóng dù ô này bật.
• Wix và website khác: giống Shopify.

Curve (px) (khối Others của Main menu)

Ô nằm trong khối Others của Main menu container. Ô này bo tròn góc khung menu.

• Đơn vị: px. Bấm vào ô để chọn mức có sẵn hoặc tự gõ số: 0 là góc vuông, 500 là bo tròn hẳn hai đầu.
• Mặc định: 0.
• Áp cho: cả 6 loại menu.
• Gói cần có: không đòi gói riêng.
• Trên cửa hàng: góc khung menu tròn dần theo số bạn nhập, và các bảng menu con mở ra từ menu này cũng bo theo cùng mức. Muốn bảng con có độ bo riêng thì đặt ở ô Curve (px) của thẻ Sub menu.
• Wix và website khác: giống Shopify.

Badge color

Ô nằm trong khối Others của Main menu container. Ô này đổi màu của chấm badge gắn trên icon hoặc ảnh của mục menu. Cách gắn badge cho từng mục ở bài Icon, ảnh và badge.

• Lựa chọn: chọn màu hoặc gõ mã #RRGGBB.
• Mặc định: #FF0000 (đỏ).
• Áp cho: cả 6 loại menu, ở mọi mục có bật badge.
• Gói cần có: không đòi gói riêng.
• Trên cửa hàng: mọi chấm badge trong menu đổi sang màu này. Màu áp cho cả menu, không đặt riêng từng mục.
• Wix và website khác: giống Shopify.

Hide all texts

Ô nằm trong khối Others của Main menu container. Bật thì thanh menu chỉ còn icon, tên mục và mô tả bên dưới đều ẩn.

• Lựa chọn: công tắc Bật / Tắt, mặc định Tắt.
• Áp cho: chỉ Tab Bar và Floating Button, ở cấp 1.
• Gói cần có: không đòi gói riêng.
• Trên cửa hàng: khách chỉ thấy hàng icon, nên mục nào cũng cần có icon để khách biết bấm vào đâu. Chữ không bị xoá, tắt công tắc là tên mục hiện lại.
• Wix và website khác: giống Shopify.

Chỉnh khung cho bảng menu con

Bạn vào thẻ Sub menu › Sub menu container, tại đây cũng có 3 khối Background (BG), Shadow và Others. Phần này có ở Tab Bar, Floating Button, Mobile Menu, Desktop Mega Menu và Mobile Mega Menu. Riêng Icon Menu không có thẻ Sub menu.

Design

PaletteMain menuSub menu

Level 2-3 — The dropdown interface that expands on tap, and each item within it.

Sub menu item

Text styleText Color#434343 Text Size (px)Default: 14px Text TransformInherit (main menu) Font WeightDefault Font FamilyGoogle fonts Description ColorInherit Description Size (px)Inherit

Icon/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)Inherit

Each item spacingPadding (px)Inherit Margin (px)Inherit

Sub menu container

Background (BG)Is TransparentBG Color#FAFAFA

ShadowApply drop shadow

OthersMin height (px)Default Curve (px)Default Divider color#EEEEEE

Advanced display settingsInteractionsNavigation IconsAnimationDividerZ-IndexCSSJSIcons

Ô trong app	Tác dụng	Mặc định khi tạo mới
Is Transparent	Làm trong suốt nền của bảng menu con.	Tắt
BG Color	Đổi màu nền của bảng menu con.	#fafafa
Apply drop shadow	Tạo bóng đổ bao quanh bảng menu con.	Bật
Min height (px)	Giữ chiều cao tối thiểu cho bảng menu con.	Để trống: Inherit (px)
Curve (px)	Bo tròn góc của bảng menu con.	Để trống
Divider color	Đổi màu đường kẻ ngăn cách giữa các mục con trong danh sách.	#EEEEEE

Điểm khác nhau giữa các loại menu: bảng menu con không có ô chọn ảnh nền, và riêng Mobile Menu thì không có hai công tắc Is Transparent cùng Apply drop shadow.

Khi nào cần chỉnh: khi bạn muốn bảng menu con tách biệt rõ hơn hoặc tệp hẳn vào màu trang web thì đổi BG Color và bật/tắt Apply drop shadow. Nếu thấy vạch kẻ giữa các dòng quá đậm hoặc quá mờ, bạn chỉnh lại màu ở Divider color.

Is Transparent (thẻ Sub menu)

Ô nằm ở Design › Sub menu › Sub menu container › khối Background (BG). Bật thì bảng menu con không có nền, nhìn xuyên thấy phần trang phía sau.

• Lựa chọn: công tắc Bật / Tắt, mặc định Tắt.
• Áp cho: Tab Bar, Floating Button, Desktop Mega Menu và Mobile Mega Menu. Mobile Menu không có công tắc này.
• Gói cần có: không đòi gói riêng.
• Trên cửa hàng: bảng con bỏ luôn nền và bóng đổ. Mũi tên nhọn trỏ vào bảng con (nếu có) cũng ẩn theo. Chữ của bảng con vẫn giữ màu bạn đặt, nên hãy chọn màu chữ nhìn rõ trên nền trang phía sau.
• Wix và website khác: giống Shopify.

BG Color (thẻ Sub menu)

Ô nằm trong khối Background (BG) của Sub menu container. Ô này đổi màu nền của bảng menu con (cấp 2 và cấp 3).

• Lựa chọn: bấm vào ô để chọn màu hoặc gõ #RRGGBB.
• Mặc định: #FAFAFA (trắng hơi xám).
• Áp cho: Tab Bar, Floating Button, Mobile Menu, Desktop Mega Menu và Mobile Mega Menu. Icon Menu không có thẻ Sub menu.
• Gói cần có: không đòi gói riêng.
• Chỉ hiện khi: công tắc Is Transparent của Sub menu đang tắt.
• Trên cửa hàng: nền của bảng con đổi màu, còn nền menu chính không đổi.
• Wix và website khác: giống Shopify.

Apply drop shadow (thẻ Sub menu)

Ô nằm ở Design › Sub menu › Sub menu container › khối Shadow. Bật thì bảng menu con có bóng đổ quanh viền để tách khỏi trang.

• Lựa chọn: công tắc Bật / Tắt, mặc định Bật.
• Áp cho: Tab Bar, Floating Button, Desktop Mega Menu và Mobile Mega Menu. Mobile Menu không có ô này.
• Gói cần có: không đòi gói riêng.
• Trên cửa hàng: tắt đi thì bảng con phẳng, không bóng. Bóng của bảng con tách riêng với bóng của khung menu chính. Nếu Is Transparent của Sub menu đang bật thì bảng con không có bóng.
• Wix và website khác: giống Shopify.

Min height (px) (thẻ Sub menu)

Ô nằm trong khối Others của Sub menu container. Ô này đặt chiều cao tối thiểu cho từng dòng trong bảng menu con.

• Đơn vị: px. Để trống thì hiện Inherit (px).
• Mặc định: để trống.
• Áp cho: Tab Bar, Floating Button, Mobile Menu, Desktop Mega Menu và Mobile Mega Menu.
• Gói cần có: không đòi gói riêng.
• Trên cửa hàng: mỗi dòng ở cấp 2 và cấp 3 không thấp hơn số bạn nhập, nên danh sách thoáng hơn và dễ bấm hơn trên điện thoại.
• Wix và website khác: giống Shopify.

Curve (px) (thẻ Sub menu)

Ô nằm trong khối Others của Sub menu container. Ô này bo tròn góc bảng menu con.

• Đơn vị: px.
• Mặc định: để trống. Khi trống, bảng con bo góc theo ô Curve (px) của Main menu.
• Áp cho: Tab Bar, Floating Button, Mobile Menu, Desktop Mega Menu và Mobile Mega Menu.
• Gói cần có: không đòi gói riêng.
• Trên cửa hàng: bảng con bo góc theo số bạn nhập.
• Wix và website khác: giống Shopify.

Divider color

Ô nằm trong khối Others của Sub menu container. Ô này đổi màu đường kẻ ngăn giữa các mục con.

• Lựa chọn: chọn màu hoặc gõ #RRGGBB.
• Mặc định: #EEEEEE (xám nhạt).
• Áp cho: Tab Bar, Floating Button, Mobile Menu, Desktop Mega Menu và Mobile Mega Menu, ở cấp 2 và cấp 3. Icon Menu không có thẻ Sub menu.
• Gói cần có: không đòi gói riêng.
• Trên cửa hàng: các đường kẻ giữa các dòng trong bảng con đổi màu. Nếu bạn để trống ô này thì đường kẻ lấy màu đường kẻ chung của menu chính. Một mục có màu đường kẻ riêng thì màu riêng của mục đó được ưu tiên.
• Wix và website khác: giống Shopify.

Bảng tra nhanh

Ô trong app	Khung chính	Khung con	Loại menu
Menu height (px)	Có	Không	Không có ở Mobile Menu
Min height (px)	Có	Có	Ở khung chính: không có ở Icon Menu và Mobile Menu
Is Transparent	Có	Có	Không có ở Mobile Menu; ở khung chính cũng không có ở Icon Menu
BG Color	Có	Có	Ở khung chính: không có ở Icon Menu
BG Image	Có	Không	Không có ở Icon Menu
Apply drop shadow	Có	Có	Ở khung con: không có ở Mobile Menu
Curve (px)	Có	Có	Tất cả
Badge color	Có	Không	Tất cả
Hide all texts	Có	Không	Chỉ có ở Tab Bar và Floating Button
Divider color	Không	Có	Tất cả, trừ Icon Menu