Debug-Modus - CSS-Selektoren finden

Der Debug-Modus ist ein leichtgewichtiges Toolset, das in die Navi+ Bibliothek integriert ist und Ihnen hilft, effektiver mit Navi+ Menüs zu arbeiten.

1. CSS-Selektoren finden

Um den Debug-Modus zu aktivieren, verwenden Sie das folgende URL-Format: yourdomain.com#navidebug-on

Ihre Website wechselt in den Navi+ Debug-Modus. Bewegen Sie die Maus über verschiedene Bereiche der Website, um die entsprechenden CSS-Selektoren anzuzeigen. Bewegen Sie den Cursor, um den gewünschten Zielbereich genau zu lokalisieren.

Bitte beachten Sie die folgenden Tastenkombinationen, um effizienter zu arbeiten.

Tastenkombination 1. Kopieren eines CSS-Selektors

  • Drücken Sie ⌘+C auf MacOS oder Ctrl+C auf Windows, um den ausgewählten CSS-Selektor zu kopieren.

Sie können ihn dann in die Einstellungen des Publish Menu für:

  • Mega Menu / Grid Menu: um das Menü vor, nach oder anstelle des Ziel-CSS-Selektors einzufügen
  • Slide Menu: um das Slide Menu auszulösen, wenn der Ziel-CSS-Selektor angeklickt oder angetippt wird

Tastenkombination 2. Navigieren zwischen Selektor-Ebenen

  • Drücken Sie [↑/←], oder Backspace, um zu einem übergeordneten Selektor zu wechseln
  • Drücken Sie [↓/→], um zu einem untergeordneten Selektor zu wechseln

Wichtige Tipps: In den meisten Fällen werden Sie nicht sofort den perfekten CSS-Selektor finden. Basierend auf Erfahrung ist es oft einfacher:

  1. Beginnen Sie mit der Auswahl eines untergeordneten Selektors
  2. Bewegen Sie sich dann 1–2 Ebenen nach oben (ein visuelles Highlight erscheint auf Ihrer Website)
  3. Kopieren Sie den Selektor mit ⌘+C (Ctrl+C)
  4. Fügen Sie ihn in die Menükonfiguration ein und testen Sie

Manchmal müssen Sie diesen Prozess mehrmals wiederholen, wenn Sie Menüereignisse an CSS-Selektoren einfügen, ersetzen oder binden, um die gewünschte Benutzererfahrung zu erzielen.

1.1. CSS-Selektor auf dem Desktop finden

1.2. CSS-Selektor auf Mobilgeräten finden

Um einen CSS-Selektor auf Mobilgeräten zu finden, aktivieren Sie den mobilen (reaktiven) Modus in Ihrem Browser. Dann klicken Sie mit der rechten Maustaste irgendwo auf der Seite und wählen Sie:

  • Chrome: Untersuchen
  • Safari: Element untersuchen
  • Firefox: Untersuchen
  • Edge: Untersuchen / Element untersuchen