English Tiếng Việt
Xem demo Bắt đầu
Đưa menu lên cửa hàng

Nút mở Mobile Menu

Mobile Menu mặc định luôn ẩn, khách phải bấm vào một nút trên màn hình thì menu mới trượt ra. Bạn tìm thấy các cài đặt trong bài này khi bấm nút Publish trên thanh công cụ, tại mục Where can shoppers open this menu?. Mục này chỉ hiện khi bạn đang mở một Mobile Menu.

Bài này giải thích chi tiết từng ô cài đặt của 3 cách mở: nút nổi, icon ≡ cạnh logo và sidebar cố định. Nếu bạn cần hướng dẫn chọn cách mở và thao tác từ đầu, hãy xem bài Đưa Mobile Menu lên cửa hàng.

Dùng nút nổi mở Mobile Menu

Cách này tạo một nút nằm nổi trên màn hình cửa hàng, khách bấm vào là Mobile Menu trượt ra. Vì nút hoạt động độc lập, bạn dùng được ngay cả khi theme không có sẵn nút ☰.

Đừng nhầm

Đây là nút nổi để mở Mobile Menu, nằm trong cửa sổ Publish của Mobile Menu. Nó khác với loại menu Floating Button (nút nổi chứa các lối tắt liên hệ).

Công tắc Show a floating button on this site

Ô này ở đâu, để làm gì: bước Publish › thẻ Floating button (trên Wix và website khác là Method 4). Gạt bật thì Navi+ vẽ một nút nổi độc lập trên cửa hàng, khách bấm là Mobile Menu trượt ra. Gạt tắt thì nút biến mất khỏi cửa hàng.

  • Lựa chọn: bật / tắt. Mặc định cho menu mới: tắt.
  • Áp cho: chỉ Mobile Menu, cả menu (không có cấp hay loại mục riêng). Không giới hạn theo gói.
  • Điều kiện: nút chỉ hiện trên cửa hàng khi menu đã được bật ở Publish. Menu còn tắt thì nút nổi cũng không hiện.
  • Khách thấy gì: bật lên thì trang có thêm một nút cố định trên màn hình, khách cuộn trang nút vẫn nằm đó. Khi menu mở, ngăn kéo phủ lên trên nút. Tắt đi thì nút bị gỡ khỏi trang.
  • Wix / website khác: cùng công tắc ở Method 4, cùng cửa sổ chỉnh.

Để bật nút, bạn bấm vào thẻ Floating button rồi gạt bật công tắc Show a floating button on this site đang tắt sẵn. Khi bật lên, thẻ sẽ tóm tắt hình dáng nút cùng vị trí hiện tại trên Mobile và Desktop. Bạn bấm Customize floating button để mở cửa sổ Floating button và chỉnh chi tiết. Mọi thay đổi đều hiện ngay ở khung xem trước bên cạnh. Chỉnh xong, bạn bấm Done để đóng cửa sổ rồi bấm lưu lại.

Chỉnh hình dáng nút

Bạn chọn một trong hai kiểu hiển thị ở mục Media:

Kiểu Các ô Mặc định
Icon + Text Icon: icon nằm trên nút. Chọn Blank nếu bạn chỉ muốn hiện chữ Icon ≡
  Button text: chữ hiện trên nút. Bấm biểu tượng quả địa cầu nếu muốn dịch chữ này sang ngôn ngữ khác Trống, Optional
  Background color: màu nền của nút #000000 màu đen
  Text/Icon color: màu của chữ và icon #FFFFFF màu trắng
  Curve (px): độ bo tròn góc nút Inherit, để trống
  Shadow: độ đậm của bóng đổ: None, Soft, Medium, Strong Soft
Image Image: dán link ảnh hoặc bấm Select để chọn ảnh từ thư viện Trống

Cách các ô này hoạt động trên thực tế:

  • Nếu bạn dùng kiểu Icon + Text mà bỏ trống cả icon lẫn chữ, Navi+ sẽ tự hiện icon ≡ để nút không bị tàng hình.
  • Kiểu Image chỉ hiện đúng tấm ảnh bạn chọn, không có màu nền hay viền đệm. Các ô chỉnh màu, bo góc và bóng đổ chỉ dành cho kiểu Icon + Text, không áp dụng cho ảnh.
  • Nếu bạn chọn kiểu Image nhưng chưa chọn ảnh, nút sẽ không hiện trên cửa hàng.
  • Khi bạn để trống ô Curve (px), Navi+ tự bo góc theo vị trí đặt nút: nút nằm ở đáy màn hình được bo tròn, còn nút dính sát cạnh chỉ bo nhẹ phần quay vào trong. Riêng ở 4 vị trí góc Corner, nút luôn vuông vức dù bạn nhập số bao nhiêu.

Media

Ô này ở đâu, để làm gì: đầu cửa sổ Floating button, hai nút chọn Icon + Text và Image. Bạn chọn nút của mình là một nút bấm có icon và chữ, hay chỉ là một tấm ảnh.

  • Lựa chọn: Icon + Text hoặc Image. Mặc định: Icon + Text.
  • Áp cho: chỉ Mobile Menu, không giới hạn theo gói.
  • Chỉ hiện khi: đã bật công tắc Show a floating button on this site.
  • Đổi ô này thì sao: chọn Icon + Text thì cửa sổ hiện các ô Icon, Button text, Background color, Text/Icon color, Curve, Shadow. Chọn Image thì các ô đó ẩn đi và chỉ còn ô Image.
  • Khách thấy gì: kiểu Image hiện đúng tấm ảnh, không nền, không bóng; kiểu Icon + Text hiện một nút có nền màu.

Icon

Ô này ở đâu, để làm gì: cửa sổ Floating button, ô vuông nhỏ hiện icon hiện tại. Bấm vào để mở bảng chọn icon, chọn icon nằm trên nút.

  • Lựa chọn: một icon trong bảng, hoặc Blank (không icon). Mặc định: icon ≡ (menu).
  • Áp cho: chỉ Mobile Menu, không giới hạn theo gói.
  • Chỉ hiện khi: Media = Icon + Text.
  • Khách thấy gì: icon nằm bên trái chữ trên nút. Chọn Blank và có nhập chữ thì nút chỉ hiện chữ. Chọn Blank mà bỏ trống luôn chữ thì Navi+ tự đặt lại icon ≡ để nút không bị tàng hình.

Button text

Ô này ở đâu, để làm gì: cửa sổ Floating button, ô chữ bên cạnh icon (gợi ý Optional). Chữ này hiện trên nút, ví dụ “Menu” hoặc “Danh mục”.

  • Lựa chọn: gõ tự do; bấm biểu tượng quả địa cầu cạnh nhãn để nhập bản dịch cho từng ngôn ngữ. Mặc định: trống.
  • Áp cho: chỉ Mobile Menu, không giới hạn theo gói.
  • Chỉ hiện khi: Media = Icon + Text.
  • Khách thấy gì: có chữ thì nút dài ra, chữ nằm cạnh icon; bỏ trống thì nút chỉ có icon. Cửa hàng nhiều ngôn ngữ hiện đúng bản dịch theo ngôn ngữ khách đang xem.

Image

Ô này ở đâu, để làm gì: cửa sổ Floating button, khi Media = Image. Dán link ảnh vào ô, hoặc bấm Select để chọn từ thư viện ảnh.

  • Lựa chọn: link ảnh (https://…). Mặc định: trống.
  • Áp cho: chỉ Mobile Menu, không giới hạn theo gói.
  • Chỉ hiện khi: Media = Image.
  • Khách thấy gì: đúng tấm ảnh nằm nổi trên cửa hàng, không nền, không bóng; bấm vào ảnh là mở menu. Chọn kiểu Image mà chưa có ảnh thì nút không hiện trên cửa hàng, nên nhớ chọn ảnh trước khi lưu.

Background color

Ô này ở đâu, để làm gì: cửa sổ Floating button, ô màu đầu tiên trong hàng. Đặt màu nền của nút.

  • Lựa chọn: chọn màu hoặc nhập mã #RRGGBB. Mặc định: #000000 (đen).
  • Áp cho: chỉ Mobile Menu, không giới hạn theo gói.
  • Chỉ hiện khi: Media = Icon + Text. Kiểu Image không dùng màu nền.
  • Khách thấy gì: nền nút đổi ngay. Nên chọn màu tương phản với Text/Icon color để chữ còn đọc được.

Text/Icon color

Ô này ở đâu, để làm gì: cửa sổ Floating button, ô màu kế bên Background color. Đặt màu của cả chữ lẫn icon trên nút.

  • Lựa chọn: chọn màu hoặc nhập mã #RRGGBB. Mặc định: #FFFFFF (trắng).
  • Áp cho: chỉ Mobile Menu, không giới hạn theo gói.
  • Chỉ hiện khi: Media = Icon + Text.
  • Khách thấy gì: chữ và icon cùng đổi sang màu đó (một màu cho cả hai, không chỉnh riêng được).

Curve (px)

Ô này ở đâu, để làm gì: cửa sổ Floating button, ô số ghi gợi ý Inherit. Chỉnh độ bo tròn góc của nút.

  • Lựa chọn: số từ 0 trở lên, đơn vị px. Mặc định: trống (Navi+ tự chọn dáng theo vị trí đặt nút).
  • Áp cho: chỉ Mobile Menu, không giới hạn theo gói; một giá trị dùng chung cho Mobile và Desktop.
  • Chỉ hiện khi: Media = Icon + Text.
  • Khách thấy gì: để trống thì nút nằm ở đáy màn hình có dạng viên thuốc (tròn đầu), còn nút dính sát cạnh chỉ bo hai góc quay vào trong. Nhập 0 thì nút vuông vức, nhập số lớn thì tròn dần. Ở 4 vị trí Corner nút luôn vuông, nhập số nào cũng vậy. Nút dính cạnh mà có Margin lớn hơn 0 (nút đã rời khỏi cạnh) thì được bo đủ bốn góc.

Shadow

Ô này ở đâu, để làm gì: cửa sổ Floating button, ô chọn cuối cùng trong hàng. Chỉnh độ đậm của bóng đổ dưới nút để nút nổi bật khỏi nền trang.

  • Lựa chọn: None (không bóng), Soft (nhẹ), Medium (vừa), Strong (đậm). Mặc định: Soft.
  • Áp cho: chỉ Mobile Menu, không giới hạn theo gói.
  • Chỉ hiện khi: Media = Icon + Text.
  • Khách thấy gì: bóng mềm phía dưới nút, càng đậm càng tách khỏi nền. Nút nền sáng trên trang sáng nên chọn Medium hoặc Strong để thấy rõ.

Chọn vị trí và hiệu ứng cuộn

Cửa sổ chia làm hai khung riêng cho Mobile và Desktop. Mỗi khung đều có các mục sau:

Ô Tác dụng Mặc định
Display Bật hoặc tắt nút trên thiết bị đó. Khi tắt, các ô bên dưới sẽ thu gọn lại nhưng vẫn giữ nguyên cài đặt cũ Bật cả hai
Vị trí Bấm chọn một ô trong lưới để đặt chỗ nằm cho nút Bottom-right
Margin (px) Khoảng cách từ nút đến mép màn hình Inherit, để trống
Scroll effects Hai tùy chọn ẩn hoặc hiện nút khi khách cuộn trang, xem chi tiết ở bảng dưới Tắt cả hai

Trong lưới vị trí, bạn có thể đặt nút vào các chỗ sau:

Nhóm vị trí Các lựa chọn
Nằm ở đáy Bottom-left, Bottom-center, Bottom-right
Dính sát cạnh Left edge, Right edge, Top edge, Bottom edge
Nằm sát góc Corner top-left, Corner top-right, Corner bottom-left, Corner bottom-right
Chỉ có trên điện thoại Top-left overlay: đặt nút đè lên đúng chỗ nút ☰ mặc định của theme

Trên máy tính không có vị trí Top-left overlay, nên khung Desktop có 11 vị trí, còn khung Mobile có 12 vị trí.

Mục Scroll effects có hai tùy chọn ẩn/hiện nút theo thao tác cuộn trang của khách:

Ô trên điện thoại Ô trên máy tính Kết quả trên cửa hàng
Hide when scrolling down on Mobile screen Hide when scrolling down on desktop screen Khách cuộn trang xuống thì nút tạm ẩn đi cho đỡ vướng màn hình
Only show after scrolling down on Mobile Only show after scrolling down on Desktop Lúc mới vào trang nút sẽ ẩn, chỉ hiện ra sau khi khách bắt đầu cuộn xuống

Nền tảng khác

Các bước ở trên dành cho Shopify — đây là cách mặc định.

Dùng lại nút ≡ có sẵn của theme

Nếu theme của bạn đã có nút ☰ riêng, bạn không cần thêm nút mới: chỉ cần bảo Navi+ “khi khách bấm nút đó thì mở menu của Navi+, đừng mở ngăn kéo của theme nữa”.

Use your existing menu icon

Ô này ở đâu, để làm gì: bước Publish › thẻ Use your existing menu icon (trên Wix và website khác là Method 2, ô nhập chữ cho CSS selector). Bạn chỉ ra nút ☰ của theme, Navi+ gắn việc “mở Mobile Menu” vào chính nút đó.

  • Lựa chọn: một hoặc nhiều CSS selector (địa chỉ của nút trên trang), ngăn cách bằng dấu phẩy. Chưa biết selector thì dùng Navi+ Live để chỉ trực tiếp, xem bài Tìm chỗ đặt menu bằng Navi+ Live. Mặc định: trống.
  • Áp cho: chỉ Mobile Menu, không giới hạn theo gói.
  • Điều kiện: menu đã được bật ở Publish. Để trống thì không có nút nào được gắn.
  • Hậu tố thiết bị: (M) chỉ điện thoại, (D) chỉ máy tính, không hậu tố là cả hai. Ở bản Shopify, thẻ này không thêm hậu tố nên nút theo theme trên mọi thiết bị.
  • Khách thấy gì: bấm ☰ của theme thì Mobile Menu của Navi+ trượt ra, ngăn kéo gốc của theme không mở. Nếu theme thay lại nút này sau khi trang tải xong, Navi+ gắn lại tự động. Selector gõ sai (thiếu ngoặc, thừa dấu nháy) chỉ làm riêng selector đó bị bỏ qua, các selector còn lại vẫn chạy.
Khách bấm ☰ của theme
Mobile Menu của Navi+ trượt ra

Nền tảng khác

Các bước ở trên dành cho Shopify — đây là cách mặc định.

Chèn icon ≡ cạnh logo

Ở thẻ Add a ≡ icon next to your logo, Navi+ sẽ chèn thêm một icon ≡ nhỏ nằm sát cạnh logo cửa hàng. Khách bấm vào icon này là Mobile Menu mở ra. Cách này rất hợp khi bạn muốn mở Mobile Menu trên máy tính hoặc khi theme đang dùng không có sẵn nút ☰.

Add a ≡ icon next to your logo

Ô này ở đâu, để làm gì: bước Publish › thẻ Add a ≡ icon next to your logo (trên Wix và website khác là Method 3, ô nhập chữ). Navi+ chèn thêm một icon ≡ ngay cạnh logo (hoặc phần tử bạn chỉ định), khách bấm vào là Mobile Menu mở ra.

  • Lựa chọn: tick chọn thẻ rồi chỉnh Side, Color, Boxed (bảng bên dưới). Ở ô nhập chữ của Wix và website khác thì gõ theo cú pháp selector|color|boxed|side(device), nhiều dòng ngăn cách bằng dấu phẩy. Mặc định: trống, không chèn icon nào.
  • Áp cho: chỉ Mobile Menu, không giới hạn theo gói. Chọn nhiều cách mở cùng lúc được, ví dụ vừa icon cạnh logo vừa nút nổi.
  • Điều kiện: menu đã được bật ở Publish.
  • Khách thấy gì: một icon ≡ nhỏ hiện cạnh logo. Mặc định chỉ hiện trên máy tính (hậu tố (D)); thêm (M) hoặc bỏ hậu tố để hiện trên điện thoại. Ở bản Shopify, hậu tố này Navi+ tự thêm cho bạn.

Khi Navi+ tự nhận diện được chỗ đặt logo của theme, thẻ sẽ hiện 3 ô để bạn chỉnh:

Ô Tác dụng Mặc định
Side Đặt icon nằm bên trái (Left) hay bên phải (Right) logo Left
Color Màu của icon, nhập mã màu dạng #000 Trống, tự lấy màu theo theme
Boxed Bọc thêm một khung vuông quanh icon Tắt

Nếu Navi+ chưa tự tìm được logo, thẻ sẽ báo Not found yet kèm nút Find it in Live mode. Bạn bấm vào nút này để chỉ trực tiếp vị trí logo trên web theo hướng dẫn ở bài Tìm chỗ đặt menu bằng Navi+ Live.

Mặc định, icon cạnh logo chỉ hiện trên máy tính, nên cuối ô địa chỉ vị trí sẽ có sẵn ký hiệu (D).

Nền tảng khác

Các bước ở trên dành cho Shopify — đây là cách mặc định.

Hiện sẵn thành sidebar cố định trên máy tính

Thay vì ẩn đi chờ khách bấm, bạn có thể cho Mobile Menu hiện sẵn thành một thanh dọc cố định bên cạnh màn hình máy tính. Trong cửa sổ Publish, mục này hiển thị dòng nhắc: Fixed Sidebar: Display the menu as an always-visible sidebar on desktop.

Bạn không bật tính năng này ở trong Publish mà mở bước Configure, chọn hướng trượt là Fixed Sidebar, rồi gạt bật Display a fixed menu on desktop. Xem cách chỉnh chi tiết tại bài Mobile Menu: hướng trượt, độ rộng, cố định.

Tóm tắt nhanh 3 cách mở

Cách mở Tên công tắc / ô chỉnh Chỉnh ở đâu Mặc định
Nút nổi Show a floating button on this site Publish › thẻ Floating button › Customize floating button Tắt
Icon ≡ cạnh logo Side, Color, Boxed Publish › thẻ Add a ≡ icon next to your logo Left, màu theo theme, tắt khung
Sidebar cố định Display a fixed menu on desktop Tab Configure Xem bài hướng trượt

Bài liên quan

Bài này có giúp ích không?

Cần người xem cùng? Chat với chúng tôi trong app hoặc viết về [email protected] — gửi kèm địa chỉ cửa hàng và tên menu.