English Tiếng Việt Français Deutsch 中文 日本語 Italiano Português Español
Xem demo Bắt đầu

Xuất bản trên Wix / Squarespace / Khác

Trên WordPress? Sử dụng plugin Naviplus Menu Builder thay vì nhúng thủ công bên dưới — không cần chỉnh sửa giao diện, đặt Mega Menu qua shortcode hoặc khối Gutenberg.

Trên Shopify? Cài đặt ứng dụng Shopify chuyên dụng — nó được tối ưu hóa cho nền tảng với các tùy chọn xuất bản tích hợp.

Trang này đề cập đến phương pháp nhúng mã thủ công, là con đường đúng cho Wix, Squarespace, Webflow, Magento, và các trang web tùy chỉnh được xây dựng bằng PHP, Node.js, hoặc HTML thuần. Bạn có các phương pháp triển khai sau:

1. Nhúng Navi+ vào Trang Web của Bạn

Phương pháp triển khai này phù hợp cho tất cả các loại menu mà Navi+ hiện hỗ trợ, bao gồm: Tabbar, Mega menu, Slide menu, FAB, và Grid menu. Mã này chỉ cần được sử dụng một lần cho tất cả các menu.

<!-- Chèn mã này vào <head> của trang web. (c) naviplus.io -->
<script>(window._navi_setting ||= []).push({
   token: "NAVI123456"
});</script>
&lt;script src="https://live.naviplus.app/start.js" async&gt;&lt;/script&gt;
<!-- Chèn mã này vào <head> của trang web -->

Câu hỏi thường gặp (FAQ)

Mã token là gì?

Mỗi tài khoản Navi+ được gán một mã token duy nhất. Bạn có thể xem và sao chép mã token này trực tiếp từ tiêu đề ứng dụng. Mã token được sử dụng để xuất bản menu của bạn một cách an toàn.

https://live.naviplus.app/start.js là gì?

Đây là URL cố định của Navi+ chứa logic khởi tạo của ứng dụng. Mã này nhẹ (khoảng 4KB), cho phép nó tải nhanh trên hầu hết các thiết bị và điều kiện mạng. Nó được cung cấp qua Cloudflare và BunnyCDN để đảm bảo hiệu suất toàn cầu ổn định và tương thích đáng tin cậy với các trình duyệt hiện đại.

Sử dụng phương pháp tải không đồng bộ cũng có nghĩa là nó không ảnh hưởng đến quá trình tải trang web.

Mã nhúng này có làm chậm trang web của tôi không?

Mã dưới đây cực kỳ nhẹ và có thể được chèn vào trang web của bạn mà không ảnh hưởng đến tốc độ (chỉ mất khoảng 100-200ms cho lần tải đầu tiên và 0ms cho các lần tải tiếp theo), trải nghiệm của khách hàng, hoặc điểm SEO.

Nơi tốt nhất để chèn đoạn mã này là đâu?

Trong phần đầu (hoặc càng sớm càng tốt). Tại sao? Trang web sẽ tải tài nguyên theo thứ tự để hiển thị giao diện. Đặt Navi+ sớm nhất trong mã HTML sẽ giúp menu của bạn sẵn sàng hiển thị càng sớm càng tốt bằng cách chờ cho đến khi các điều kiện được đáp ứng, sau đó menu sẽ ngay lập tức xuất hiện. Điều này cải thiện trải nghiệm người dùng.

Làm thế nào tôi có thể biết mã này đã được nhúng thành công trên trang web của tôi chưa?

Có hai cách:

Phương pháp 1 (dành cho mọi người):

Mở trang web của bạn với hậu tố #navidebug-on, ví dụ: https://domain.com#navidebug-on. Nếu trang web chuyển sang chế độ Debug, mã nhúng đang hoạt động đúng. Chế độ Debug giúp bạn dễ dàng xác định các bộ chọn CSS. Sử dụng #navidebug-off để tắt nó.

Phương pháp 2 (dành cho các nhà phát triển):

Mở công cụ kiểm tra của trình duyệt, đi đến tab Console, và tìm một thông điệp màu xanh lá cây: “Using Navi+..”. Thông điệp này cho biết rằng mã đã được nhúng thành công.

2. Xuất bản menu bằng CSS Selector (được khuyến nghị)

Sau khi nhúng mã trên, hãy vào ứng dụng Navi+ để cấu hình nơi và cách menu của bạn xuất hiện trên trang.

I.1. Hiểu về CSS Selector

CSS Selector là cách để nhắm đến một phần tử HTML cụ thể trên trang web của bạn. Navi+ sử dụng nó để biết chính xác nơi đặt menu của bạn — cho dù chèn nó trước hay sau một phần tử, hoặc thay thế hoàn toàn một phần tử hiện có.

Bạn không cần phải là nhà phát triển để sử dụng điều này. Navi+ cung cấp một trường nhập đơn giản nơi bạn nhập bộ chọn, và nó sẽ xử lý phần còn lại.

Để tìm CSS Selector chính xác cho trang web của bạn, bạn có thể sử dụng:

  • Chế độ Debug — công cụ tích hợp của Navi+: di chuột qua bất kỳ phần tử nào trên trang của bạn và ngay lập tức sao chép bộ chọn của nó
  • Browser DevTools — một phương pháp thủ công sử dụng công cụ kiểm tra tích hợp của trình duyệt của bạn

I.2. Ba tùy chọn xuất bản

Bước 1: Nhấp vào nút Xuất bản lên trang web trong ứng dụng Navi+.

Bước 2: Bật công tắc “Xuất bản menu bằng phương pháp Chèn/Thay thế”.

Bước 3: Nhập CSS Selector của bạn và chọn một trong ba tùy chọn xuất bản dưới đây.

Tùy chọn 1: Chèn Trước

Chèn menu Navi+ ngay lập tức trước phần tử đã chọn.

Ví dụ: CSS Selector main → menu xuất hiện trên khu vực nội dung chính của trang.

Các bộ chọn CSS phổ biến cho tùy chọn này:

  • main — hoạt động trên hầu hết các nền tảng (Webflow, Magento, các trang tùy chỉnh)
  • #main — một số nền tảng và giao diện tùy chỉnh
  • .main-content — nhiều nền tảng khác nhau

Không có trong danh sách này? Bạn có thể trò chuyện với một người hỗ trợ Navi+ để được giúp đỡ ngay lập tức, hoặc sử dụng Chế độ Debug hoặc Browser DevTools để tìm nó cho mình.

Tùy chọn 2: Chèn Sau

Chèn menu Navi+ ngay lập tức sau phần tử đã chọn.

Ví dụ: CSS Selector header → menu xuất hiện ngay dưới tiêu đề.

Đây là thiết lập phổ biến nhất cho một Mega Menu trên máy tính để bàn.

Các bộ chọn CSS phổ biến cho tùy chọn này:

  • header — hoạt động trên hầu hết các nền tảng
  • .header-wrapper — một số nền tảng
  • .site-header — nhiều nền tảng khác nhau

Không có trong danh sách này? Bạn có thể trò chuyện với một người hỗ trợ Navi+ để được giúp đỡ ngay lập tức, hoặc sử dụng Chế độ Debug hoặc Browser DevTools để tìm nó cho mình.

Tùy chọn 3: Thay thế

Thay thế hoàn toàn phần tử đã chọn bằng menu Navi+. Phần tử gốc sẽ bị ẩn và Navi+ sẽ chiếm chỗ của nó.

Ví dụ: CSS Selector .main-nav → điều hướng mặc định của trang sẽ bị ẩn và được thay thế bằng Mega Menu Navi+ của bạn.

Các bộ chọn CSS phổ biến cho tùy chọn này:

  • nav — phần tử điều hướng chung
  • .main-nav — nhiều nền tảng khác nhau
  • .site-navigation — nhiều nền tảng khác nhau

Lưu ý: Khi sử dụng chế độ Thay thế, có thể xuất hiện một chớp mắt ngắn của menu gốc trong khi Navi+ tải. Xem I.4 bên dưới để ngăn điều này.

Không có trong danh sách này? Bạn có thể trò chuyện với một người hỗ trợ Navi+ để được giúp đỡ ngay lập tức, hoặc sử dụng Chế độ Debug hoặc Browser DevTools để tìm nó cho mình.

I.3. Nhắm mục tiêu theo thiết bị

Bạn có thể kiểm soát xem CSS Selector có áp dụng trên di động, máy tính để bàn, hoặc cả hai bằng cách thêm hậu tố vào bộ chọn của bạn:

Hậu tố Áp dụng cho
(M) Chỉ di động
(D) Chỉ máy tính để bàn
(không có) Cả di động và máy tính để bàn

Ví dụ:

  • header(D) — chỉ chèn hoặc thay thế trên máy tính để bàn
  • header(M) — chỉ chèn hoặc thay thế trên di động
  • header — chèn hoặc thay thế trên cả hai nền tảng

I.4. Quan trọng! Tối ưu hóa tốc độ Mega Menu và trải nghiệm người dùng (chế độ Thay thế)

Khi bạn thay thế một menu bằng menu khác, Navi+ sẽ chờ cho đến khi menu cũ được hiển thị và sau đó ngay lập tức thay thế nó bằng menu mới. Mặc dù điều này xảy ra gần như ngay lập tức, vẫn có một khoảnh khắc ngắn mà menu cũ xuất hiện, điều này có thể gây nhầm lẫn cho người dùng.

Với bước này, bạn có thể hoàn toàn ẩn menu cũ và hiển thị hiệu ứng tải thay thế. Điều này làm cho trang web cảm thấy nhanh hơn và cải thiện trải nghiệm người dùng. Navi+ cung cấp một tùy chọn tích hợp đơn giản cho điều này trong cài đặt xuất bản — bật nó lên và cấu hình CSS Selector của phần tử cần ẩn, với hậu tố tùy chọn (M) hoặc (D) để kiểm soát theo thiết bị.

3. Chèn Menu Navi+ ở Bất kỳ Điểm Nào trên Trang Web của Bạn

Mã dưới đây có thể được sử dụng nhiều lần trên một trang web với thông tin chèn khác nhau (đặc biệt là Embeded ID, chẳng hạn như SF-123456789). Khi trang web được hiển thị, menu sẽ được triển khai và hiển thị tại vị trí mà mã được chèn khi các điều kiện được đáp ứng. Loại menu này phù hợp cho: Mega menu, Grid, v.v.

<!-- Chèn mã nơi menu SF-123456789 xuất hiện. (c) naviplus.io -->
<div class="naviman_app section_naviman_app" id="SF-123456789-container"></div>
<script>(window._navi_setting ||= []).push({
   token: "NAVI123456",
   embed_id: "SF-123456789"
});</script>
&lt;script src="https://live.naviplus.app/start.js" async&gt;&lt;/script&gt;
<!-- Chèn mã nơi menu SF-123456789 xuất hiện -->

Quan trọng: Mã ở trên sử dụng mã nhúng mẫu SF-123456789. Hãy chắc chắn thay thế nó bằng mã nhúng menu thực tế của bạn.