• Thema

  • Technologie

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:

Was denkst du dazu?
yeah!
0
wooow
0
what?
0
meh.
0
hahaha
0
haeme@morntag.com
Beitrag teilen
Was denkst du dazu?
Was denkst du dazu?
yeah!
0
wooow
0
what?
0
meh.
0
hahaha
0
Diskussion

10 Antworten

    1. 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.

    1. 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

    2. 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;
      }

    3. 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 …

Schreibe einen Kommentar

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

 

Hinweis: Es kann bis zu zwei Stunden gehen, bis dein Kommentar auf der Website erscheint. Bitte poste deinen Kommentar nur einmal 😉

Aktuelle Jobangebote
  • Grafik / Prepress / Druck / Verpackung / Werbetechnik | Medienjobs und Stellen für Profis

    Neue Beiträge als E-Mail
    jeden Dienstag die neusten Blogposts in deiner Inbox
    Unsere Partner:

    Dein Gerät ist aktuell offline.