English Tiếng Việt
Xem demo Bắt đầu
Giao diện menu

CSS riêng, class dùng lại và font chữ

Bài này dành cho bạn nếu đã biết một chút CSS và muốn chỉnh những chi tiết mà thẻ Design chưa hỗ trợ. Nếu không rành về code, bạn vẫn chỉnh được hầu hết màu sắc, cỡ chữ và bố cục ngay trong các ô cài đặt có sẵn.

Khi nào cần viết CSS?

Bạn nên chỉnh bằng các ô cài đặt trong app trước vì đã có đủ màu sắc, cỡ chữ, khoảng cách và độ bo góc. Chỉ cần viết thêm CSS khi bạn muốn chỉnh sâu hơn, chẳng hạn:

  • Đổi cỡ chữ hoặc màu sắc riêng cho menu cấp 2 và cấp 3.
  • Bỏ nền xám của mục menu đang mở.
  • Biến một mục menu thành nút bấm bo tròn.

Điểm lợi là CSS viết trong Navi+ đi theo menu chứ không dính vào theme. Sau này bạn đổi sang theme khác thì kiểu dáng của menu vẫn giữ nguyên.

Trước khi bắt đầu

  • Mở menu cần sửa, bấm sang bước Configure rồi kéo xuống cuối trang. Bạn sẽ thấy các mục Reusable Classes (CSS), Custom CSS for this menu, Global CSS và hai mục JavaScript.
  • Bạn chỉ cần gõ thẳng code vào ô, không cần bọc trong thẻ style hay script vì Navi+ sẽ tự thêm.

Mỗi menu có một mã riêng dạng #SF-12345678. Khi bạn viết CSS, Navi+ tự gắn mã này vào đầu mỗi dòng để code chỉ tác động lên đúng menu đó, không làm lệch các phần khác trên cửa hàng.

  1. Ở bước Configure, kéo xuống mục Custom CSS for this menu.

  2. Gõ đoạn CSS vào ô. Dùng dấu & để chỉ chính menu đang sửa. Ví dụ, để đổi màu chữ của tất cả mục menu:

    & .name { color: #ffffff; }

  3. Bấm Save ở góc trên rồi mở cửa hàng để xem kết quả. Khung xem trước trong app đôi khi hiển thị khác với ngoài cửa hàng thật.

Navi+ sẽ tự thay dấu & bằng mã của menu như sau:

Bạn viết Navi+ hiểu là
& { background: red; } #SF-12345678 { background: red; }
& .name { color: #fff; } #SF-12345678 .name { color: #fff; }
ul.navigation { color: red; } #SF-12345678 ul.navigation { color: red; }
@media (max-width: 768px) { & { padding: 4px; } } Tương tự, nhưng chỉ áp dụng trên màn hình hẹp

Bạn có thể tra tên các thành phần của menu như .name, .icon, .inner… trong bài Tra cứu tên class CSS của menu.

Chú ý

Khối Global CSS nằm ngay dưới. Khối này không được bọc mã menu, nên CSS ở đó áp dụng cho cả cửa hàng. Chỉ dùng khi bạn muốn tác động ra ngoài menu.

Viết CSS cho từng mục menu

Mỗi mục menu đều có ô CSS riêng. Đoạn kiểu dáng này sẽ đi theo mục đó, kể cả khi bạn sao chép mục sang một menu khác.

  1. Ở bước Build Menu, bấm vào tên mục cần sửa để mở bảng Edit item.

  2. Bấm mở phần See more rồi chọn Advanced, tìm đến ô CSS.

  3. Gõ CSS vào ô. Ở đây, dấu & chỉ định chính mục menu bạn đang mở:

    & { background: #111; color: #fff; border-radius: 999px; padding: 6px 14px; }
.name { color: #fff; }

Trong ô này, bạn viết được theo ba cách:

  • Dùng & hoặc &:hover để chỉnh cả hàng của mục đó.
  • Dùng .name, .description, .icon i, .image img để chỉnh từng phần nằm bên trong mục.
  • Gõ thẳng thuộc tính như color: red; không có dấu ngoặc nhọn để áp trực tiếp lên mục. Cách viết cũ này vẫn chạy nhưng không dùng kèm với @media được.

Nếu bạn vừa viết CSS vừa đặt màu, viền hoặc đổ bóng ở các ô cài đặt giao diện của mục, hai bên có thể đè lên nhau làm CSS không hiện ra. Lúc này, bạn hãy xóa giá trị ở ô cài đặt tương ứng hoặc thêm !important vào cuối dòng CSS.

Ô Attributes nằm ngay bên cạnh chỉ dùng để gắn thêm thuộc tính HTML dạng data-... cho mục menu, không dùng để chỉnh giao diện.

Tạo class dùng chung cho nhiều mục

Nếu muốn 5 mục menu có kiểu dáng giống hệt nhau, bạn đừng chép lại đoạn CSS đó 5 lần. Hãy tạo một class chung rồi gắn cho từng mục.

  1. Ở bước Configure, tìm mục Reusable Classes (CSS) rồi bấm Add new class.

  2. Nhập tên vào ô Class name — bắt đầu bằng chữ cái và chỉ dùng chữ, số hoặc dấu gạch dưới như pill_dark. Bạn có thể ghi chú thêm vào ô Description, sau đó gõ code vào ô CSS Code, ví dụ background: #111; color: #fff;.

  3. Bấm Add.

  4. Quay lại mở Edit item của từng mục, vào phần Advanced rồi chọn tên class vừa tạo trong ô Class names (reusable). Lặp lại cho các mục còn lại.

Về sau khi muốn đổi kiểu dáng, bạn chỉ cần sửa lại class này ở một chỗ là tất cả các mục đều đổi theo. Với gói Starter, bạn chỉ xem được danh sách class có sẵn chứ chưa tạo mới được.

Thêm JavaScript cho menu

Chỉ mở khi bạn cần gọi hàm riêng từ menu

Mục Internal Navi. Javascript Functions dùng để khai báo các hàm bạn muốn gọi từ nơi khác, chẳng hạn khi khách bấm vào một mục menu. Mọi hàm viết ở đây đều nằm trong đối tượng Navi. Ví dụ, hàm yourFunc() sẽ được gọi bằng Navi.yourFunc().

Hàm ở đây không tự chạy khi trang tải xong mà chỉ chạy khi bạn gọi tới. Còn mục Global Javascript ngay bên dưới sẽ chạy trên toàn bộ cửa hàng mà không có lớp bọc riêng, nên bạn cần dùng cẩn thận giống như Global CSS.

Dùng font chữ riêng

Navi+ có sẵn nhiều font chữ của Google. Bạn chọn tại thẻ Design > Main menu > Font Family, mặc định là Roboto. Thẻ Sub menu cũng có ô Font Family riêng cho menu con; nếu bạn để trống thì menu con sẽ lấy theo font của menu chính.

Nếu muốn dùng font chữ không có trong danh sách, chẳng hạn font bạn đã mua và cài sẵn vào theme:

  1. Kiểm tra lại tên font đúng như cách theme đã khai báo, ví dụ Honey Salt.

  2. Sang bước Configure, dán dòng sau vào ô Custom CSS for this menu:

    & { font-family: "Honey Salt"; }

Theme của bạn phải nạp sẵn file font này trước, vì Navi+ chỉ gọi tên font ra dùng chứ không tự tải file font lên cửa hàng.

Một số mẫu CSS hay dùng

Bỏ nền xám của mục đang mở

Mặc định, mục menu trùng với trang khách đang xem sẽ có nền xám nhạt từ class navi-active. Nếu chỉ muốn bỏ nền xám ở menu hiện tại, bạn dán đoạn sau vào Custom CSS for this menu:

ul li.navi-active { background: initial; }

Nếu muốn bỏ nền xám trên tất cả menu Navi+ của cửa hàng, hãy dán vào Global CSS:

.naviItem ul li.navi-active { background: initial; }

Dán đoạn sau vào Custom CSS for this menu để ghim khung menu cấp 3 luôn bắt đầu từ sát mép trên cùng:

ul.children[menulevel="2"] li.child.is-parent.menu-expand { position: initial; }
ul.children[menulevel="2"] li.child.is-parent.menu-expand ul.children[menulevel="3"] { top: 0px; }

Đổi cỡ chữ riêng cho từng cấp menu

Dán đoạn sau vào Custom CSS for this menu và chỉnh lại số px theo ý bạn:

ul > li.item > .inner .name { font-size: 14px; }
ul.children[menulevel="2"] > li.child > .inner .name { font-size: 16px; }
ul.children[menulevel="3"] > li.child > .inner .name { font-size: 13px; }

Xử lý khi CSS không chạy như ý

Đã viết CSS nhưng menu không đổi

  • Kiểm tra lại xem đầu dòng đã có dấu & hoặc tên class nằm trong menu chưa. Nếu bạn chỉ viết ngắn gọn như .name { … }, đoạn code đó rất dễ bị quy tắc của theme đè mất.
  • Xem mục menu đó có đang điền sẵn màu, viền hay đổ bóng ở các ô cài đặt giao diện không. Nếu có, hãy xóa giá trị ở ô cài đặt hoặc thêm !important vào dòng CSS.
  • Mở cửa hàng thật để kiểm tra thay vì chỉ nhìn khung xem trước trong app. Nếu ngoài cửa hàng vẫn chưa cập nhật, bạn xem tiếp bài Đã sửa menu nhưng cửa hàng chưa đổi.

Viết CSS xong thì giao diện ngoài menu cũng bị đổi theo

Đó là do bạn đã dán code vào ô Global CSS. Hãy chuyển đoạn code đó lên ô Custom CSS for this menu và thêm dấu & ở đầu dòng.

Đã viết hàm JavaScript nhưng không thấy chạy

Hàm viết trong Internal Navi. Javascript Functions không tự chạy khi tải trang. Bạn cần gọi hàm đó bằng cú pháp Navi.tenHam() tại nơi muốn kích hoạt.

Nền tảng khác

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

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.