Getestete Version: 6.0.1
Viele Wege führen dich zu deinem idealen Menü innerhalb von WordPress. Du kannst Unterpunkte angeben, nicht klickbare Menüpunkte anlegen und Icons zur Darstellung verwenden.
Über deine Menüpunkte tauchen deine Nutzer tiefer in deine Website ein. Anlegen kannst du dieses über den Punkt „Design“ –> „Menüs“ oder über den Customizer.
Mittels Drag & Drop kannst du dabei einzelne Menüpunkte zu Eltern- bzw. Kindereinträgen verwandeln. Auch Kinder-Kinder-Elemente sind möglich. Bedenke dabei, dass ein Menü funktional bleiben soll.
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 mit einem Trick behelfen. Zunächst legst du im Menü einen individuellen Link für die Hauptkategorie „Blog“ an. Damit dies gelingt, gibst du im URL-Feld ein „#“ ein, wodurch du in dem Fall einen nicht aktiven Anker-Link erzeugst. Dadurch könnten deine Besucher den Menüpunkt klicken, es passiert allerdings keine Weiterleitung. Sichtbar ist der „Anker“ dennoch.
Ungünstig an dieser Lösung ist, dass der Fake-Menüpunkt ebenfalls den Cursor ändert, da es sich technisch um einen Link handelt. Du kannst nun auch den „#“ als URL entfernen. Diesen Zwischenweg brauchten wir nur, damit wir den Eintrag anlegen durften. Im Anschluss fungiert der Menüpunkt nicht mehr als Link und der Mauszeiger ändert sich nicht.
In Kurzform: Menüpunkt nicht klickbar machen
- Menü als individuellen Link anlegen
- mit # als Link versehen
- Untermenüs einsortieren
- # wieder entfernen
- fertig
Den Fake-Link nicht mehr zu besitzen ist super, denn es könnte deine Nutzer irritieren. Allerdings ist der Cursor-Bereich sehr klein. Nur im Bereich des Submenü-Icons ist ein Cursor zu erkennen, sobald über Schrift gehovert wird, erscheint der Text-Cursor.
Diese Unstimmigkeit ist schnell behoben.
Aussehen des Mauszeigers anpassen
Damit dieser ungewollte Effekt ansprechender gestaltet ist, passt du das Aussehen des Mauszeigers an. Das ist im WordPress sehr einfach mittels CSS möglich. Eventuell bringt dich dies auch auf andere Ideen. Im konkreten Fall konzentrieren wir uns auf die Verbesserung der Menü-Funktionalität.
Hierzu trägst du folgende Zeilen in deine Stylesheet-Datei (style.css)oder dem Customizer ein:
/* eng.: non click cursor deactivate */
/* dt: Cursor deaktivieren, wenn kein Link vorhanden */
.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
Jetzt trägst du den verwendeten Klassen-Namen ein, auf den wir uns innerhalb der CSS-Anweisung beziehen, beispielsweise „nonclick“.
Ab sofort ändert sich der Mauszeiger nicht mehr, wenn deine Leser über den Menüpunkt fahren.
In Kurzform:
- Mauscursor per CSS anpassen 😉
Je verschachtelter eine Website, desto sinnvoller kann ein alternativer Menüaufbau sein. Wenn du beispielsweise mehrere Ebenen deiner Navigationselemente auf einmal anzeigen möchtest, erhältst du eine tiefere Gruppierung und eine höhere Navigationstiefe. Mit GeneratePress ist die Erstellung sehr simpel möglich.[1]Dokumentation von GeneratePress: Ein simples Mega Menü aufbauen. Zugriff: 20.03.2023
Zunächst fügst du in deine Style.css folgende Zeilen ein, damit die Funktion für das Mega Menü aktiviert wird:
@media (min-width: 769px) {
nav .main-nav .mega-menu {
position: static;
}
nav .main-nav .mega-menu > ul {
position: absolute;
width: 100%;
left: 0 !important;
display: flex;
flex-wrap: wrap;
}
nav .main-nav .mega-menu > ul > li > a {
font-weight: bold;
}
nav .main-nav .mega-menu>ul>li {
display: inline-block;
width: 25%;
vertical-align: top;
}
nav .main-nav .mega-menu.mega-menu-col-2>ul>li {
width: 50%;
}
nav .main-nav .mega-menu.mega-menu-col-3>ul>li {
width: 33.3333%;
}
nav .main-nav .mega-menu.mega-menu-col-5>ul>li {
width: 20%;
}
nav .main-nav .mega-menu > ul > li:hover > a,
nav .main-nav .mega-menu > ul > li:focus > a,
nav .main-nav .mega-menu > ul > li[class*="current-"] > a,
nav .main-nav .mega-menu ul ul {
background-color: transparent !important;
color: inherit;
}
nav .main-nav .mega-menu ul .sub-menu {
position: static;
display: block;
opacity: 1;
visibility: visible;
width: 100%;
box-shadow: 0 0 0;
left: 0;
height: auto;
pointer-events: auto;
transform: scale(1);
}
nav .main-nav .mega-menu ul.toggled-on .sub-menu {
pointer-events: auto;
}
nav .main-nav .mega-menu .sub-menu .menu-item-has-children .dropdown-menu-toggle {
display: none;
}
}
Jetzt musst du in den Menüeinstellungen die gewünschte Struktur aufbauen. Du brauchst typischerweise drei Ebenen:
- Hauptmenüpunkt: Also die Bezeichnung, die im Menü direkt angezeigt wird
- Kinderelement: Die Ebene zur Strukturierung (muss kein klickbares Element sein)
- Enkelelement: Die klickbaren Menüpunkte
Der Hauptmenüpunkt benötigt die CSS-Klasse mega-menu. Dann wird hier die alternative Darstellung aktiviert.
Als Ergebnis solltest du folgendes sehen:
Derzeit ist diese Darstellung auf deinwp.de noch nicht sinnvoll, aber wir wollten die Funktionsweise testen und werden zukünftig eventuell eine derartige Darstellung planen.
Standardmäßig sind 4 Spalten beim Mega-Menü angelegt. Du hast allerdings die Wahl zwischen 2 und 5 Spalten. Hierzu gibst du innerhalb des Elternelementes eine weitere Klasse an:
mega-menu-col-2
mega-menu-col-3
mega-menu-col-4
mega-menu-col-5
Im CSS-Feld deines Elements steht dann also: mega-menu mega-menu-col-2
Quellen und Fußnoten