Ein Menü ist ein Container, der eine Liste von Menüeinträgen enthält, zum Beispiel Links zu Beiträgen. Ein Menümodul wird verwendet, um Menüs auf einer Website anzuzeigen. Untermenüs sind Menüs, in denen die Menüeinträge in einer Hierarchie organisiert sind. In diesem Tutorial erstellen wir Beiträge für verschiedene Hunde und Katzen und verlinken sie mithilfe eines Menüs, das eine Hierarchie von Menüeinträgen enthält.
Voraussetzungen
- 1 Einführung in das Tutorial behandelt, wo das Tutorial ausgeführt werden kann, und enthält die erforderlichen Frontend-/Backend-Anmelde- und Website-Anzeige-Tutorials (1.1, 1.2, 1.3).
Einrichtung
Die Beiträge erstellen
Sieben einfache Beiträge erstellen, jeweils nur mit einem Titel.
- Auf Inhalt > Beiträge klicken, dann auf Neu klicken. Ergebnis: Ein Formular für einen neuen Beitrag erscheint.
- Den Titel des Beitrags eingeben, dann auf Speichern & Neu klicken (eine Option unter der Schaltfläche Speichern & Schließen), um ihn zu speichern und ein neues leeres Formular zu öffnen. Für alle sieben Titel wiederholen:
- Animals
- Dogs
- Collies
- Pomeranians
- Cats
- Burmese
- Russian Blues
- Nach Eingabe des letzten Beitrags auf Speichern & Schließen klicken, um zur Beitragsliste zurückzukehren. Ergebnis: Die sieben Beiträge erscheinen in der Liste.
Ein Menü erstellen
- Zu Menüs > Verwalten navigieren und auf Neu klicken. Ergebnis: Das Formular Neues Menü erscheint.
- Titel: Animals
- Eindeutiger Name: animal-menu
- Speichern & Schließen
Das Menü Animals erscheint nun links unter Menüs > Site. Auf Animals klicken. Ergebnis: Eine leere Liste von Menüeinträgen wird angezeigt.
Menüeinträge hinzufügen
- Auf Neu klicken. Ergebnis: Ein Formular für einen neuen Menüeintrag erscheint.
- Titel: Animals
- Menüeintragstyp: Beiträge > Einzelner Beitrag
- Beitrag auswählen: Animals
- Auf Speichern & Neu klicken
- Titel: Cats
- Menüeintragstyp: Beiträge > Einzelner Beitrag
- Beitrag auswählen: Cats
- Übergeordneter Eintrag: Animals
- Auf Speichern & Neu klicken
- Titel: Dogs
- Menüeintragstyp: Beiträge > Einzelner Beitrag
- Beitrag auswählen: Dogs
- Übergeordneter Eintrag: Animals
- Auf Speichern & Neu klicken
- Titel: Burmese
- Menüeintragstyp: Beiträge > Einzelner Beitrag
- Beitrag auswählen: Burmese
- Übergeordneter Eintrag: Cats
- Auf Speichern & Neu klicken
- Titel: Russian Blues
- Menüeintragstyp: Beiträge > Einzelner Beitrag
- Beitrag auswählen: Russian Blues
- Übergeordneter Eintrag: Cats
- Auf Speichern & Neu klicken
- Titel: Collies
- Menüeintragstyp: Beiträge > Einzelner Beitrag
- Beitrag auswählen: Collies
- Übergeordneter Eintrag: Dogs
- Auf Speichern & Neu klicken
- Titel: Pomeranians
- Menüeintragstyp: Beiträge > Einzelner Beitrag
- Beitrag auswählen: Pomeranians
- Übergeordneter Eintrag: Dogs
- Auf Speichern & Schließen klicken.
Wir haben nun ein Menü mit Menüeinträgen, die mit unseren Beiträgen verknüpft sind und hierarchisch angeordnet sind – Dogs und Cats unter Animals, und jede Rasse unter ihrer jeweiligen Überschrift. Als Nächstes erstellen wir Menümodule, damit das Menü im Frontend erscheint.
Schritte
Menümodule erstellen
Wir erstellen vier Site Module, um vier verschiedene Ansichten des Menüs anzuzeigen:
- All Animals: erscheint auf der Startseite mit einer vollständigen Liste von Links zum gesamten Animals-Menü.
- Animals: erscheint beim Beitrag Animals und zeigt nur Links zu Cats und Dogs.
- Dogs: enthält nur Hunderassen und erscheint nur bei Beiträgen über Hunde.
- Cats: enthält nur Katzenrassen und erscheint nur bei Beiträgen über Katzen.
- Zu Inhalt > Site Module navigieren. Es können Site Module für Breadcrumbs, Hauptmenü und Anmeldeformular angezeigt werden. Diese sind bei einer neuen Joomla-Installation standardmäßig vorhanden und erscheinen auf der Startseite.
- Auf Neu klicken.
- Modultyp auswählen: Menü
- Titel: All Animals
- Menü auswählen: Animals
- Basis-Eintrag: Animals
- Startebene: 1
- Endebene: Alle
- Position: Sidebar Left
- Auf Menüzuweisung klicken:
- Modulzuweisung: Nur auf den ausgewählten Seiten
- Auf Keine klicken, um die Kontrollkästchen zu leeren, dann ankreuzen: Startseite
- Auf Speichern & Neu klicken.
- Modultyp auswählen: Menü
- Titel: Animals
- Menü auswählen: Animals
- Basis-Eintrag: Animals
- Startebene: 2
- Endebene: 2 (Cats und Dogs sind die einzigen angezeigten Einträge)
- Position: Sidebar Left
- Auf Menüzuweisung klicken:
- Modulzuweisung: Nur auf den ausgewählten Seiten
- Auf Keine klicken, um die Kontrollkästchen zu leeren, dann ankreuzen: Animals > Animals, Main Menu > Animals
- Auf Speichern & Neu klicken.
- Modultyp auswählen: Menü
- Titel: Dogs
- Menü auswählen: Animals
- Basis-Eintrag: Dogs
- Startebene: 3
- Endebene: Alle
- Position: Sidebar Left
- Auf Menüzuweisung klicken:
- Modulzuweisung: Nur auf den ausgewählten Seiten
- Auf Keine klicken, um die Kontrollkästchen zu leeren, dann auf den Dropdown-Pfeil rechts neben Dogs klicken und Auswählen wählen. Dadurch werden Dogs, Collies und Pomeranians ausgewählt.
Menüzuweisung für Dogs - Auf Speichern & Neu klicken.
- Modultyp auswählen: Menü
- Titel: Cats
- Menü auswählen: Animals
- Basis-Eintrag: Cats
- Startebene: 3
- Endebene: Alle
- Position: Sidebar Left
- Auf Menüzuweisung klicken:
- Modulzuweisung: Nur auf den ausgewählten Seiten
- Auf Keine klicken, um die Kontrollkästchen zu leeren, dann auf den Dropdown-Pfeil rechts neben Cats klicken und Auswählen wählen. Cats, Burmese und Russian Blues sollten dann alle markiert sein.
- Auf Speichern & Schließen klicken.
Ergebnisse ansehen
- Die Website ansehen. Ergebnis: Das Modul All Animals erscheint in der linken Seitenleiste der Startseite und zeigt das gesamte Animals-Menü an.
Das Menü All Animals auf der Startseite zusammen mit den anderen Menü-Site-Modulen (Main, Login und Breadcrumbs unter dem Banner). - Auf Animals klicken. Ergebnis: Der Beitrag Animals erscheint rechts, und das Modul Animals in der linken Seitenleiste zeigt Links zu Dogs und Cats.
Das Menü-Site-Modul Animals ist zusammen mit dem Beitrag Animals konfiguriert, um die Menüauswahl zu vereinfachen. - Auf Dogs klicken. Ergebnis: Der Beitrag Dogs erscheint rechts, und das Modul Dogs in der linken Seitenleiste zeigt Links zu Collies und Pomeranians.
- Auf Cats klicken. Ergebnis: Der Beitrag Cats erscheint rechts, und das Modul Cats in der linken Seitenleiste zeigt Links zu Burmese und Russian Blues.
Alle katzenbezogenen Beiträge zeigen das Menü Cats an. Das Breadcrumb-Menü ermöglicht die Navigation zurück in der Hierarchie. - Auf Pomeranians klicken. Ergebnis: Der Beitrag Pomeranians erscheint rechts mit dem Dogs-Modul auf der linken Seite. Hinweis: Das Breadcrumb-Menü über dem Beitrag verlinkt zurück zu Dogs, Animals und Home.
Wir haben sieben Beiträge erstellt, auf die unser Menü verlinken soll, und anschließend das Menü als leeren Container angelegt. Wir haben dem Menü Menüeinträge in einer Hierarchie hinzugefügt, indem für jeden Eintrag ein übergeordneter Eintrag festgelegt wurde. Abschließend haben wir vier Menü-Site-Module erstellt, um das Menü auf der Website auf unterschiedliche Weise anzuzeigen: ein umfassendes Menü auf der Startseite sowie kontextsensitive Menüs, die relevante Links für die Bereiche Animals, Dogs und Cats anzeigen.
Die geführte Tour dieses Tutorials starten
Mache dieses Tutorial Schritt für Schritt in einem Joomla Playground: einer Joomla-Website, die in deinem Browser läuft.
Der Start dauert einige Sekunden, höchstens eine halbe Minute.
Konzepte
Ein einzelnes Menü enthält Untermenüeinträge, die hierarchisch angeordnet sind, und wird verwendet, um mehrere kontextbezogene Untermenüs auf der Website anzuzeigen. Dies kann besonders bei großen Hierarchien mit vielen Menüeinträgen hilfreich sein.
Große Dropdown-Menüs können verwirrend und schwer zu navigieren sein. Die Verwendung von Untermenüs kann die Navigation vereinfachen, während weiterhin ein einziges großes und komplexes Menü verwendet wird.