TYPO3 - Burger Menue: Unterschied zwischen den Versionen

ZIM HilfeWiki - das Wiki
 
(51 dazwischenliegende Versionen von 8 Benutzern werden nicht angezeigt)
Zeile 1: Zeile 1:
{{Infobox article
+
{{article
| os = Alle
+
|type=Anleitung
| service = Typo3
+
|os=Alle
| targetgroup = Angestellte, Bereiche, Studierende
+
|service=Service:Typo3
| type = Anleitung
+
|targetgroup=Angestellte, Bereiche, Studierende
| disambiguation =  
+
|displaytitle=TYPO3 - Burger Menü
 +
|hasdisambig=Nein
 
}}
 
}}
  
<!-- Entweder draft mit fertigem Inhalt -->
+
Alle Webseiten der Universität Paderborn verfügen über ein zentrales Burger-Menü.
{{draft}}
 
  
<!--oder stub und einer Erklärung, was hier passieren soll-->
+
Untere Bereiche (z. B. Institute oder Professuren) übernehmen standardmäßig das Burger-Menü ihres jeweils übergeordneten Bereichs.
{{stub}}
 
  
<!-- Folgend der empfohlene Seitenaufbau -->
+
Ohne besondere Einstellung durch das ZIM wird also automatisch das Menü der nächsthöheren Ebene angezeigt.
Kurzer Einleitungstext
 
  
== Was ist zu tun? ==
+
Ein eigenes Burger-Menü für einen Bereich wird '''nur bei Bedarf''' eingerichtet.
* Stichpunktartige Auflistung
+
----
* aller Arbeitsschritte
 
 
 
== Schritt für Schritt Anleitung ==
 
Wenn Sie für Ihren Bereich ein Mega-Dropdown-Menü wünschen, kontaktieren Sie bitte das IMT über [mailto:imt@upb.de imt@upb.de], teilen Sie Ihre Wünsche mit und begründen Sie den Bedarf. Mega-Dropdown-Menüs sollen nur bei größeren Websites mit vielen Webseiten zum Einsatz kommen, bei denen eine Navigation über Kontextmenüs und Linkboxen nicht ausreicht, um dem Nutzer einen hinreichenden Überblick zu verschaffen. Wird Ihrem Wunsche entsprochen, richtet das IMT in Ihrem Typo3-Bereich einen Ordner "Navigation", darunter einen Ordner "Hauptmenü", darunter eine Verweisseite "Eintrag Megadropdown" für das erste Mega-Dropdown-Menü, darunter eine Standardseite "Eintrag Megadropdown" für die erste Rubrikenüberschrift und darunter wieder eine Verweisseite "Eintrag Megadropdown" für den ersten Link innerhalb der ersten Rubrik ein. Weitere Mega-Dropdown-Menüs, Rubrikenüberschriften und Links können einfach durch Kopieren, Einfügen, Umbenennen und Bearbeiten dieser Vorlagen erzeugt werden.
 
[[Datei:Screenshot Webanwendungen TYPO3 Mega Dropdown Menue einfuegen 1.jpg|Abbildung 1|left]]
 
<br clear=all>
 
 
 
 
 
In der Webansicht z. B. der Seite "Seite 1" sieht das geschlossene Mega-Dropdown-Menü dann folgendenmaßen aus:
 
[[Datei:Screenshot Webanwendungen TYPO3 Mega Dropdown Menue einfuegen 2.jpg|Abbildung 2|left]]
 
<br clear=all>
 
 
 
 
 
Und das geöffnete Mega-Dropdown-Menü so:
 
[[Datei:Screenshot Webanwendungen TYPO3 Mega Dropdown Menue einfuegen 3.jpg|Abbildung 3|left]]
 
<br clear=all>
 
  
 +
== Wann ist ein eigenes Burger-Menü sinnvoll? ==
 +
Ein eigenes Burger-Menü sollte nur bei größeren und strukturell komplexeren Webauftritten eingesetzt werden – also dann, wenn:
  
Sie können - und sollten - nun das Mega-Dropdown-Menü über "rechte Maustaste / Bearbeiten" an Ihre Bedürfnisse anpassen:
+
* viele Unterseiten vorhanden sind
[[Datei:Screenshot Webanwendungen TYPO3 Mega Dropdown Menue einfuegen 4.jpg|Abbildung 4|left]]
+
* eine einfache Navigation über Linklisten nicht mehr ausreicht
<br clear=all>
+
* Nutzende sonst keinen ausreichenden Überblick erhalten
  
 +
Wenn Sie für Ihren Bereich ein eigenes Burger-Menü wünschen, wenden Sie sich bitte an das [mailto:&#x20;zim@uni-paderborn.de ZIM].
  
Da das Mega-Dropdown-Menü oben den Eintrag "DIREKT ZUR SEITE [Name des Mega-Dropdown-Menüs mit Link auf eine Standardseite]" enthält, müssen Sie unter "Verweisziel" eine Seite angeben, auf die im Anschluss an "DIREKT ZUR SEITE" verlinkt werden soll. Die verlinkte Seite sollte einen Überblick über die Inhalte des Mega-Dropdown-Menüs und entsprechende Links bieten, wie es an der Universität Paderborn z. B. auf den Seiten http://www.uni-paderborn.de/studium/ oder http://www.uni-paderborn.de/fakultaeten/ zu sehen ist. Klicken Sie also auf "Datensätze durchblättern":
+
Beschreiben Sie kurz Ihre Anforderungen und begründen Sie den Bedarf.
[[Datei:Screenshot Webanwendungen TYPO3 Mega Dropdown Menue einfuegen 5.jpg|Abbildung 5|left]]
+
----
<br clear=all>
 
  
 +
== Varianten eines eigenen Burger-Menüs ==
 +
Es gibt zwei Möglichkeiten:
  
Wählen Sie eine Seite als Verweisziel - hier im Beispiel die Seite "Seite 1":
+
===== 1. Automatisch generiertes Burger-Menü =====
[[Datei:Screenshot Webanwendungen TYPO3 Mega Dropdown Menue einfuegen 6.jpg|Abbildung 6|left]]
+
Das Menü wird automatisch aus der Seitenstruktur (Über- und Unterordnung der Standardseiten) im Seitenbaum erzeugt.
<br clear=all>
 
  
 +
In diesem Fall sind in der Regel keine zusätzlichen Einstellungen erforderlich.
  
Ändern Sie den Seitentitel, der zugleich der Name des Mega-Dropdown-Menüs ist, aber nicht mit dem Seitentitel/Namen der verlinkten Seite identisch sein muss. Zur leichteren Orientierung in Typo3 ist es jedoch in der Regel sinnvoll, den gleichen Seitentitel zu verwenden. In diesem Beispiel hat das allerdings den Nachteil, dass nun der Name des Mega-Dropdown-Menüs - "Seite 1" - wenig aussagekräftig ist:
+
* Die Hierarchie und die Reihenfolge aus dem Backend wird 1:1 ins Burger-Menü übernommen. Verschieben Sie also Ihre Seiten im Backend, wenn Sie eine andere Reihenfolge im Burger-Menü wünschen.
[[Datei:Screenshot Webanwendungen TYPO3 Mega Dropdown Menue einfuegen 7.jpg|Abbildung 7|left]]
+
* Standardmäßig wird der Seitentitel als Bezeichner für den Menü-Punkt übernommen. Es sei denn, Sie haben in den Seiteneigenschaften einen Alternativen Navigationstitel hinterlegt. Dann wird dieser im Menü angezeigt. Sowohl Seitentitel als auch den Alternativen Navigationstitel können Sie in den Seiteneigenschaften ändern.  
<br clear=all>
+
* Über die Seiteneigenschaften können Sie für jede Seite entscheiden, ob sie im Menü angezeigt werden soll oder nicht.
 +
* Deaktivierte Seiten werden nicht im Burger-Menü angezeigt
  
 +
===== 2. Manuell gepflegtes Burger-Menü =====
 +
Bei komplexeren Anforderungen kann das Burger-Menü manuell angelegt und gepflegt werden.
  
Und so sieht das Mega-Dropdown-Menü nach der Umbenennung in der Webansicht aus:
+
Hierfür richtet das ZIM in Ihrem TYPO3-Bereich einen Ordner "Navigation" ein. Einen Menüpunkt legen Sie über Verweisseiten an.  
[[Datei:Screenshot Webanwendungen TYPO3 Mega Dropdown Menue einfuegen 8.jpg|Abbildung 8|left]]
 
<br clear=all>
 
  
 +
===== Für beide Varianten gilt =====
  
Anschließend sollten Sie auch die Rubrikenüberschrift und den Link Ihren Bedürfnissen anpassen. Wählen Sie bei den Standardseite für die Rubrikenüberschrift über die rechte Maustaste "Bearbeiten":
+
* Die Hierarchie und die Reihenfolge wir beim automatisch generierten Burger-Menü aus dem Seitenbaum Ihres Bereichs 1:1 ins Burger-Menü übernommen. Beim manuell gepflegten buger-Menü wird die Hierarchie und die Reihenfolge aus dem Ordner "Navigation" übernommen. Verschieben Sie also Ihre Seiten im Seitenbaum bzw. im Navigationsordner, wenn Sie eine andere Reihenfolge im Burger-Menü wünschen.
[[Datei:Screenshot Webanwendungen TYPO3 Mega Dropdown Menue einfuegen 9.jpg|Abbildung 9|left]]
+
* Deaktivierte Seiten werden nicht im Burger-Menü angezeigt.
<br clear=all>
+
* Standardmäßig wird der Seitentitel als Bezeichner für den Menü-Punkt übernommen. Es sei denn, Sie haben in den Seiteneigenschaften einen Alternativen Navigationstitel hinterlegt. Dann wird dieser im Menü angezeigt. Sowohl Seitentitel als auch den Alternativen Navigationstitel können Sie in den Seiteneigenschaften ändern. [[Datei:Screenshot TYPO Burger-Menue Seiteneigenschaften alternativer Navigationstitel.png|alternativtext=Screenshot TYPO3 – Burger-Menü: Funktion "Alternativer Navigationstitel" in den Seiteneigenschaften.|zentriert|gerahmt|Burger-Menü: Funktion "Alternativer Navigationstitel" in den Seiteneigenschaften.]]
 +
* Über die Seiteneigenschaften können Sie für jede Seite entscheiden, ob sie im Menü angezeigt werden soll oder nicht.[[Datei:Screenshot TYPO Burger-Menue Seiteneigenschaften in menues aktivieren.png|alternativtext=Screenshot TYPO3 – Burger-Menü: Funktion "in Menüs aktivieren" in den Seiteneigenschaften.|zentriert|gerahmt|Screenshot TYPO3 – Burger-Menü: Funktion "in Menüs aktivieren" in den Seiteneigenschaften.]]
  
 +
== Schritt für Schritt Anleitung für die Bearbeitung eines manuell gepflegten Burger-Menüs ==
  
Markieren Sie auf "Allgemein" den Seitentitel:
+
===== Beispiel =====
[[Datei:Screenshot Webanwendungen TYPO3 Mega Dropdown Menue einfuegen 10.jpg|Abbildung 10|left]]
+
Hier wurden im bereits bestehenden Burger-Menü des ZIM exemplarisch drei Verweisseiten auf drei Ebenen eingefügt:[[Datei:Typo3-burger-menue-01.png|links|mini|ohne|450px]]
 
<br clear=all>
 
<br clear=all>
  
 
+
Das Burger-Menü und die drei Verweisseiten sehen im Web folgendermaßen aus:
Überschreiben Sie ihn und speichern Sie anschließend das Dokument. Da die Rubrikenüberschrift nicht mit irgendeiner Seite verlinkt wird und die Seite, deren Seitentitel die Rubrikenüberschrift definiert, eine Standardseite ist, müssen Sie nur den Seitentitel - hier im Beispiel "Rubrik 1" - angeben, nicht aber ein Verweisziel:
+
[[Datei:Typo3-burger-menue-02.png|links|mini|ohne|850px]]
[[Datei:Screenshot Webanwendungen TYPO3 Mega Dropdown Menue einfuegen 11.jpg|Abbildung 11|left]]
 
 
<br clear=all>
 
<br clear=all>
  
 +
[[Datei:Typo3-burger-menue-03.png|links|mini|ohne|850px]]
  
Und so sieht das Mega-Dropdown-Menü nach der Umbenennung der Rubrikenüberschrift in der Webansicht aus:
+
===== Was ist zu tun? =====
[[Datei:Screenshot Webanwendungen TYPO3 Mega Dropdown Menue einfuegen 12.jpg|Abbildung 12|left]]
+
* '''Seite auswählen:''' Im Seitenbaum die Seite auswählen und mit einem Rechtsklick auf „Bearbeiten“ klicken.
<br clear=all>
+
* '''Seitentitel anpassen:''' Den Titel der Seite ändern und ggf. das Verweisziel anpassen.
 +
* '''Navigationsstruktur erstellen:''' Erstellen Sie die Struktur über mehrere Ebenen. Für die Haupt- und Untermenüpunkte jeweils eine Seite erstellen und durch Verweise zu den entsprechenden Zielseiten verlinken.
 +
* '''Speichern.'''
  
 +
==== Ausführliche Anleitung ====
  
Ändern Sie danach den Link. Wählen Sie über die rechte Maustaste "Bearbeiten":
+
=====Ebene 1=====
[[Datei:Screenshot Webanwendungen TYPO3 Mega Dropdown Menue einfuegen 13.jpg|Abbildung 13|left]]
+
[[Datei:Typo3-burger-menue-04.png|links|mini|ohne|450px]]
 +
<br>
 +
* Wählen Sie im Seitenbaum die Seite aus, die Sie bearbeiten möchten.
 +
* In diesem Beispiel ''"1. Ebene Burger Menü (Probe)"''.
 +
* Öffnen Sie mit einem Rechtsklick das Kontextmenü.
 +
* Klicken Sie auf '''"Bearbeiten"'''.
 
<br clear=all>
 
<br clear=all>
  
 
+
[[Datei:Typo3-burger-menue-05.png|links|mini|ohne|450px]]
Klicken Sie auf "Datensätze durchblättern":
+
<br>
[[Datei:Screenshot Webanwendungen TYPO3 Mega Dropdown Menue einfuegen 14.jpg|Abbildung 14|left]]
+
# Ändern Sie den Seitentitel
 +
# Klicken Sie auf '''"Datensatz durchblättern"''' um das Verweisziel zu ändern.
 
<br clear=all>
 
<br clear=all>
  
 
+
[[Datei:Typo3-burger-menue-06.png|links|mini|ohne|450px]]
Wählen Sie ein Linkziel - hier im Beispiel die Seite "Seite 4e":
+
<br>
[[Datei:Screenshot Webanwendungen TYPO3 Mega Dropdown Menue einfuegen 15.jpg|Abbildung 15|left]]
+
* In diesem Beispiel verwenden wir als Verweisziel die Seite '''"Über uns"''', auf der die Geschäftsbereiche des ZIM genannt werden.
 
<br clear=all>
 
<br clear=all>
  
 
+
Klicken Sie auf <code> Speichern</code> um die Änderungen zu übernehmen.
Ändern Sie den Seitentitel, der zugleich der Name des Links ist, aber nicht mit dem Seitentitel/Namen der verlinkten Seite identisch sein muss. Zur leichteren Orientierung in Typo3 ist es jedoch in der Regel sinnvoll, den gleichen Seitentitel zu verwenden. In diesem Beispiel hat das allerdings den Nachteil, dass nun der Name des Links - "Seite 4e" - wenig aussagekräftig ist:
+
<br>
[[Datei:Screenshot Webanwendungen TYPO3 Mega Dropdown Menue einfuegen 16.jpg|Abbildung 16|left]]
+
Die Seite sieht nun im Web folgendermaßen aus:
 +
[[Datei:Typo3-burger-menue-07.png|links|mini|ohne|850px]]
 
<br clear=all>
 
<br clear=all>
  
 
+
=====Ebene 2=====
Und so sieht das Mega-Dropdown-Menü nach der Umbenennung des Links in der Webansicht aus:
+
Gehen Sie folgendermaßen vor, um die zweite Ebene zu bearbeiten:
[[Datei:Screenshot Webanwendungen TYPO3 Mega Dropdown Menue einfuegen 17.jpg|Abbildung 17|left]]
+
[[Datei:Typo3-burger-menue-08.png|links|mini|ohne|450px]]
 +
<br>
 +
* Wählen Sie im Seitenbaum die Seite aus, die Sie bearbeiten möchten.
 +
* In diesem Beispiel die Seite ''"2. Ebene Burger-Menü (Probe)"''.
 +
* Öffnen Sie mit einem Rechtsklick das Kontextmenü.
 +
* Klicken Sie auf '''"Bearbeiten"'''.
 
<br clear=all>
 
<br clear=all>
  
 
+
Der Seitentitel der Standardseite auf der 2. Ebene dient als Rubrikenüberschrift.
Sie können nun weitere Rubrikenüberschriften und Links hinzufügen. Kopieren Sie dazu am besten einfach - wie auf https://hilfe.uni-paderborn.de/TYPO3_Seite_oder_Seiten_kopieren_und_einf%C3%BCgen beschrieben - die bereits vorhandene Seite mit der Rubrikenüberschrift und die bereits vorhandene Seite mit dem Link, fügen Sie die Kopien an geeigneter Stelle ein, benenennen Sie sie erforderlichenfalls um und passen Sie die Verweisziele an. In diesem Beispiel ist die Standardseite "Rubrik 1" mitsamt der Verweisseite "Seite 4e" kopiert sowie die Kopie eingefügt und umbenannt worden. Anschließend wurde die Verweisseite "Seite 4e" gesondert kopiert, die Kopie eingefügt, in "Neuer Inhalt" umbenannt und das Verweisziel geändert. Das Verweisziel der Seite "Neuer Inhalt" kann man im Seitenbaum freilich nicht unmittelbar erkennen:
+
[[Datei:Typo3-burger-menue-09.png|links|mini|ohne|450px]]
[[Datei:Screenshot Webanwendungen TYPO3 Mega Dropdown Menue einfuegen 18.jpg|Abbildung 18|left]]
+
<br>
 +
* Ändern Sie den Seitentitel gemäß den Inhalten der Rubrik.
 +
* Hier wird ''"IT-Infrastruktur"'' als Seitentitel eingetragen.
 +
* Speichern Sie anschließend die Änderungen.
 
<br clear=all>
 
<br clear=all>
  
 
+
Im Web sieht die Seite nun folgendermaßen aus:
So sieht das Mega-Dropdown-Menü mit der zusätzlichen Rubrik in der Webansicht aus:
+
[[Datei:Typo3-burger-menue-10.png|links|mini|ohne|850px]]
[[Datei:Screenshot Webanwendungen TYPO3 Mega Dropdown Menue einfuegen 19.jpg|Abbildung 19|left]]
 
 
<br clear=all>
 
<br clear=all>
  
 
+
[[Datei:Typo3-burger-menue-11.png|links|mini|ohne|850px]]
Sie können in den Mega-Dropdown-Menüs nicht nur auf Standardseiten verlinken, sondern auch auf Seiten, die als Links zu externen Seiten fungieren. Markieren Sie eine Verweisseite - hier "Seite 4e" unter "Rubrik 3" - und wählen Sie über die rechte Maustaste "Seitenaktionen / Neu":
 
[[Datei:Screenshot Webanwendungen TYPO3 Mega Dropdown Menue einfuegen 20.jpg|Abbildung 20|left]]
 
 
<br clear=all>
 
<br clear=all>
  
 +
Wenn Sie auf ''Seite "IT-Infrastruktur" öffnen'' klicken, gelangen Sie allerdings zu einer Webseite ohne Inhalt, und zwar auch dann, wenn Sie vorher '''"Neuberechnen des URLS-Segments aus dem Seitentitel"''' ausgeführt haben. Sie gelangen nämlich nicht zu der Inhaltsseite
 +
* https://imt.uni-paderborn.de/imt-it-infrastruktur
 +
sondern zu der Navigationsseite
 +
* https://imt.uni-paderborn.de/navigation/hauptmenue/bereiche-des-imt/it-infrastruktur
  
Fügen Sie die neue Seite an geeigneter Stelle im Seitenbaum ein:
+
Das können Sie ändern, indem Sie die Standardseite ''"IT-Infrastruktur"'' innerhalb der Navigation in eine Verweisseite umwandeln.  
[[Datei:Screenshot Webanwendungen TYPO3 Mega Dropdown Menue einfuegen 21.jpg|Abbildung 21|left]]
+
<br>
<br clear=all>
 
 
 
  
Sie können nun auf "Allgemein" als Verweisziel statt einer Standardseite eine Seite wählen, die als Link zu einer externen URL fungiert. Dabei hat eine "externe" URL für Sie jede Webseite, auf die Sie nicht innhalb Ihres Typo3-Bereiches als interne Seite zugreifen können. In diesem Beispiel wird die die Link-zu-externer-URL-Seite "Fakultät für Kulturwissenschaften" als Verweisziel gewählt:
+
[[Datei:Typo3-burger-menue-12.png|links|mini|ohne|450px]]
[[Datei:Screenshot Webanwendungen TYPO3 Mega Dropdown Menue einfuegen 22.jpg|Abbildung 22|left]]
+
<br>
 +
* Öffnen Sie die Seite in der Ansicht '''"Seiteninhalt"'''.
 +
* Wechseln Sie in den Tab '''"Allgemein"'''.
 +
* Ändern Sie den '''"Typ"''' auf '''"Verweis"'''.
 +
* Speichern Sie die Änderungen.
 
<br clear=all>
 
<br clear=all>
  
 
+
[[Datei:Typo3-burger-menue-13.png|links|mini|ohne|450px]]
Jetzt müssen Sie noch einen Seitentitel - hier "Fakultät KW" - vergeben, der zugleich der Name des Links im Mega-Dropdown-Menü ist. Speichern und schließen Sie danach das Dokument:
+
<br>
[[Datei:Screenshot Webanwendungen TYPO3 Mega Dropdown Menue einfuegen 23.jpg|Abbildung 23|left]]
+
* Beim Speichern werden Sie darauf hingewiesen, dass die Seite aktualisiert werden muss.
 +
* Klicken Sie auf '''"OK"'''
 
<br clear=all>
 
<br clear=all>
  
 
+
[[Datei:Typo3-burger-menue-14.png|links|mini|ohne|450px]]
Im Seitenbaum wird nun die neue Verweisseite "Fakultät KW" angezeigt. Dass das Verweisziel eine Link-zu-externer-URL-Seite ist, kann man freilich nicht unmittelbar erkennen:
+
<br>
[[Datei:Screenshot Webanwendungen TYPO3 Mega Dropdown Menue einfuegen 24.jpg|Abbildung 24|left]]
+
* Als Verweisziel wird in diesem Beispiel die Standardseite ''IMT: IT-Infrastruktur'' gewählt.
 +
* Speichern Sie die Änderungen.
 
<br clear=all>
 
<br clear=all>
  
 +
Nun gelangt man, wenn man auf ''Seite „IT-Infrastruktur“ öffnen'' klickt, auf die Seite
 +
* https://imt.uni-paderborn.de/imt-it-infrastruktur
 +
Das kann man – bei entsprechender Einstellung – bereits erkennen, wenn man mit dem Mauszeiger über ''Seite „IT-Infrastruktur“ öffnen'' fährt, denn dann wird links unten auf der Seite die URL des Linkziels angezeigt.
  
So sieht das Mega-Dropdown-Menü mit drei Rubriken mit maximal drei Links in der Webansicht aus, wobei die Links in diesem Beispiel zum Teil identisch sind, was in der Praxis in der Regel nicht so häufig vorkommen dürfte/sollte:
+
[[Datei:Typo3-burger-menue-15.png|links|mini|ohne|850px]]
[[Datei:Screenshot Webanwendungen TYPO3 Mega Dropdown Menue einfuegen 25.jpg|Abbildung 25|left]]
 
 
<br clear=all>
 
<br clear=all>
  
 +
Um das Untermenü zu vervollständigen, kann man die Verweisseite der 2. Ebene kopieren und entsprechend der Anzahl der Geschäftsbereiche mehrmals einfügen sowie die eingefügten Verweisseiten bezüglich Seitentitel und Verweisziel anpassen und sichtbar machen. Gehen Sie dazu folgendermaßen vor:
  
Die Anzahl der Links in den Rubriken ist nicht auf drei Links beschränkt. Sie können durchaus bis zu zehn (einzeilige) Links in einer Rubrik unterbringen, sollten aber darauf achten, dass das Mega-Dropdown-Menü insgesamt einigermaßen ausgewogen aussieht, also z. B. nicht die erste Rubrik nur einen einzigen einzeiligen Link, die zweite Rubrik dagegen zehn Links aufweist. Das folgende Beispiel, bei dem die Liste der Links zu den Fakultäten unter "Rubrik 3"vervollständigt wurde, ist insofern ästhetisch nicht optimal:
+
[[Datei:Typo3-burger-menue-16.png|links|mini|ohne|450px]]
[[Datei:Screenshot Webanwendungen TYPO3 Mega Dropdown Menue einfuegen 26.jpg|Abbildung 26|left]]
+
<br>
 +
* Wählen Sie die gewünschte Seite aus.
 +
* Öffnen Sie mit einem Rechtsklick das Kontextmenü.
 +
* Klicken Sie auf '''Kopieren'''.
 
<br clear=all>
 
<br clear=all>
  
 
+
Darstellung im Seitenbaum:
Und das ist die Webansicht:
+
[[Datei:Typo3-burger-menue-17.png|links|mini|ohne|650px]]
[[Datei:Screenshot Webanwendungen TYPO3 Mega Dropdown Menue einfuegen 27.jpg|Abbildung 27|left]]
 
 
<br clear=all>
 
<br clear=all>
  
 
+
Im Web sieht die Bereichsliste nun folgendermaßen aus:
Sie können auch ein zweites Mega-Dropdown-Menü oder nacheinander mehrere Mega-Dropdown-Menüs anlegen. Kopieren Sie dazu einfach eine vorhandene Mega-Dropdown-Menü-Seite - in diesem Beispiel die Verweisseite "Seite 1":
+
[[Datei:Typo3-burger-menue-18.png|links|mini|ohne|850px]]
[[Datei:Screenshot Webanwendungen TYPO3 Mega Dropdown Menue einfuegen 28.jpg|Abbildung 28|left]]
 
 
<br clear=all>
 
<br clear=all>
  
 +
Gleiches – Seitentitel umbenennen, Verweisziel auswählen, Änderungen speichern, Verweisseite kopieren und gemäß der gewünschten Anzahl der Menüpunkte der betreffenden Ebene einfügen, die eingefügten Verweisseiten bezüglich Seitentitel und Verweisziel ändern, speichern und sichtbar machen – ist nun noch hinsichtlich der 3. Ebene und der als Vorlage dienenden Verweisseite „3. Ebene Burger-Menü (Probe)“ zu tun:
  
Fügen Sie die Kopie an geeigneter Stelle ein - in diesem Beispiel nach der Verweisseite "Seite 1":
+
[[Datei:Typo3-burger-menue-19.png|links|mini|ohne|450px]]
[[Datei:Screenshot Webanwendungen TYPO3 Mega Dropdown Menue einfuegen 29.jpg|Abbildung 29|left]]
+
<br>
 +
*
 
<br clear=all>
 
<br clear=all>
  
 
+
===Ebene 3===
Benennen Sie die kopierte Seite um und machen Sie sie über die rechte Maustaste mit einem Klick auf "Aktivieren" sichtbar:
+
[[Datei:Typo3-burger-menue-20.png|links|mini|ohne|450px]]
[[Datei:Screenshot Webanwendungen TYPO3 Mega Dropdown Menue einfuegen 30.jpg|Abbildung 30|left]]
+
<br>
 +
* Wählen Sie die gewünschte Seite im Seitenbaum aus.
 +
* Öffnen Sie mit einem Rechtsklick das Kontextmenü.
 +
* Klicken Sie auf '''Bearbeiten'''.
 
<br clear=all>
 
<br clear=all>
  
 
+
[[Datei:Typo3-burger-menue-21.png|links|mini|ohne|450px]]
Im Seitenbaum wird die neue Seite nach der Umbennnung - in diesem Beispiel in "MDDM 2" - und nach dem Ausklappen der Unterseiten wie folgt angezeigt:
+
<br>
[[Datei:Screenshot Webanwendungen TYPO3 Mega Dropdown Menue einfuegen 31.jpg|Abbildung 31|left]]
+
* Ändern Sie den '''Seitentitel'''.
 +
* Ändern Sie das '''Verweisziel'''.
 
<br clear=all>
 
<br clear=all>
  
 
+
Darstellung des Seitenbaums:
In der Praxis ist es in der Regel nicht sinnvoll, zwei Mega-Dropdown-Menüs mit dem gleichen Inhalt anzubieten. Die mitkopierten Rubrikenüberschriften-Seiten und Link-Seiten sollten deshalb umbenannt und mit neuem Inhalt versehen werden. Sie sollten nicht so unverändert bleiben, wie sie der folgende Screenshot der Webansicht zeigt:
+
[[Datei:Typo3-burger-menue-22.png|links|mini|ohne|450px]]
[[Datei:Screenshot Webanwendungen TYPO3 Mega Dropdown Menue einfuegen 32.jpg|Abbildung 32|left]]
 
 
<br clear=all>
 
<br clear=all>
  
Darüber hinaus können Sie überflüssige / überflüssig gewordene Link-Seiten oder Rubrikenüberschriften-Seiten oder Mega-Dropdown-Menü-Seiten im Backend nach dem Markieren der jeweiligen Seite über die rechte Maustaste mit "Seitenaktionen / Löschen" aus dem Seitenbaum entfernen:
+
Darstellung des Menüs im Web:
[[Datei:Screenshot Webanwendungen TYPO3 Mega Dropdown Menue einfuegen 33.jpg|Abbildung 33|left]]
+
[[Datei:Typo3-burger-menue-23.png|links|mini|ohne|850px]]
 
<br clear=all>
 
<br clear=all>
  
== Siehe auch ==
+
==Siehe auch==
Weiter interessante Artikel verlinken
+
* [[TYPO3]]

Aktuelle Version vom 3. März 2026, 16:32 Uhr

Allgemeine Informationen
Anleitung
Informationen
BetriebssystemAlle
ServiceTYPO3
Interessant fürAngestellte, Bereiche und Studierende
HilfeWiki des ZIM der Uni Paderborn

set displaytitle to TYPO3 - Burger Menü

Alle Webseiten der Universität Paderborn verfügen über ein zentrales Burger-Menü.

Untere Bereiche (z. B. Institute oder Professuren) übernehmen standardmäßig das Burger-Menü ihres jeweils übergeordneten Bereichs.

Ohne besondere Einstellung durch das ZIM wird also automatisch das Menü der nächsthöheren Ebene angezeigt.

Ein eigenes Burger-Menü für einen Bereich wird nur bei Bedarf eingerichtet.


Wann ist ein eigenes Burger-Menü sinnvoll?[Bearbeiten | Quelltext bearbeiten]

Ein eigenes Burger-Menü sollte nur bei größeren und strukturell komplexeren Webauftritten eingesetzt werden – also dann, wenn:

  • viele Unterseiten vorhanden sind
  • eine einfache Navigation über Linklisten nicht mehr ausreicht
  • Nutzende sonst keinen ausreichenden Überblick erhalten

Wenn Sie für Ihren Bereich ein eigenes Burger-Menü wünschen, wenden Sie sich bitte an das ZIM.

Beschreiben Sie kurz Ihre Anforderungen und begründen Sie den Bedarf.


Varianten eines eigenen Burger-Menüs[Bearbeiten | Quelltext bearbeiten]

Es gibt zwei Möglichkeiten:

1. Automatisch generiertes Burger-Menü[Bearbeiten | Quelltext bearbeiten]

Das Menü wird automatisch aus der Seitenstruktur (Über- und Unterordnung der Standardseiten) im Seitenbaum erzeugt.

In diesem Fall sind in der Regel keine zusätzlichen Einstellungen erforderlich.

  • Die Hierarchie und die Reihenfolge aus dem Backend wird 1:1 ins Burger-Menü übernommen. Verschieben Sie also Ihre Seiten im Backend, wenn Sie eine andere Reihenfolge im Burger-Menü wünschen.
  • Standardmäßig wird der Seitentitel als Bezeichner für den Menü-Punkt übernommen. Es sei denn, Sie haben in den Seiteneigenschaften einen Alternativen Navigationstitel hinterlegt. Dann wird dieser im Menü angezeigt. Sowohl Seitentitel als auch den Alternativen Navigationstitel können Sie in den Seiteneigenschaften ändern.
  • Über die Seiteneigenschaften können Sie für jede Seite entscheiden, ob sie im Menü angezeigt werden soll oder nicht.
  • Deaktivierte Seiten werden nicht im Burger-Menü angezeigt
2. Manuell gepflegtes Burger-Menü[Bearbeiten | Quelltext bearbeiten]

Bei komplexeren Anforderungen kann das Burger-Menü manuell angelegt und gepflegt werden.

Hierfür richtet das ZIM in Ihrem TYPO3-Bereich einen Ordner "Navigation" ein. Einen Menüpunkt legen Sie über Verweisseiten an.

Für beide Varianten gilt[Bearbeiten | Quelltext bearbeiten]
  • Die Hierarchie und die Reihenfolge wir beim automatisch generierten Burger-Menü aus dem Seitenbaum Ihres Bereichs 1:1 ins Burger-Menü übernommen. Beim manuell gepflegten buger-Menü wird die Hierarchie und die Reihenfolge aus dem Ordner "Navigation" übernommen. Verschieben Sie also Ihre Seiten im Seitenbaum bzw. im Navigationsordner, wenn Sie eine andere Reihenfolge im Burger-Menü wünschen.
  • Deaktivierte Seiten werden nicht im Burger-Menü angezeigt.
  • Standardmäßig wird der Seitentitel als Bezeichner für den Menü-Punkt übernommen. Es sei denn, Sie haben in den Seiteneigenschaften einen Alternativen Navigationstitel hinterlegt. Dann wird dieser im Menü angezeigt. Sowohl Seitentitel als auch den Alternativen Navigationstitel können Sie in den Seiteneigenschaften ändern.
    Screenshot TYPO3 – Burger-Menü: Funktion "Alternativer Navigationstitel" in den Seiteneigenschaften.
    Burger-Menü: Funktion "Alternativer Navigationstitel" in den Seiteneigenschaften.
  • Über die Seiteneigenschaften können Sie für jede Seite entscheiden, ob sie im Menü angezeigt werden soll oder nicht.
    Screenshot TYPO3 – Burger-Menü: Funktion "in Menüs aktivieren" in den Seiteneigenschaften.
    Screenshot TYPO3 – Burger-Menü: Funktion "in Menüs aktivieren" in den Seiteneigenschaften.

Schritt für Schritt Anleitung für die Bearbeitung eines manuell gepflegten Burger-Menüs[Bearbeiten | Quelltext bearbeiten]

Beispiel[Bearbeiten | Quelltext bearbeiten]

Hier wurden im bereits bestehenden Burger-Menü des ZIM exemplarisch drei Verweisseiten auf drei Ebenen eingefügt:

Typo3-burger-menue-01.png


Das Burger-Menü und die drei Verweisseiten sehen im Web folgendermaßen aus:

Typo3-burger-menue-02.png


Typo3-burger-menue-03.png
Was ist zu tun?[Bearbeiten | Quelltext bearbeiten]
  • Seite auswählen: Im Seitenbaum die Seite auswählen und mit einem Rechtsklick auf „Bearbeiten“ klicken.
  • Seitentitel anpassen: Den Titel der Seite ändern und ggf. das Verweisziel anpassen.
  • Navigationsstruktur erstellen: Erstellen Sie die Struktur über mehrere Ebenen. Für die Haupt- und Untermenüpunkte jeweils eine Seite erstellen und durch Verweise zu den entsprechenden Zielseiten verlinken.
  • Speichern.

Ausführliche Anleitung[Bearbeiten | Quelltext bearbeiten]

Ebene 1[Bearbeiten | Quelltext bearbeiten]
Typo3-burger-menue-04.png


  • Wählen Sie im Seitenbaum die Seite aus, die Sie bearbeiten möchten.
  • In diesem Beispiel "1. Ebene Burger Menü (Probe)".
  • Öffnen Sie mit einem Rechtsklick das Kontextmenü.
  • Klicken Sie auf "Bearbeiten".


Typo3-burger-menue-05.png


  1. Ändern Sie den Seitentitel
  2. Klicken Sie auf "Datensatz durchblättern" um das Verweisziel zu ändern.


Typo3-burger-menue-06.png


  • In diesem Beispiel verwenden wir als Verweisziel die Seite "Über uns", auf der die Geschäftsbereiche des ZIM genannt werden.


Klicken Sie auf Speichern um die Änderungen zu übernehmen.
Die Seite sieht nun im Web folgendermaßen aus:

Typo3-burger-menue-07.png


Ebene 2[Bearbeiten | Quelltext bearbeiten]

Gehen Sie folgendermaßen vor, um die zweite Ebene zu bearbeiten:

Typo3-burger-menue-08.png


  • Wählen Sie im Seitenbaum die Seite aus, die Sie bearbeiten möchten.
  • In diesem Beispiel die Seite "2. Ebene Burger-Menü (Probe)".
  • Öffnen Sie mit einem Rechtsklick das Kontextmenü.
  • Klicken Sie auf "Bearbeiten".


Der Seitentitel der Standardseite auf der 2. Ebene dient als Rubrikenüberschrift.

Typo3-burger-menue-09.png


  • Ändern Sie den Seitentitel gemäß den Inhalten der Rubrik.
  • Hier wird "IT-Infrastruktur" als Seitentitel eingetragen.
  • Speichern Sie anschließend die Änderungen.


Im Web sieht die Seite nun folgendermaßen aus:

Typo3-burger-menue-10.png


Typo3-burger-menue-11.png


Wenn Sie auf Seite "IT-Infrastruktur" öffnen klicken, gelangen Sie allerdings zu einer Webseite ohne Inhalt, und zwar auch dann, wenn Sie vorher "Neuberechnen des URLS-Segments aus dem Seitentitel" ausgeführt haben. Sie gelangen nämlich nicht zu der Inhaltsseite

sondern zu der Navigationsseite

Das können Sie ändern, indem Sie die Standardseite "IT-Infrastruktur" innerhalb der Navigation in eine Verweisseite umwandeln.

Typo3-burger-menue-12.png


  • Öffnen Sie die Seite in der Ansicht "Seiteninhalt".
  • Wechseln Sie in den Tab "Allgemein".
  • Ändern Sie den "Typ" auf "Verweis".
  • Speichern Sie die Änderungen.


Typo3-burger-menue-13.png


  • Beim Speichern werden Sie darauf hingewiesen, dass die Seite aktualisiert werden muss.
  • Klicken Sie auf "OK"


Typo3-burger-menue-14.png


  • Als Verweisziel wird in diesem Beispiel die Standardseite IMT: IT-Infrastruktur gewählt.
  • Speichern Sie die Änderungen.


Nun gelangt man, wenn man auf Seite „IT-Infrastruktur“ öffnen klickt, auf die Seite

Das kann man – bei entsprechender Einstellung – bereits erkennen, wenn man mit dem Mauszeiger über Seite „IT-Infrastruktur“ öffnen fährt, denn dann wird links unten auf der Seite die URL des Linkziels angezeigt.

Typo3-burger-menue-15.png


Um das Untermenü zu vervollständigen, kann man die Verweisseite der 2. Ebene kopieren und entsprechend der Anzahl der Geschäftsbereiche mehrmals einfügen sowie die eingefügten Verweisseiten bezüglich Seitentitel und Verweisziel anpassen und sichtbar machen. Gehen Sie dazu folgendermaßen vor:

Typo3-burger-menue-16.png


  • Wählen Sie die gewünschte Seite aus.
  • Öffnen Sie mit einem Rechtsklick das Kontextmenü.
  • Klicken Sie auf Kopieren.


Darstellung im Seitenbaum:

Typo3-burger-menue-17.png


Im Web sieht die Bereichsliste nun folgendermaßen aus:

Typo3-burger-menue-18.png


Gleiches – Seitentitel umbenennen, Verweisziel auswählen, Änderungen speichern, Verweisseite kopieren und gemäß der gewünschten Anzahl der Menüpunkte der betreffenden Ebene einfügen, die eingefügten Verweisseiten bezüglich Seitentitel und Verweisziel ändern, speichern und sichtbar machen – ist nun noch hinsichtlich der 3. Ebene und der als Vorlage dienenden Verweisseite „3. Ebene Burger-Menü (Probe)“ zu tun:

Typo3-burger-menue-19.png



Ebene 3[Bearbeiten | Quelltext bearbeiten]

Typo3-burger-menue-20.png


  • Wählen Sie die gewünschte Seite im Seitenbaum aus.
  • Öffnen Sie mit einem Rechtsklick das Kontextmenü.
  • Klicken Sie auf Bearbeiten.


Typo3-burger-menue-21.png


  • Ändern Sie den Seitentitel.
  • Ändern Sie das Verweisziel.


Darstellung des Seitenbaums:

Typo3-burger-menue-22.png


Darstellung des Menüs im Web:

Typo3-burger-menue-23.png


Siehe auch[Bearbeiten | Quelltext bearbeiten]


Bei Fragen oder Problemen können Sie uns zu unseren Servicezeiten telefonisch oder per E-Mail erreichen:


☎ Helpdesk: +49 5251 60-5544 ☎ Medien: +49 5251 60-2821 E-Mail: zim@uni-paderborn.de

Oder Sie besuchen uns vor Ort: Sie finden das Notebook-Café gemeinsam mit dem Servicecenter Medien in H1.201.

Servicezeiten

Mo. Di. – Do. Fr.
NBC Vor-Ort-Support Geschlossen 09:00 – 13:00 Uhr Geschlossen
Helpdesk Telefonsupport 08:30 – 15:00 Uhr 08:30 – 15:00 Uhr 08:30 – 13:00 Uhr
Servicecenter Medien 09:00 – 15:00 Uhr 09:00 – 15:00 Uhr 09:00 – 13:00 Uhr
Cookies helfen uns bei der Bereitstellung des ZIM HilfeWikis. Bei der Nutzung vom ZIM HilfeWiki werden die in der Datenschutzerklärung beschriebenen Cookies gespeichert.