Ngăn chặn các menu Navi+ chồng lên các ứng dụng khác
Tại sao điều này sẽ là một vấn đề?
Trong nhiều trường hợp, bạn sẽ cần sử dụng nhiều ứng dụng nhúng trên trang web của mình. Điều này có thể gây ra vấn đề về khả năng sử dụng thông thường khi các phần tử giao diện có thể chồng lên nhau (xem hình ảnh bên dưới). Một ví dụ đơn giản là khi bạn thường xuyên sử dụng một ứng dụng trò chuyện như Shopify Inbox hoặc WhatsApp. Thông thường, các ứng dụng trò chuyện này chiếm một vị trí nổi bật ở góc dưới bên phải của màn hình điện thoại. Khi bạn quyết định sử dụng Navi+ để nâng cao đáng kể khả năng điều hướng trên trang web của mình, vấn đề này phát sinh. Dưới đây là một số cách để giải quyết vấn đề này.
Giải pháp 1: Điều chỉnh vị trí của các nút nổi (Demo với Shopify inbox)
Giải pháp 2: Thiết lập khoảng đệm của menu Navi+ để tránh chồng lên các ứng dụng.
Khoảng đệm và lề là những công cụ được sử dụng rộng rãi và mạnh mẽ trong công nghệ, đặc biệt là trong HTML5/CSS. Bằng cách thiết lập khoảng đệm theo vị trí của khu vực đó, bạn có thể tránh chồng lên các ứng dụng. Bạn cũng có thể thiết lập khoảng cách từ menu Navi+ đến các cạnh bằng cách điều chỉnh lề.
Giải pháp 3: Thay thế các thanh dưới bằng các thanh trên/Thanh hỗ trợ hoặc nút hành động nổi
Mặc dù thanh dưới là công cụ hiệu quả nhất để dẫn dắt người dùng, được sử dụng bởi hầu hết các ứng dụng di động gốc, hoặc web di động (chậm hơn), đôi khi bạn có thể muốn đặt menu Navi+ của mình ở một vị trí khác như trên cùng (Thanh trên), bên phải/trái (Thanh hỗ trợ), nổi trên giao diện (nút hành động nổi). Hoặc bạn có thể kết hợp chúng để đạt được hiệu quả điều hướng tốt nhất. Hãy xem các tùy chọn sau từ Navi+ để hiểu cách thực hiện, đôi khi chỉ mất 1 giây, và bạn sẽ giải quyết được vấn đề của mình.
Z-index - ưu tiên thứ tự hiển thị của “các ứng dụng nổi”
Thuộc tính z-index xác định thứ tự xếp chồng của một phần tử. Một phần tử có thứ tự xếp chồng lớn hơn luôn nằm ở phía trước một phần tử có thứ tự xếp chồng thấp hơn. Xem hình ảnh bên dưới để hiểu thêm.
Mặc định z-index cho menu Navi+ được đặt là 50 cho tất cả, vì chúng tôi ‘không coi mình quan trọng hơn các ứng dụng khác’, nhưng 50 cũng là số đủ để hiển thị tốt trên tất cả các chủ đề Shopify. Đôi khi bạn có thể cần điều chỉnh z-index của menu Navi+ của mình trong các trường hợp sau:
- Khi bạn sử dụng nhiều menu Navi+ trên một trang và bạn muốn chúng chồng lên nhau, nhưng một menu xuất hiện trên các menu khác.
- Khi có các đối tượng/ứng dụng khác chồng lên menu Navi+ của bạn, trong trường hợp đó, z-index sẽ giải quyết tất cả.
Có một câu hỏi khó: bạn nên thiết lập z-index cho menu Navi+ của mình là bao nhiêu để tránh chồng lên như mong muốn? Nếu bạn có nhiều menu Navi+, bạn có thể sắp xếp chúng theo sở thích của mình mà không cần lo lắng – đó là lý do tại sao chúng tôi xây dựng Navi+ để trở nên linh hoạt nhất có thể cho các ‘ứng dụng nổi’ hiện tại trên Shopify.
Nếu bạn cần thiết lập z-index cho menu Navi+ của mình để xử lý xung đột với các ứng dụng khác, bạn có thể tìm kiếm z-index của mình từ tối thiểu 0 đến tối đa 2,147,483,647. Điều này có thể có vẻ hơi khó khăn, nhưng đó là cách dễ nhất và tốt nhất vì z-index sẽ không ảnh hưởng đến hiển thị giao diện của bạn ngoài vấn đề bạn đang gặp phải. Nếu bạn có kinh nghiệm với việc gỡ lỗi CSS và HTML – điều này rất dễ, chỉ cần bật chế độ kiểm tra để xem z-index của ứng dụng xung đột có. Hoặc, cách dễ nhất, chỉ cần nhấp vào biểu tượng trò chuyện Crisp để trò chuyện với một cố vấn Navi+; chúng tôi rất vui được hỗ trợ bạn với vấn đề này.