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.

Tipp: 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. 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). Sie können den Beiträgen die Kategorie uncategorized zuordnen oder eine Kategorie Buch erstellen und zuordnen (siehe Abbildung 3).

cocoate.com/de/node/10487Beiträge für Buch

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/6057Neues Menü

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/6057Menüeinträge für Buch

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. Gehen Sie in den Basis Optionen zum Feld Menü, und wählen Sie Primärlinks aus. Wählen Sie Ja im Feld Untermenüeinträge anzeigen (siehe Abbildung 6).

cocoate.com/de/node/6057Primärlinks Modul

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/6057Template Position wählen

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? Die Antwort ist leicht in Joomla! 1.6. Erstellen Sie einfach eine Struktur mit 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/6057Menüeinträge im News Menü

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/de/node/6057Optionen im Blog Layout

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/6057Nachrichtenmagazin

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

 

Kommentare

Bei mir werden im Menü immer die Unterpunkte mit angezeigt, mache ich da etwas falsch? Oder geht es wirklich nicht?
Wenn ich z.B.
* Welt
o Afrika
o Europa
* Technologie
o Internet
o Automobile
Möchte ich die Punkte Afrika und Europa erst sehen, wenn ich auf Welt klicke. Geht das nicht???

Doch. Das verwendete Modul für das Menü muss in den "Basisoptionen" den Eintrag "Untermenüeinträge anzeigen" auf "nein" gesetzt haben.

Das Modul das das Menü anzeigt, hat in den Basisoptionen einen Schalter Untermenüeinträge anzeigen (Abbildung 6). Wenn Du den auf Nein stellst, sollte es gehen.

kann es evtl sein das die dropmenufunktion nicht bei allen templates verfügbar ist?

Die Seitennavigation der "Buchstruktur" (Weiter / Zurück) funktioniert bei mir nicht wie erwartet.
Wenn ich bei "Das Joomla!-Buch" starte, muss ich die "Zurück"-Buttons anwählen, um die Beiträge in der geplanten Reihenfolge zu sehen.
Woran kann das liegen?

Mir geht es wie 2 Beiträge weiter oben. Benutze Joomla 1.7 und ich habe exakt wie angegeben alles angelegt, allerdings wenn ich auf "Das Joomla!-Buch" gehe, zeigt er Zurück an....Eigentlich sollte da weiter stehen! Der läuft also alles rückwärts durch...nach Recherche fiel mir auf, dass er die Beitragsreihenfolge nimmt, egal ob man die Reihenfolge unter Optionen auf "Reihenfolge" einstellt! (Also er nimmt nicht die Reihenfolge vom Tab "kategorien". Außerdem kann man die Beitragsreihenfolge nicht direkt umändern...man müsste also alle Beiträge neu schreiben und schauen, dass man den tiefsten Reiter als Ersten nimmt, damit dieser auch die letzte Reihenfolge kriegt! Das ist aber SEHR umständlich :/ gibt es da noch eine andere Variante, wie man die Reihenfolge der Beiträge direkt ändern kann?

hm ... in dem Beispiel wollte ich die Menüstruktur zeigen und nicht so sehr das Weiterblättern. Ich habe es allerdings nochmal ausprobiert und bei mir scheint die Sortierung per Parameter zu funktionieren.
Nichtsdestotrotz - so ist es etwas umständlich. Ich würde vermutlich die Weiterblättern Funktion ausblenden :)
Hagen

Antwort Seitennavigation Reihenfolge:

http://www.joomlaportal.de/joomla-1-7-jo...

Antwort Seitennavigation:

Gehe in Inhalte/ Beiträge, dort oben rechts auf Optionen.
Den Reiter "Shared Options" anklicken und bei Beitragssortierung von "neueste zuerst" auf "Reihenfolge" ändern.
Vorausgesetzt, man hat auch die Reihenfolge der Beiträge in der entsprechenden Kategorie seinen Wünschen angepasst.