Navigation

Ice Cream and Cold DrinksJede Website benötigt eine einfach zu verstehende Navigation, damit der Besucher auf Anhieb findet, was er sucht. Das hört sich einfach an, aber es ist nicht leicht, diesen Anspruch auch wirklich umzusetzen. In einer idealen Welt sollte jede Seite auf einer Website nach zwei oder drei Klicks erreichbar sein. Ein anderer Effekt, der oft vergessen wird, ist die Tatsache, dass die meisten Besucher Ihrer Website von einer Suchmaschine oder Social-Media-Website kommen. Diese Besucher werden überall landen, aber höchst selten auf Ihrer Startseite. Das ist durchaus ein Grund, auf jeder Seite einen Link zur Startseite zu setzen.

Oft teilt man die Navigation einer Website in eine primäre und eine sekundäre Navigation. Die primäre Navigation ist normalerweise im oberen Bereich der Website oder in der linken oder rechten Spalte zu sehen. Die sekundäre Navigation ist oft im unteren Bereich der Website angeordnet. Wenn sie sich oben befindet, sind die Links meist etwas kleiner gestaltet als die der primären Navigation. Die sekundäre Navigation enthält meistens Links wie Kontakt, Über uns und das Impressum. Die Idee dabei ist, dass man diese Links auf einer Website zwar benötigt, aber sie müssen nicht an der wichtigsten Stelle positioniert werden.

Versuchen Sie, nicht mehr als vier bis acht Links in einer Navigationsebene zu verwenden.

Breadcrumbs

Breadcrumbs (Brotkrumen) sind eine Navigationshilfe und werden in der deutschen Übersetzung Navigationspfade genannt. Die Idee zu diesem Begriff stammt aus dem Märchen Hänsel und Gretel. Normalerweise findet man Navigationspfade, waagerecht angeordnet, im oberen Bereich einer Seite. Zwei Arten von Breadcrumbs werden genutzt:

  • die Verlinkung zurück zur vorherigen, vom Benutzer besuchten Seite
  • die der aktuellen Seite logisch übergeordnete Seite

Navigationspfade sind ein Weg, dem Besucher das Gefühl zu geben, nicht auf der Website verloren zu sein. Im günstigsten Fall sollten die Besucher immer wissen, wo sie sind und wie sie dorthin zurückkommen, wo sie vorher waren. Joomla! bietet ein Navigationspfade-Modul für diese Aufgabe, und die meisten Templates haben eine spezielle Position dafür reserviert (siehe Abbildung 1).

Joomla! 1.6 cocoate.com/node/6032
Joomla! 2.5 cocoate.com/node/10311Breadcrumbs

Abbildung 1: Breadcrumbs bzw. Navigationspfade

Joomla!-Menüs

Navigationen in Joomla! werden über sogenannte Menüs erzeugt. Sie können so viele Menüs erzeugen, wie Sie auf Ihrer Website benötigen. Jedes Menü kann beliebig viele geschachtelte Menüeinträge enthalten und können gefiltert werden. Ein Menüeintrag ist verknüpft mit einer Komponente oder einer externen URL. Module und Template-Styles können abhängig von einem Menüeintrag aufgerufen werden. In den Beispieldaten sind bereits mehrere Menüs angelegt.

Im weiteren Verlauf werden wir zwei Beispiele einer Navigation durchspielen: einmal eine Navigation mit statischen Seiten und einmal eine mit dynamischen Kategorien.

Erstes Beispiel: Eine statische Katalog- oder Buchstruktur

Manchmal benötigt man eine Navigation für einen Produktkatalog oder ein Handbuch. In den Beispieldaten wird so etwas für das About Joomla!-Menü benutzt. Lassen Sie uns ein kurzes Buch schreiben, das aus drei Kapiteln besteht. Die Navigation soll auf alle Seiten verlinken und sieht so aus wie in Abbildung 2.

cocoate.com/de/node/10487Statische Buchstruktur

Abbildung 2: Statische Buchstruktur

Vorbereitung

Erstellen Sie ein Buch mit mehreren Kapiteln:

  • Das Joomla!-Buch
    • Einleitung
    • Inhalt
      • Wie benutze ich A?
      • Wie benutze ich B?
    • Templates

Bevor Sie Menüeinträge erstellen, müssen Sie die einzelnen Beiträge erstellen (Inhalt → Beiträge → Neuer Beitrag) (Abbildung 3). Sie können den Beiträgen die Kategorie uncategorized zuordnen oder eine Kategorie Buch erstellen und zuordnen.

cocoate.com/de/node/10487Abb.3 Buchartikel

Abbildung 3: Sechs "Buchkapitel"

Schritt 1: Ein Menü erzeugen

Sie können ein bereits existierendes Menü als Primärlinks benutzen oder ein neues Menü erzeugen. Füllen Sie dazu einfach in Menüs → Menüs → Neues Menü das Formular aus (siehe Abbildung 4).

cocoate.com/de/node/10487Abb.4 Menu erstellen

Abbildung 4: Neues Menü erstellen

Schritt 2: Menüeinträge erzeugen

Erzeugen Sie in Menü → Primärlinks sechs neue Links zu den entsprechenden Buchkapiteln. Wählen Sie Einzelner Beitrag als Menütyp. Wählen Sie danach den Beitrag aus, und geben Sie einen Menütitel ein (siehe Abbildung 5). Wenn Sie nicht mehr wissen, wie Sie das machen können, schauen Sie hier noch mal nach: Eine "Über uns"-Seite erstellen.

cocoate.com/de/node/10487Abb.5 Menu Einträge

Abbildung 5: Menüeinträge für das Buch

Schritt 3: Erstellen und Positionieren eines Moduls

Dieser Schritt ist ein bisschen "fummelig". Sie haben jetzt die Beiträge, das Menü und die Menüeinträge, aber es fehlt noch ein Modul, das Sie im Template positionieren können, damit Ihr Menü auch angezeigt werden kann. Lassen Sie uns ein solches Modul erstellen. Gehen Sie in Erweiterungen → Module → Neues Modul, und füllen Sie das Formular aus. Wählen Sie Primärlinks im Feld Select Menu in den Basis Optionen. Wählen Sie Ja im Feld Untermenüeinträge anzeigen (siehe Abbildung 6).

cocoate.com/de/node/10487Abb.6 Modul Menu

Abbildung 6: Primärlinks-Modul

Der letzte Schritt ist die Positionierung. Klicken Sie auf den Position wählen-Button, filtern Sie nach Beez_20, und wählen Sie position-4. Speichern Sie alles – und das war's (siehe Abbildung 7).

cocoate.com/de/node/10487Abb.7 Modul Position zuweisen

Abbildung 7: Template-Position wählen

Zweites Beispiel: Verlinken von Kategorien (Nachrichtenmagazin)

Es ist möglich, ein paar Seiten auf die Art wie im ersten Beispiel zu verlinken, aber was machen Sie, wenn Sie Tausende von Beiträgen haben? Dafür gibt es in Joomla eine einfache Lösung. Erstellen Sie einfach eine Struktur mit Kategorien, und verlinken Sie die Artikel mit den jeweiligen kategorien und verlinken Sie zu einem Kategorie-Layout.

Vorbereitungen

Wir benötigen ein paar Kategorien mit Beiträgen:

Kategorien:

  • News
    • Welt
      • Afrika
      • Europa
    • Technologie
      • Internet
      • Automobile

Erstellen Sie neue oder benutzen Sie vorhandene Kategorien (Mehr über das Thema: Strukturieren Sie Ihren Inhalt mit Kategorien).

Schritt 1: Das Menü

Entscheiden Sie selbst, wie es weitergeht. Der einfachste Weg ist, das bereits vorhandene Primärlinks-Menü zu benutzen. Wenn Sie wollen, können Sie natürlich auch ein weiteres News-Menü erstellen, so wie ich das hier tue.

Schritt 2: Die Menüeinträge

Wenn Sie mit Kategorien arbeiten, müssen Sie immer daran denken, was angezeigt werden soll, nachdem Sie auf den Link geklickt haben. Das erwartete Verhalten in unserem Fall ist

  • Kategorie News = Alle Beiträge sollten erscheinen.
  • Kategorie News → Welt = Hier wollen wir nur die Welt-News haben.

und so weiter (siehe Abbildung 8).

cocoate.com/de/node/10487Abb.8 Menüeinträge

Abbildung 8: Menüeinträge im News-Menü

Um das erwartete Verhalten einzustellen, erstellen Sie einen Menüeintrag vom Typ Kategorie Blog. In Benötigte Einstellungen wählen Sie bitte Ihre frisch erstellte Kategorie News. In Blog Layout Optionen wählen Sie Include Subcategories → Alle und in # Leading Articles = 0. Erstellen Sie für jede weitere Kategorie verschachelte Menüeinträge, und Ihr Nachrichtenmagazin ist "fertig" (siehe Abbildung 9).

cocoate.com/node/6032/Layout options

Abbildung 9: Optionen im Blog Layout

Jetzt können Sie mit Tausenden von Beiträgen umgehen. Ihre Navigation ist dafür eingerichtet, und Ihre Besucher werden das System auf Anhieb verstehen (siehe Abbildung 10).

cocoate.com/de/node/10487Abb.10 News Website

Abbildung 10: Nachrichtenmagazin

Ein paar Verbesserungen

Wie Sie gesehen haben, können Sie nahezu unendlich viele Kombinationen von Einstellungen setzen. Viele Dinge sind möglich, und meistens erreichen Sie über eine Variante davon Ihr Ziel. Zum Navigationsdesign lässt sich noch sagen, dass Sie beispielsweise innerhalb eines Moduls die Menüeinträge nach Ebenen filtern können. Es ist beispielsweise möglich,

  • die erste Ebene des News-Menüs an eine obere Position und die zweite und dritte Ebene in die linke oder rechte Spalte zu positionieren oder
  • das gesamte Menü als Dropdown-Menü im oberen Bereich anzuzeigen (abhängig von den Möglichkeiten des Templates).

Wenn Sie ein wenig ausprobieren, werden Sie für fast jeden Anwendungsfall eine passende Kombination finden. Das Joomla!-Navigationssystem ist auf der einen Seite recht komplex, auf der anderen Seite allerdings sehr leistungsfähig und einfach zu verstehen.