Navi+メニューが他のアプリと重ならないようにする

なぜこれが問題になるのか？

多くの場合、ウェブサイトに埋め込まれた複数のアプリケーションを使用する必要があります。これにより、インターフェース要素が重なる可能性があるため、通常の使いやすさの問題が発生します（下の画像を参照）。簡単な例として、Shopify Inbox やWhatsAppのようなチャットアプリを頻繁に使用する場合があります。通常、これらのチャットアプリは、電話画面の右下隅に目立つ位置を占めます。ウェブサイトのナビゲーションを大幅に向上させるためにNavi+を使用することを決定すると、この問題が発生します。この問題に対処するためのいくつかの方法を以下に示します。

解決策1: フロートボタンの位置を調整する（Shopify Inboxのデモ）

解決策2: Navi+メニューのパディングを設定してアプリケーションとの重なりを避ける。

パディングとマージンは、技術において広く使用されている強力なツールです。特にHTML5/CSSでは、特定のエリアの位置に応じてパディングを設定することで、アプリケーションの重なりを避けることができます。また、マージンを調整することで、Navi+メニューとエッジとの距離を設定することもできます。

解決策3: ボトムバーをトップバー/サポートバーまたはフロートアクションボタンに置き換える

ボトムバーは、ユーザーを導くための最も効果的なツールですが、ほとんどすべてのモバイルネイティブアプリやモバイルウェブ（遅い）で使用されていますが、時にはNavi+メニューを異なる位置に配置したい場合があります。例えば、上部（トップバー）、右/左（サポートバー）、インターフェースの上に浮かぶ（フロートアクションボタン）などです。また、最適なナビゲーション効率のためにそれらを組み合わせることもできます。Navi+からの以下のオプションを確認して、どのように行うかを理解してください。時には1秒で問題を解決できます。

Z-index - “浮遊アプリケーション”の表示順序を優先する

z-indexプロパティは、要素のスタック順序を指定します。スタック順序が大きい要素は、常にスタック順序が小さい要素の前に表示されます。以下の画像を参照して、詳細を理解してください。

Navi+メニューのデフォルトのz-indexはすべて50に設定されています。なぜなら、「他のアプリよりも重要だとは考えていない」からですが、50はすべてのShopifyテーマでうまく表示するのに十分な数でもあります。以下のケースでは、Navi+メニューのz-indexを調整する必要があるかもしれません。

1ページに複数のNavi+メニューを使用し、重なるようにしたいが、1つのメニューが他のメニューの上に表示される場合。
他のオブジェクト/アプリがNavi+メニューと重なっている場合。この場合、z-indexがすべてを解決します。

挑戦的な質問があります: 他のアプリと重ならないようにするために、Navi+メニューのz-indexをどのように設定すべきでしょうか？複数のNavi+メニューがある場合、心配せずに好みに応じて配置できます。これが、私たちがNavi+を現在のShopifyの「浮遊アプリケーション」に対してできるだけ多様に構築している理由です。

他のアプリとの競合を処理するためにNavi+メニューのz-indexを設定する必要がある場合、z-indexを0から2,147,483,647の最大値まで検索できます。これは少し難しいように思えるかもしれませんが、最も簡単で最良の方法です。なぜなら、z-indexは直面している問題以外のインターフェース表示に影響を与えないからです。CSSやHTMLのデバッグに慣れている場合、これは簡単です。検査モードをオンにして、競合アプリのz-indexを確認してください。または、最も簡単な方法は、CrispチャットアイコンをクリックしてNavi+アドバイザーとチャットすることです。この問題について喜んでお手伝いします。