WordPress: Menü-Eintrag nicht klickbar

Das Menü oben besteht aus einem Eltern-Eintrag („Berner Oberland“) und zwei Kinder-Einträgen („Flüsse“ und „Berge“). Der Elterneintrag, welcher selber keine Funktion haben soll, wird mit einem Fake-Link erstellt (#-Zeichen als Linkziel):

Unschön ist nun, dass sich der Mauszeiger auch beim Fake-Link zu einem Hand-Symbol wandelt, obschon der Link nirgends hinführt:

Mit CSS-Klasse das Aussehen des Mauszeigers ändern

Das Aussehen des Mauszeigers lässt sich mit einer CSS-Klasse ändern. Damit einem Menübefehl überhaupt eine CSS-Klasse zugewiesen werden kann, musst du die Option „CSS Classes“ bei den Menü-Optionen zuschalten:

Jetzt wechselst du im „Customizer“ in die Abteilung „Custom CSS“ (ganz unten). Da tippst du die folgende CSS-Klasse ein, wobei „nonclick“ ein frei wählbarer Name ist:

.nonclick > a:hover {
 cursor: default;
}

Nun geht es darum, diese neue CSS-Klasse dem Menübefehl mit dem Fake-Link zuzuweisen. Öffne dazu den gewünschten Menüeintrag und schreibe den Klassen-Namen bei „CSS Classes“ rein (Klick aufs Bild für vergrösserte Ansicht):

Das ist auch schon alles. Jetzt ändert der Mauszeiger seine Form nicht mehr, wenn er über dem Menüeintrag mit dem Fake-Link steht:


Keine Beiträge verpassen?






Wie gefiel dir dieser Beitrag?
Please wait...
Fragen oder Anregungen?
Zu den Kommentaren (10)
Passende Themen
Kommentare (10)

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

* Die Checkbox für die Zustimmung zur Speicherung ist nach DSGVO zwingend.

Ich stimme zu.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.

  1. Monika vor 8 Monaten

    Ist das Zufall- bei mir geht dies, indem ich das URL Feld einfach ganz leer lasse…… Beispiel: https://gruppe-elki.ch.

    Please wait...
    • Haeme Ulrich vor 8 Monaten

      Hallo Monika.
      Clever, ohne Hash 🙂
      Nach meinem Test braucht du aber die CSS-Klasse, damit der Cursor sich nicht in einen Textcursor ändert, oder?

      Please wait...
    • Monika vor 8 Monaten

      Ja, das stimmt. Hat bisher noch niemand bemerkt ;-).
      CSS Klassen sind elegant. Danke für die Anleitung, kann ja für vieles gebraucht werden, zB farbige Schrift für einzelne Einträge.

      Please wait...
    • Haeme Ulrich vor 8 Monaten

      Danke dir für den Input mit dem Weglassen des Hash-Zeichens 🙂

      Please wait...
  2. Haris vor 8 Monaten

    Wow, habe lange nach einer eleganten Lösung gesucht – und da ist sie 🙂 Vielen Dank für den Tipp!

    Please wait...
    • Marc Schilling vor 8 Monaten

      Noch eleganter: Wenn man nur diesen CSS-Code verwendet, brauchst du nicht einmal eine CSS-Klasse vergeben. CSS prüft, ob der Link mit einem #-Zeichen beginnt, falls ja, wird der Cursor nicht verändert und bleibt default. Das ^ ist wichtig, damit nur #-Zeichen am Anfang verwendet werden. Enthält ein Link das #-Zeichen als Anker am Ende, soll der Cursor ja verändert werden, dort wollen wir den Pointer.

      a[href^=“#“] {
      cursor: default;
      }

      Grüße,
      Marc

      Please wait...
    • Haeme Ulrich vor 8 Monaten

      Danke Marc, clever!

      Please wait...
    • Marc Schilling vor 8 Monaten

      Sorry, einen Fehler muss ich korrigieren: Es muss ein $ sein, kein ^. Wir müssen das #-Zeichen am Ende suchen, nicht am Anfang, da der Ankertext ja auch mit dem #-Zeichen beginnt (#anker). So funktionierte es nun zufriedenstellend 🙂

      a[href$=“#“] {
      cursor: default;
      }

      Please wait...
    • Marc Schilling vor 8 Monaten

      Noch ein Hinweis: Vorsicht beim CSS Kopieren hier aus den Kommentaren. Die Anführungszeichen sind die falschen. Sie müssen durch die „Standard-Gänsefüßchen“ ersetzt werden. Beim Schreiben werden sie hier umgewandelt.

      @Haeme: Vielleicht gibt’s ja ein Kommentarplugin zum Einfügen und Kopieren von (CSS) Code …

      Please wait...
    • Haeme Ulrich vor 8 Monaten

      Das mit dem Code-Freundlichen Kommentieren nehme ich gerne in den Backlog, danke für den Input!

      Please wait...