Trên máy tính — rê chuột và hiệu ứng hover

Bạn tìm các cài đặt này tại Configure › Display on desktop › For desktop only. Phần này chỉ áp dụng khi khách xem web trên máy tính có chuột, còn trên điện thoại khách vẫn chạm tay như bình thường.

Mục này có trong Tab Bar, Floating Button, Desktop Mega Menu và Mobile Menu. Hai loại Mobile Mega Menu và Icon Menu không có.

Mở menu con khi rê chuột

Trong thẻ Submenu (Level 2,3), bạn chọn cho khách mở menu con bằng cách rê chuột hay phải bấm vào. Các ô chỉnh độ nhạy, cách đổi Tab và hiệu ứng rê chuột cũng nằm ngay bên dưới.

yourshop.com

STOREHomeShopCollectionsAboutContact

ClothingT-shirtsHoodiesJacketsPantsShoesSneakersBootsSandalsSlippersAccessoriesBagsHatsSocksBeltsNew seasonMenu con mở khi rê chuột vào Shop

Open submenu on hover instead of click

• Bật ô này thì khách chỉ cần đưa chuột vào mục menu cấp 1 là menu con tự mở ra. Tắt đi thì khách phải bấm chuột mới mở.
• Khi tạo menu mới, ô này mặc định tắt.
• Bạn nên bật nếu shop có nhiều danh mục và muốn khách đưa chuột tới đâu là xem được ngay tới đó. Nếu sợ khách chỉ vô tình lướt chuột ngang qua mà menu cứ bung ra che màn hình, bạn hãy giữ tắt.

Hover sensitivity

• Đây là thanh trượt 5 mức độ nhạy, chỉ hiện ra khi bạn đã bật Open submenu on hover instead of click ở trên. Mức càng thấp thì menu mở ra càng nhanh.
• 5 mức từ nhanh đến chậm gồm: Instant · Sensitive · Default · Relaxed · Slow.
• Mặc định là Default ở mức giữa. Các menu cũ chưa từng chỉnh mục này cũng tự chạy theo mức Default.
• Nếu khách lướt chuột qua mà menu hay mở nhầm, bạn kéo thanh trượt về Relaxed hoặc Slow. Ngược lại, muốn vừa chạm chuột là mở ngay tức thì, bạn kéo về Instant.

Tab

Ô này chỉ có ở Desktop Mega Menu, dùng để chọn cách khách chuyển qua lại giữa các Tab bên trong bảng menu. Có 3 lựa chọn:

Lựa chọn	Khách làm gì để đổi Tab
Follow submenu	Đi theo cài đặt mở menu con ở trên: đang bật rê chuột thì rê vào là đổi Tab, đang tắt thì phải bấm
Hover	Đưa chuột vào Tab là chuyển ngay
Click	Phải bấm chuột vào Tab mới chuyển

• Menu mới tạo sẽ mặc định chọn Follow submenu.
• Với menu cũ chưa từng chỉnh mục này, bạn sẽ thấy dòng chữ “Not set yet”: lúc đó Tab xếp ngang ở trên sẽ đổi khi bấm chuột, còn Tab xếp dọc bên cạnh sẽ đổi khi rê chuột. Bạn chỉ cần bấm chọn một trong ba nút trên là menu sẽ chạy theo lựa chọn mới.
• Trên màn hình cảm ứng, khách luôn chạm tay để đổi Tab dù bạn chọn kiểu nào.

Đổi hiệu ứng khi rê chuột vào mục menu

Thẻ Hover effect giúp bạn chỉnh mục menu thay đổi thế nào khi khách đặt con trỏ chuột lên đó. Ngay trong thẻ có khung Preview, bạn cứ đưa chuột vào các link mẫu để xem thử hiệu ứng.

Hiệu ứng chỉ chạy khi khách xem bằng máy tính (màn hình rộng hơn mốc điện thoại của menu đó), và chỉ với mục “có việc để làm”: mục có link thật hoặc mục mở được menu con. Tiêu đề nhóm, khoảng trống, đường kẻ, mục chưa gắn link đều đứng yên khi rê chuột qua.

Hover effect

• Ở đâu, để làm gì: bước Configure, bấm chip Desktop, kéo tới thẻ Hover effect trong khối For desktop only. Ô này chọn kiểu phản ứng của mục cấp 1 khi khách rê chuột lên: đổi màu nền hoặc hiện đường gạch chân.
• Lựa chọn: Default (background) (đổi nền) · Underline (gạch chân). Menu mới chọn sẵn Default (background).
• Áp cho: Tab Bar, Floating Button, Desktop Mega Menu, Mobile Menu, ở mọi mục có link hoặc có menu con (cấp 1 lẫn cấp con). Mobile Mega Menu và Icon Menu không có ô này. Mọi gói đều dùng được.
• Đổi ô này thì khách thấy gì: chọn Default (background) thì rê chuột vào mục sẽ đổi nền, chữ nhảy nhẹ. Chọn Underline thì nền mặc định khi rê chuột bị bỏ đi (trong suốt) và thay bằng một đường gạch dưới chữ. Hai nhóm ô bên dưới cũng đổi theo: chọn kiểu nào thì chỉ thấy nhóm ô của kiểu đó.
• Nền tảng khác: giống hệt Shopify, Wix và website khác.

Kiểu Default (background) — đổi màu nền

Ba ô dưới đây chỉ hiện khi Hover effect đang là Default (background).

Ô cài đặt	Tác dụng	Mặc định
Background color	Màu nền của mục menu khi đưa chuột vào	Inherit — lấy theo màu của menu
Text color	Màu chữ khi đưa chuột vào	Inherit — lấy theo màu của menu
Text animation	Chuyển động của chữ khi đưa chuột vào: Bounce up là chữ nhảy nhẹ lên, Slide X là chữ trượt ngang, None là đứng yên	Bounce up

Background color

• Ở đâu, để làm gì: thẻ Hover effect trong khối For desktop only (bước Configure, chip Desktop), ô đầu tiên khi chọn Default (background). Đặt màu nền của mục menu khi khách rê chuột lên.
• Giá trị: chọn màu bằng bảng màu hoặc dán mã màu. Mặc định để trống (hiện chữ Inherit): lúc đó Navi+ giữ hiệu ứng nền rê chuột mặc định của nó.
• Chỉ hiện khi: Hover effect = Default (background).
• Áp cho: Tab Bar, Floating Button, Desktop Mega Menu, Mobile Menu; mục có link hoặc có menu con. Mọi gói.
• Khách thấy gì: nguyên ô của mục đổi sang màu bạn chọn lúc rê chuột. Nếu mục là Card có ảnh nền thì ảnh nền vẫn giữ, chỉ màu nền đổi.
• Nền tảng khác: giống Shopify.

Text color

• Ở đâu, để làm gì: cạnh ô Background color, trong thẻ Hover effect. Đặt màu chữ của mục khi khách rê chuột lên.
• Giá trị: chọn màu; mặc định để trống (Inherit) thì chữ giữ nguyên màu cũ.
• Chỉ hiện khi: Hover effect = Default (background). (Khi chọn Underline có một ô Text color khác, xem bên dưới.)
• Áp cho: như Background color.
• Khách thấy gì: phần chữ của mục đổi màu lúc rê chuột, và thắng cả màu chữ riêng bạn đã đặt cho từng mục. Icon không đổi màu theo.
• Nền tảng khác: giống Shopify.

Text animation

• Ở đâu, để làm gì: hàng nút bấm cuối nhóm ô của kiểu Default (background). Chọn chữ chuyển động thế nào khi khách rê chuột lên.
• Lựa chọn: Bounce up (chữ nhảy nhẹ lên rồi về chỗ cũ) · Slide X (chữ nhích ngang một chút) · None (đứng yên). Menu mới chọn sẵn Bounce up.
• Chỉ hiện khi: Hover effect = Default (background).
• Áp cho: như Background color.
• Khách thấy gì: chuyển động rất nhẹ, chỉ chừng 2px và kéo dài khoảng 0,2 giây, nên khách thấy chữ “phản hồi” chứ không bị giật. Chọn None nếu bạn thích menu hoàn toàn tĩnh.
• Nền tảng khác: giống Shopify.

Kiểu Underline — hiện gạch chân

Bốn ô dưới đây chỉ hiện khi Hover effect đang là Underline.

Ô cài đặt	Tác dụng	Mặc định
Line color	Màu của đường gạch chân	Inherit — lấy theo màu của menu
Thickness	Độ dày đường gạch chân, tính bằng px	1
Text color	Màu chữ khi đưa chuột vào	Inherit — lấy theo màu của menu
Animation	Cách đường gạch chân hiện ra: None là hiện ngay, L → R là chạy từ trái sang phải, Fade là hiện dần lên, Center là mở rộng từ giữa ra hai bên	None

Line color

• Ở đâu, để làm gì: thẻ Hover effect trong khối For desktop only, ô đầu tiên khi chọn Underline. Đặt màu đường gạch chân.
• Giá trị: chọn màu; mặc định để trống (Inherit) thì đường gạch lấy đúng màu chữ hiện tại của mục.
• Chỉ hiện khi: Hover effect = Underline.
• Áp cho: Tab Bar, Floating Button, Desktop Mega Menu, Mobile Menu; mục có link hoặc có menu con. Mọi gói.
• Khách thấy gì: đường gạch nằm ngay dưới phần chữ (không kéo dài hết ô của mục), cách chữ vài px.
• Nền tảng khác: giống Shopify.

Thickness

• Ở đâu, để làm gì: ô giữa trong nhóm ô Underline. Đặt độ dày đường gạch chân.
• Đơn vị: px, gõ số nguyên (ví dụ 2). Mặc định 1. Để trống hoặc gõ không phải số thì dùng 1.
• Chỉ hiện khi: Hover effect = Underline.
• Áp cho: như Line color.
• Khách thấy gì: số càng lớn gạch càng dày. Gạch dày quá thì trông nặng, bạn nên thử trong khung Preview của thẻ rồi chọn.
• Nền tảng khác: giống Shopify.

Text color

• Ở đâu, để làm gì: ô thứ ba trong nhóm ô Underline. Đặt màu chữ khi khách rê chuột lên mục.
• Giá trị: chọn màu; mặc định để trống (Inherit) thì chữ giữ màu cũ.
• Chỉ hiện khi: Hover effect = Underline. (Đây là ô riêng, không dùng chung giá trị với ô Text color của kiểu Default (background).)
• Áp cho: như Line color.
• Khách thấy gì: chữ đổi màu cùng lúc đường gạch hiện ra, và thắng cả màu chữ riêng bạn đã đặt cho từng mục.
• Nền tảng khác: giống Shopify.

Animation

• Ở đâu, để làm gì: hàng nút bấm cuối nhóm ô Underline. Chọn đường gạch chân xuất hiện theo cách nào.
• Lựa chọn: None (hiện ngay, không chuyển động) · L → R (chạy từ trái sang phải) · Fade (hiện dần lên) · Center (mở từ giữa ra hai bên). Menu mới chọn sẵn None.
• Chỉ hiện khi: Hover effect = Underline.
• Áp cho: như Line color.
• Khách thấy gì: L → R và Center chạy chừng 0,25 giây, Fade mờ dần chừng 0,5 giây. Khi khách rê chuột vào mục con, chỉ mục con có gạch, mục cha không bị gạch thêm một đường nữa.
• Nền tảng khác: giống Shopify.

Tóm tắt nhanh các cài đặt

Ô trong app	Loại menu áp dụng	Mặc định
Open submenu on hover instead of click	Tab Bar, Floating Button, Desktop Mega Menu, Mobile Menu	Tắt
Hover sensitivity	4 loại menu trên, hiện ra sau khi bật mở menu bằng rê chuột	Default
Tab	Desktop Mega Menu	Follow submenu
Hover effect	Tab Bar, Floating Button, Desktop Mega Menu, Mobile Menu	Default (background)

Các cài đặt này giống hệt nhau trên Shopify, Wix và mọi nền tảng web khác. Tất cả các gói đều dùng được đầy đủ, không có ô nào bị khóa.