Navigation einrichten

Im JGU Layout existieren zwei Bereiche für Navigationsmenüs. Sie brauchen also in Ihrem Blog nie mehr als 2 Menüs.

Demo-Menü

Video-Anleitung (1 Minute)

Menütypen

💡: Aus Gründen der Zugänglichkeit (Barrierefreiheit) ist es sinnvoll, ein Menü auch nur einmalig zuzuweisen. Es ist also nicht sinnvoll, das gleiche Menü auf BEIDEN Menüplätzen anzuzeigen, weil die Inhalte dann jeweils doppelt erscheinen.
Mehr zur Barrierefreiheit auf Webseiten

Oben rechts: das Level 1 Menü

Dieses Menü befindet sich in der rechten oberen Ecke, beim Überstreichen mit dem Mauszeiger klappen Untermenüs auf. Somit kann eine Navigation mit zwei Ebenen eingebunden werden.

Links: Left column navigation

Hier kann eine komplette hierarchische Navigationsstruktur abgebildet werden.

Navigation einrichten

Verwalten Sie die Menüs im Dashboard unter Design  → Customizer → Menüs.

Warnung: ⚠️ Design  → Menüs ist mittlerweile veraltet! Verwenden Sie Design  → Menüs nur dann, wenn Sie sicher sind, keine Fehler zu machen, denn was sie hier tun, ist nicht widerrufbar und es wird davon keine Revision gespeichert!

Menü erstellen Kurzfassung

Legen Sie zuerst Seiten oder kategorisierte Artikel an und veröffentlichen Sie diese. Dann legen Sie (wenn noch nicht vorhanden) ein Menü an, weisen Seiten, Links und Kategorien zu und bestimmen dessen Position im Blog (oben oder links).

  1. Erzeugen Sie ein neues Menü im Dashboard unter Design → Customizer → Menüs → Neues Menü erstellen.
  2. Der Name des Menüs ist wichtig! Er wird in der mobilen Ansicht als Kartenreiterbeschriftung angezeigt!
  3. Die Menü-Position wählen Sie als nächstes aus: Level 1 navigation oder Left column navigation
  4. Nach Klick auf Weiter
  5. weisen Sie per Einträge hinzufügen Seiten, Links oder (wenn Sie mit kategorisierten Beiträgen arbeiten) Kategorien zu, indem Sie den gewünschten Bereich durch Klick öffnen und das Element anklicken.
  6. Definieren Sie Reihenfolge und Struktur der Menüpunkte, indem Sie die Elemente mit der Maus an die gewünschte Stelle schieben. Eingerückte Elemente erscheinen als Unterpunkte.
  7. Löschen Sie Menüelemente, indem Sie auf das rote Kreuz klicken.
  8. Mit Klick auf das Element ändern Sie den Angezeigten Namen, falls sich Seitentitel und Menütitel unterscheiden sollen.

Menübäume zuweisen

Unter dem Punkt Design  → Customizer → Menüs→ Alle Positionen anzeigen finden Sie  Level 1 Navigation und Left column navigation wieder. Hier legen Sie festl, an welcher der beiden Stellen ein bereits definiertes Menü auf der Seite angezeigt werden soll. Jedwede Änderung wird erst mit Veröffentlichen aktiv.

Nochmal zur Erinnerung: Das  Level-1-Menü zeigt zwei und die Navigation in der linken Spalte fünf Hierarchieebenen an.

Menüpunkt einfügen

Seite einfügen

Im Design  → Customizer → Menüs. Falls es mehrere Menüs gibt, wählen Sie das richtige dort aus. Neue Menüeintrage fügen Sie mit Einträge hinzufügen ein. Die Seite muß veröffentlicht sein (Private Seiten und Entwürfe können Sie NICHT zuordnen!)

Neue Elemente werden jeweils als letzter Menüpunkt angehängt.

Änderungen werden übernommen, wenn Sie mit Veröffentlichen bestätigen.

Links einfügen (externe Webseiten im Menü verlinken)

Um beliebige Internetseiten im Menü zu verlinken, klicken Sie auf Individuelle Links. 

Externe Links sollten die Ausnahme in den Navigationsmenüs sein. Nützlich sind Links, um übergeordnete Projekte, Institute, "benachbarte" Einrichtungen oder beispielsweise die Startseite der Uni Mainz zu verlinken.

Links im Menü in neuer Registerkarte öffnen

Im Design  → Customizer → Menüs klicken Sie auf den Menüpunkt Individueller Link. Machen Sie den Haken bei Link in neuem Tab öffnen

Link zu einer Liste von Beiträgen per Kategorie einfügen

Im Design  → Customizer → Menüs klappen Sie Kategorien per Klick auf. Wählen Sie eine von Ihnen zuvor erstellte Kategorie aus. Auf diese Weise wird eine Seite in das Menü eingebaut, die eine chronologische Liste aller Artikel enthält, welchen diese Kategorie zugeordnet wurde. So können Sie auf einfache Weise z.B. aktuelle Nachrichten zu einem bestimmten Thema oder Teilgebiet Ihres Projektes anzeigen.

Link zur Startseite des Blogs einfügen

Sie können auch die Startseite des Blogs - das ist die Seite, die bei Aufruf der Blog-URL durch einen Besucher als Erste geladen wird - in jedes Menü einbinden.

Die Startseite jedes Blogs finden Sie für ein Menü, wenn Sie bei Im Design  → Customizer → Menüs → Einträge hinzufügen →Seiten die Seite Startseite auswählen.

Danach können Sie die Startseite wie üblich per 'Drag & Drop' im Menü an die gewünschte Stelle schieben.

Reihenfolge und Sortierung

Die Reihenfolge der Elemente im Design  → Customizer → Menüs ändern Sie durch festhalten und ziehen ("drag & drop") mit der Maus. Klicken Sie auf den zu verschiebenden Eintrag und ziehen ihn bei gedrückter Maustaste an die gewünschte Stelle. WordPress zeigt dabei mithilfe eines gestrichelten Kastens die Stelle an, an der der Eintrag eingefügt würde.

Lassen Sie die Maustaste los, dann können Sie die Änderung im Hauptfenster rechts ansehen und auch ausprobieren.

Die Hierarchie legen Sie fest, indem Sie einen Menüpunkt unter einer Seite nach rechts ziehen:

Menüpunkte bearbeiten und entfernen

Sie können die Beschriftung jedes Menüeintrags ändern. Klicken Sie dazu auf das Element. Passen Sie den Text bei Angezeigter Name an. Der Menüeintrag bekommt standardmäßig den Text der Überschrift. Kürzen Sie lange unübersichtliche Einträge. Speichern Sie die Änderungen mit Veröffentlichen.

💡 Tipp: Wichtig zur Verbesserung der Barrierefreiheit Ihrer Seiten: Um Ihre Seiten z.B. für die Screenreader sehbehinderter Personen besser nutzbar zu machen, sollten Sie nach Möglichkeit das Feld 'HTML-Attribut title' mit einem gut beschreibenden Text für Ihren Menüpunkt/Link belegen.

Klicken Sie auf das rote Kreuz, so wird nur der Menüeintrag entfernt. Die Seite / der Link / die Kategorie bleiben erhalten.

Navigationsstruktur aufklappen

Es ist möglich, auf einzelnen Seiten die Navigation der linken Spalte zwar an einer bestimmten Stelle 'aufzuklappen', die Seiten selbst aber nicht in der Navigation anzuzeigen. Hängen Sie dazu die Seite als Menüpunkt an die gewünschte Stelle ein.

Nun müssen Sie für denjenigen Menüpunkt, der selbst nicht angezeigt werden soll, im  Feld 'CSS-Klassen'  hidden-menu-item eintragen.

Bitte beachten: wir empfehlen, die oben beschriebene CSS-Klasse mit Bedacht zu verwenden!

Verschiedene Menüs in der linken Spalte  / Nur Untermenüs anzeigen in der linken Spalte

Sie möchten in den verschiedenen Bereichen Ihres Projekts unterschiedliche Menüs?

Sie verwenden das Level1 Menü und das linke Spalte Menü mit dem gleichen Menübaum und wollen nicht, daß in den Unterseiten jeweils quasi gedoppelt auch der gesamte obere Bereich nochmals auftaucht?

Mit dem Customizer stellen Sie dies ein:

Im Customizer-Bereich Navigation-Layout wechseln Sie die Darstellung im linken Menü: von vollständig auf nur Unternavigation