Các cài đặt trong bài này chỉ có ở Mobile Menu. Bạn mở chúng trong Configure (bước 3 ở thanh bên trái của Visual Editor): ở đầu cửa sổ có ba nút nhảy nhanh Mobile, Desktop và Slide-in direction. Thẻ Main menu Slide Direction nằm ở nút Slide-in direction; ô Menu width và Submenu Slide Direction nằm trong hai thẻ Display on mobile và Display on desktop.
Mobile Menu không có công tắc Show menu on mobile hay Show menu on desktop. Menu sẽ hiện ra tại nơi bạn gắn nút mở nó — xem cách gắn nút trong bài Đưa Mobile Menu lên cửa hàng.
Mẫu Mobile Menu nào có sẵn bố cục cố định bên cạnh hoặc chia hai cột thì thẻ Main menu Slide Direction (và nút Slide-in direction) bị ẩn, vì hướng trượt đã được mẫu định sẵn. Với mẫu chia hai cột, hai ô chọn cách mở menu con cũng bị ẩn.
Hướng trượt của menu chính
Main menu Slide Direction
Ở đâu: Configure → Slide-in direction → thẻ Main menu Slide Direction. Ô này chọn menu chính xuất hiện từ phía nào khi khách bấm nút mở.
Lựa chọn: một dãy 7 hình nhỏ (không có chữ), bấm vào hình bạn muốn thì khung xem trước đổi theo ngay. Mặc định cho menu mới là hình số 1, trượt từ trái.
Tính từ trái sang phải, từ trên xuống dưới, từng hình có tác dụng như sau:
| Số | Hướng | Khách thấy menu hiện ra thế nào |
|---|---|---|
| 1 | Từ trái — mặc định | Trượt vào từ mép trái màn hình |
| 2 | Từ phải | Trượt vào từ mép phải màn hình |
| 3 | Từ trên xuống | Xổ xuống từ mép trên màn hình |
| 4 | Từ dưới lên | Trượt lên từ mép dưới màn hình |
| 5 | Toàn màn hình | Mở bung phủ kín cả màn hình |
| 6 | Cửa sổ nổi | Hiện thành khung nổi giữa trang |
| 7 | Cố định bên trái — Fix on left | Nằm sẵn bên trái trang, không đóng lại |
Áp cho: chỉ Mobile Menu, mọi gói, cả Shopify, Wix và website khác.
Khách thấy gì khi đổi ô này:
- Trên điện thoại, mỗi hình đúng một kiểu xuất hiện như bảng trên.
- Trên máy tính, chỉ có hướng số 1 (từ trái) và số 2 (từ phải) là khác nhau. Các hướng 3, 4, 5, 6 chỉ đổi kiểu trượt trên điện thoại; còn trên máy tính chúng đều trượt từ trái vào.
- Hướng số 7 làm menu nằm cố định trên trang chứ không còn trượt ra vào. Hai công tắc ngay dưới đây quyết định cố định trên thiết bị nào.
Display a fixed menu on desktop
Ở đâu: ngay dưới dãy 7 hình của Main menu Slide Direction. Hai công tắc này chỉ hiện ra khi bạn chọn hình số 7; chọn hướng khác thì chúng biến mất.
Dùng để làm gì: trên máy tính, menu luôn nằm sẵn bên trái như một thanh bên và ẩn nút đóng. Nội dung trang web tự dịch sang phải đúng bằng độ rộng của menu.
Giá trị: bật hoặc tắt. Mặc định khi tạo menu mới là Bật. Bề ngang thanh menu chỉnh ở ô Menu width (desktop).
Áp cho: chỉ Mobile Menu đang chọn hướng số 7, mọi gói.
Khách thấy gì khi đổi ô này: tắt công tắc thì trên máy tính menu quay về kiểu bấm nút mới mở và trượt từ trái vào như bình thường.
Display a fixed menu on mobile
Ở đâu: cạnh công tắc trên, ô đầy đủ trong app là Display a fixed menu on mobile (use with caution). Cũng chỉ hiện khi chọn hình số 7.
Dùng để làm gì: ghim menu cố định bên trái cả trên điện thoại. Màn hình điện thoại hẹp nên thanh menu này sẽ chiếm mất một phần trang web, bạn cân nhắc kỹ trước khi bật.
Giá trị: bật hoặc tắt. Mặc định là Tắt.
Áp cho: chỉ Mobile Menu đang chọn hướng số 7, mọi gói.
Khách thấy gì khi đổi ô này: tắt công tắc thì trên điện thoại menu quay về kiểu bấm nút mới mở và trượt từ trái vào.
Độ rộng menu và menu con
Ba ô chỉnh độ rộng nằm trong hai thẻ Display on mobile và Display on desktop, bên trong khung nhỏ Menu width. Cả ba để trống (ô hiện chữ Inherit) thì menu dùng độ rộng mặc định.
Cách nhập số, chung cho cả ba ô:
- Trên điện thoại, bạn gõ
300,300pxhay80%đều được. - Trên máy tính, ô chỉ nhận đơn vị
px. Bạn gõ300hoặc300pxđều hiểu là 300 px.
Menu width (mobile)
Ở đâu: Configure → Mobile → thẻ Display on mobile → khung Menu width (ô ghi chú px or %). Ô đổi bề rộng ngăn kéo Mobile Menu trên điện thoại.
Giá trị: px hoặc %. Để trống thì menu rộng 90% bề ngang màn hình, tối đa 600 px. Khi bạn tự gõ độ rộng, giới hạn trần 600 px tắt đi: bạn gõ bao nhiêu, menu rộng đúng bấy nhiêu.
Áp cho: chỉ Mobile Menu, mọi gói.
Khách thấy gì khi đổi ô này: ngăn kéo menu trên điện thoại hẹp hơn hoặc rộng hơn đúng bằng số bạn nhập. Với menu cố định (hướng số 7) thì đây cũng là bề ngang thanh menu trên điện thoại.
Menu width (desktop)
Ở đâu: Configure → Desktop → thẻ Display on desktop → khung Menu width (ô ghi chú px). Ô đổi bề rộng ngăn kéo Mobile Menu trên máy tính.
Giá trị: chỉ px. Để trống thì menu rộng 360 px.
Áp cho: chỉ Mobile Menu, mọi gói.
Khách thấy gì khi đổi ô này: ngăn kéo menu trên máy tính rộng đúng số bạn nhập, và các dòng bên trong tự giãn theo. Với menu cố định (hướng số 7) thì đây là bề ngang thanh menu bên trái.
Submenu width (desktop)
Ở đâu: Configure → Desktop → thẻ Display on desktop → khung Menu width, ô thứ hai bên phải Menu width (có dấu thông tin nhỏ giải thích điều kiện).
Giá trị: chỉ px. Để trống thì bảng cấp con dùng độ rộng mặc định.
Chỉ có tác dụng khi cả hai điều kiện cùng đúng: Submenu Slide Direction (Mobile) chọn Top-down expand, và Submenu Slide Direction (Desktop) chọn hình số 2 — mở sang bên cạnh. Ở các kiểu mở khác, ô này không làm đổi độ rộng menu con.
Áp cho: chỉ Mobile Menu, mọi gói.
Khách thấy gì khi đổi ô này: bảng menu con mở bên cạnh menu chính trên máy tính rộng hơn hoặc hẹp hơn đúng số bạn nhập.
Cách mở menu con
Submenu Slide Direction (Mobile)
Ở đâu: Configure → Mobile → thẻ Display on mobile, ngay dưới khung Menu width. Ô chỉnh cách menu con hiện ra khi khách bấm vào một mục cha trên điện thoại.
Lựa chọn: 2 hình để chọn.
| Số | Tên trong app | Khách thấy menu con mở thế nào |
|---|---|---|
| 1 | Top-down expand — mặc định | Xổ thẳng xuống ngay dưới mục vừa bấm |
| 2 | Slide-in from right | Trượt ngang từ bên phải đè lên danh sách cũ |
Áp cho: chỉ Mobile Menu, mọi gói. Mẫu Mobile Menu chia hai cột thì ô này bị ẩn.
Ảnh hưởng tới ô khác: chọn Top-down expand thì hình số 4 của Submenu Slide Direction (Desktop) bị khóa; ô Submenu width (desktop) cũng chỉ có tác dụng khi ô này là Top-down expand.
Submenu Slide Direction (Desktop)
Ở đâu: Configure → Desktop → thẻ Display on desktop, dưới cụm For desktop only. Ô chỉnh cách menu con mở trên máy tính.
Lựa chọn: 4 hình, mặc định là hình số 1.
| Số | Khách thấy menu con mở thế nào |
|---|---|
| 1 — mặc định | Xổ thẳng xuống ngay dưới mục vừa bấm |
| 2 | Mở bung sang bên cạnh menu chính — Left-Right |
| 3 | Hiện thành khung nổi có đổ bóng, giống menu khi bấm chuột phải |
| 4 | Trượt ngang từ bên phải vào |
Áp cho: chỉ Mobile Menu, mọi gói. Mẫu chia hai cột thì ô này bị ẩn.
Chỉ chọn được hình số 4 khi Submenu Slide Direction (Mobile) đang là Slide-in from right. Nếu đang dùng hình số 4 mà bạn đổi điện thoại sang Top-down expand, app tự chuyển máy tính về hình số 1 và hiện thông báo cho bạn biết.
Khách thấy gì khi đổi ô này: chỉ ảnh hưởng máy tính, mỗi hình đúng một kiểu mở như bảng trên. Hình số 2 là kiểu duy nhất cho phép chỉnh độ rộng bảng con bằng Submenu width (desktop).
Bảng tóm tắt nhanh
| Ô trong app | Dùng để làm gì | Mặc định |
|---|---|---|
| Main menu Slide Direction | Chọn 1 trong 7 hướng xuất hiện của menu chính | Hình 1 — trượt từ trái |
| Display a fixed menu on desktop | Ghim menu cố định bên trái trên máy tính, chỉ hiện khi chọn hướng 7 | Bật |
| Display a fixed menu on mobile | Ghim menu cố định bên trái trên điện thoại, chỉ hiện khi chọn hướng 7 | Tắt |
| Menu width — điện thoại | Chỉnh độ rộng menu trên điện thoại bằng px hoặc % |
90%, tối đa 600 px |
| Menu width — máy tính | Chỉnh độ rộng menu trên máy tính bằng px |
360 px |
| Submenu width — máy tính | Chỉnh độ rộng menu con trên máy tính bằng px khi mở sang cạnh |
Mặc định |
| Submenu Slide Direction (Mobile) | Chọn kiểu mở menu con trên điện thoại: xổ xuống hoặc trượt ngang | Top-down expand |
| Submenu Slide Direction (Desktop) | Chọn kiểu mở menu con trên máy tính: xổ xuống, mở sang cạnh, khung nổi hoặc trượt ngang | Hình 1 — xổ 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.
Các cài đặt này giống hệt Shopify.
Các cài đặt này giống hệt Shopify.