WordPress Menü bearbeiten

Viele Wege führen dich zu deinem idealen Menü innerhalb von WordPress. Zukünftig wird dir an dieser Stelle erklärt, wie du ein Menü erstellst, Anker setzen kannst, verschiedene Unterpunkte verwendest. Im ersten Schritt soll es allerdings, um eine konkrete Problemstellung gehen: Ein Menüeintrag soll nicht klickbar sein.

Die meisten Menüs verfügen über einen Elterneintrag samt Unterseiten. Je nach Theme kommt es in dieser Konstellation zu zwei Möglichkeiten:

  • Der Elterneintrag ist klickbar und der Nutzer landet auf der entsprechenden Seite
  • Der Elterneintrag ist nicht klickbar

Soll der Elterneintrag keine Funktion besitzen, also lediglich im Menü vorhanden sein, nicht aber als konkrete Seite angelegt werden, müssen wir uns einem Trick behelfen. Als URL gibst du lediglich das #-Zeichen ein, was einen Anker symbolisiert und nicht als eigenständige URL verwendet wird.

Ungünstig an dieser Lösung ist, dass der Fake-Menüpunkt ebenfalls den Curser ändert, da es sich technisch um einen Link handelt. Diese Unstimmigkeit ist schnell behoben.

Aussehen des Mauszeigers anpassen

Du kannst das Aussehen des Mauszeigers im WordPress sehr einfach anpassen. Eventuell bringt dich dies auch auf andere Ideen. Im konkreten Fall, wollen wir allerdings nur die Menü-Funktionalität verbessern.

Rufe hierzu zunächst den Reiter „Custom CSS“ (Zusätzliches CSS) im Customizer auf und trage folgende Zeilen ein:

/* non click cursor deactivate */
.nonclick > a:hover {
    cursor: default;
}

In der ersten Zeile beschreiben wir die Funktionalität der folgenden Codezeilen, .nonclick definiert die Klasse, a:hover bezeichnet das Hover mit der Maus und cursor: default; gibt die Anweisung, dass sich der Mauszeiger nicht ändert.

Damit dem Menüpunkt die CSS-Klasse zugeteilt werden kann, müssen wir sicherstellen, dass die Funktionalität vorhanden ist.Rufe hierzu den Customizer auf und navigiere zum Menü. Mit dem Zahnrad-Symbol kannst du die erweiterten Menüeigenschaften aufrufen. Hier einen Haken bei CSS-Klassen setzen

Bei den erweiterten Menüeigenschaften CSS-Klassen auswählen

Nun musst du lediglich dem Fake-Link im Menü die neu angelegte CSS-Klasse zuweisen. Öffne deinen Menüeintrag und schreibe nonclick im Bereich der CSS-Klassen.

Ab sofort ändert sich der Mauszeiger nicht mehr, wenn deine Leser über den Menüpunkt fahren.

Schreibe einen Kommentar