デバッグモード - CSSセレクタを見つける

デバッグモードは、Navi+ライブラリに組み込まれた軽量ツールセットで、Navi+メニューをより効果的に操作するのに役立ちます。

デバッグモードを有効にするには、次のURL形式を使用します： yourdomain.com#navidebug-on

あなたのウェブサイトはNavi+デバッグモードに切り替わります。ウェブサイトのさまざまな領域にマウスをホバーさせて、それに対応するCSSセレクタを表示します。カーソルを移動させて、目的のターゲットエリアを正確に特定してください。

効率的に作業するために、以下のキーボードショートカットに注意してください。

ショートカット 1. CSSセレクタのコピー

その後、次のために公開メニュー設定に貼り付けることができます：

ショートカット 2. セレクタレベル間のナビゲーション

重要なヒント： ほとんどの場合、完璧なCSSセレクタをすぐに見つけることはできません。経験に基づくと、次のようにする方が簡単です：

時には、目的のユーザーエクスペリエンスを達成するために、CSSセレクタにメニューイベントを挿入、置き換え、またはバインドする際に、このプロセスを何度も繰り返す必要があるかもしれません。

モバイルでCSSセレクタを見つけるには、ブラウザでモバイル（レスポンシブ）モードを有効にします。その後、ページの任意の場所を右クリックし、次を選択します：