Bài này giúp bạn tra tên class CSS của từng thành phần trong menu để nhắm chọn cho chuẩn. Nếu chưa biết dán code vào đâu hoặc cách viết CSS trong app, bạn xem trước bài CSS riêng, class dùng lại và font chữ. Khi viết vào ô Custom CSS for this menu, bạn không cần gõ mã #SF-… vì Navi+ sẽ tự gắn thêm.
Trong các bảng bên dưới, cột độ ổn định cho bạn biết:
- Ổn định: thuộc phần khung cơ bản của menu, bạn yên tâm dùng lâu dài.
- Nội bộ: do Navi+ tự bật tắt khi menu chạy hoặc phục vụ một tính năng riêng. Các class này có thể đổi tên khi Navi+ cập nhật. Bạn vẫn dùng được, nhưng nhớ kiểm tra lại sau các đợt cập nhật app.
Cấu trúc các cấp trong menu
Menu được xếp theo từng lớp lồng vào nhau. Menu con cấp 2 và cấp 3 nằm ngay bên trong hàng của mục cha, phía sau phần nội dung của mục cha đó.
div.naviItemcả menu, mã #SF-… nằm ở đâyul.navigationdanh sách cấp 1li.item.level-1một mục cấp 1ul.children[menulevel=2]menu con cấp 2li.child.level-2một mục cấp 2ul.children[menulevel=3]menu con cấp 3Tra cứu class theo thành phần
Khung menu và mục menu
| Phần | Class | Ghi chú | Độ ổn định |
|---|---|---|---|
| Toàn bộ menu | .naviItem |
Nằm cùng phần tử chứa mã #SF-… trong thuộc tính id |
Ổn định |
| Danh sách mục cấp 1 | ul.navigation |
Mỗi menu chỉ có đúng một danh sách này | Ổn định |
| Mục menu cấp 1 | li.item.level-1 |
Có thêm is-parent-top nếu bên trong có menu con |
Ổn định |
| Mục menu cấp 2 và 3 | li.child.level-2, li.child.level-3 |
Có thêm is-parent nếu bên trong có menu con |
Ổn định |
| Khung menu con | ul.children[menulevel="2"], ul.children[menulevel="3"] |
Con số tương ứng với cấp của chính menu con đó | Ổn định |
| Hộp nội dung của mục | .inner, .inner-level1, .inner-level2, .inner-level3 |
Dùng .inner-levelN để nhắm đúng vào một cấp |
Ổn định |
| Mũi tên mở menu con | .arrow |
Thường nằm đầu tiên bên trong .inner |
Ổn định |
| Số lượng trên giỏ hàng | .cart_count |
Chỉ hiện ở mục giỏ hàng có bật đếm số lượng | Ổn định |
| Cột chứa chữ | .info, .flexcol |
Bọc quanh tên mục và dòng mô tả | Ổn định |
| Tên mục menu | .name |
Dòng chữ chính của mục | Ổn định |
| Dòng mô tả nhỏ | .description |
Chỉ có khi bạn điền mô tả cho mục | Ổn định |
Icon và hình ảnh
| Phần | Class | Ghi chú | Độ ổn định |
|---|---|---|---|
| Icon | .icon, .icon i |
Icon dạng chữ. Bạn đổi cỡ và màu qua .icon i |
Ổn định |
| Hình ảnh | .image-border, .image-box, .image, .image img |
Khi mục đã có ảnh thì icon sẽ không hiện | Ổn định |
Class gắn riêng trên từng mục
| Phần | Class | Ghi chú | Độ ổn định |
|---|---|---|---|
| Mục có gắn link | .has-url |
Nội bộ | |
| Mục có đường kẻ phân cách | .item_divider |
Nội bộ | |
| Mục nhấn mạnh | .item_primary |
Mục được bạn đặt làm nổi bật | Nội bộ |
| Tab hoặc khoảng trống | .kind-tab-slide, .kind-blank-space |
Áp dụng cho mục kiểu tab hoặc khoảng trống | Nội bộ |
| Class của bạn | Tên class tạo ở Reusable Classes (CSS) | Gắn trên thẻ li của mục được chọn |
Ổn định |
| Class cho CSS riêng của mục | .naviicss-… |
Navi+ tự thêm khi bạn viết CSS có selector trong ô CSS của mục. Bạn đừng gọi trực tiếp class này | Nội bộ |
Class theo loại menu và vị trí
Mỗi loại menu sẽ gắn thêm một class riêng vào .naviItem. Bạn dùng class này khi muốn viết CSS chỉ áp dụng cho một loại menu.
| Loại menu | Class trên .naviItem |
Độ ổn định |
|---|---|---|
| Tab Bar | STICKY_TABBAR |
Ổn định |
| Mobile Menu | CONTEXT_SLIDE |
Ổn định |
| Desktop Mega Menu | SECTION_DESKTOP_MEGAMENU |
Ổn định |
| Mobile Mega Menu | SECTION_MOBILE_MEGAMENU |
Ổn định |
| Icon Menu | SECTION_MOBILE_GRID |
Ổn định |
| Floating Button | STICKY_FAB_SUPPORT |
Ổn định |
Ví dụ, chỉ đổi cỡ chữ trong Tab Bar:
.STICKY_TABBAR .name { font-size: 11px; }
Class theo vị trí hiển thị
Vị trí bạn chọn ở bài Vị trí và khoảng cách lề của menu, chủ yếu dùng cho Tab Bar, cũng gắn thêm class vào .naviItem. Các loại menu khác đôi khi vẫn mang một vài class này theo vị trí mặc định.
| Class | Ý nghĩa |
|---|---|
mobile-bottom, mobile-top |
Điện thoại: nằm sát đáy hoặc sát đỉnh màn hình |
mobile-left-center, mobile-right-center |
Điện thoại: nằm giữa cạnh trái hoặc cạnh phải |
mobile-left-button, mobile-right-bottom |
Điện thoại: góc dưới trái hoặc góc dưới phải. Chữ button ở góc trái là tên thật của class, không phải lỗi gõ nhầm |
desktop-bottom-center-float, desktop-bottom-center, desktop-bottom-left, desktop-bottom-right, desktop-bottom-full, desktop-top-full |
Máy tính: các vị trí ở đáy và đỉnh màn hình |
desktop-left-top, desktop-right-top, desktop-left-full-top, desktop-left-full-center, desktop-right-full-top, desktop-right-full-center |
Máy tính: các vị trí dọc theo hai cạnh bên |
Các class vị trí này đều thuộc nhóm nội bộ.
Class khi khách thao tác trên menu
Navi+ tự bật hoặc tắt các class này khi khách tương tác với menu trên cửa hàng.
| Trạng thái | Class | Nằm ở | Độ ổn định |
|---|---|---|---|
| Mục trùng với trang đang xem | .navi-active |
Thẻ li của mục đó và cả các thẻ li cấp cha |
Ổn định |
| Menu con đang mở trên Mega Menu | .menu-expand, .menu-expand-level1 |
Thẻ li của mục cha |
Nội bộ |
| Khách đang rê chuột lên mục | .navi-hover-active |
Phần tử đang được rê chuột vào | Nội bộ |
| Đang mở cấp 2 hoặc 3 trên Mobile Menu trượt ngang | .navi-level2-open, .navi-level3-open |
.naviItem |
Nội bộ |
Ví dụ, bỏ màu nền xám của mục đang chọn:
ul li.navi-active { background: initial; }
Cách kiểm tra lại class trên cửa hàng
Tên class có thể khác nhau một chút giữa các phiên bản. Để xem chính xác class đang dùng trên cửa hàng của bạn:
- Mở trang cửa hàng thật, bấm chuột phải vào phần cần chỉnh trên menu rồi chọn Inspect.
- Nhìn các thẻ
livàdivbao quanh phần đó để xem những tên class đang có. - Nếu chưa thấy class xuất hiện, bạn xóa bộ nhớ đệm của theme rồi publish lại menu.
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 Shopify. Cấu trúc class của menu không đổi theo nền tảng.
Giống Shopify. Cấu trúc class của menu không đổi theo nền tảng.