Sbeeh (Diskussion | Beiträge) |
Sbeeh (Diskussion | Beiträge) |
||
| Zeile 11: | Zeile 11: | ||
|marker=Stub | |marker=Stub | ||
}} | }} | ||
| + | |||
| + | |||
Die '''Sticky-Navigation''' befindet sich direkt unter der Bühne und bleibt beim Scrollen sichtbar am oberen Bildschirmrand kleben (''"sticky"''). Sie dient als '''primäre Orientierungshilfe''' für die Inhalte der aktuellen Webseite und organisiert die Seite in logische Abschnitte. | Die '''Sticky-Navigation''' befindet sich direkt unter der Bühne und bleibt beim Scrollen sichtbar am oberen Bildschirmrand kleben (''"sticky"''). Sie dient als '''primäre Orientierungshilfe''' für die Inhalte der aktuellen Webseite und organisiert die Seite in logische Abschnitte. | ||
| Zeile 48: | Zeile 50: | ||
| + | <bootstrap_accordion> | ||
| − | + | <bootstrap_panel heading="==== Wann sollte die Sticky-Navigation verwendet werden? ===="> | |
| − | ==== Wann sollte die Sticky-Navigation verwendet werden? ==== | ||
* Wenn die Seite aus mehreren '''großen inhaltlichen Abschnitten''' besteht (z. B. „Über uns“, „Projekte“, „Kontakt“). | * Wenn die Seite aus mehreren '''großen inhaltlichen Abschnitten''' besteht (z. B. „Über uns“, „Projekte“, „Kontakt“). | ||
* Um eine '''übersichtliche Struktur''' innerhalb einer Seite zu schaffen. | * Um eine '''übersichtliche Struktur''' innerhalb einer Seite zu schaffen. | ||
* Wenn die Zielgruppe durch eine klare Navigation '''schneller zum gewünschten Inhalt''' gelangen soll. | * Wenn die Zielgruppe durch eine klare Navigation '''schneller zum gewünschten Inhalt''' gelangen soll. | ||
* Um '''inhaltliche Schwerpunkte''' oder Zielgruppenbereiche sichtbar zu machen. | * Um '''inhaltliche Schwerpunkte''' oder Zielgruppenbereiche sichtbar zu machen. | ||
| − | '''Nicht geeignet für:''' Kurze Seiten mit nur wenigen Abschnitten oder Seiten, die keine klar strukturierten Inhaltsbereiche aufweisen. | + | '''Nicht geeignet für:''' Kurze Seiten mit nur wenigen Abschnitten oder Seiten, die keine klar strukturierten Inhaltsbereiche aufweisen.</bootstrap_panel> |
| + | |||
| − | ==== Wie wird die Sticky Navigation erstellt? ==== | + | <bootstrap_panel heading="==== Wie wird die Sticky Navigation erstellt? ===="> |
Die Sticky-Navigation wird '''automatisch generiert''', sobald bestimmte Voraussetzungen erfüllt sind: | Die Sticky-Navigation wird '''automatisch generiert''', sobald bestimmte Voraussetzungen erfüllt sind: | ||
| Zeile 64: | Zeile 67: | ||
* Der '''Text der H2-Überschrift''' wird standardmäßig als Menüpunkt verwendet. | * Der '''Text der H2-Überschrift''' wird standardmäßig als Menüpunkt verwendet. | ||
| − | Die Sticky-Navigation wird '''nicht angezeigt''', wenn weniger als zwei H2-Überschriften vorhanden sind. | + | <span style='font-size:30px;'>⚠</span>Die Sticky-Navigation wird '''nicht angezeigt''', wenn weniger als zwei H2-Überschriften vorhanden sind.</bootstrap_panel> |
| − | ==== Einstellungsmöglichkeiten für Inhaltselemente ==== | + | <bootstrap_panel heading="==== Einstellungsmöglichkeiten für Inhaltselemente ===="> |
| − | Sie können die Darstellung der Sticky-Navigation '''individuell anpassen''' – allerdings nur, wenn das jeweilige Inhaltselement diese Option unterstützt. | + | Sie können die Darstellung der Sticky-Navigation '''individuell anpassen''' – allerdings nur, wenn das jeweilige Inhaltselement diese Option unterstützt. |
'''So finden Sie die Einstellungen:''' | '''So finden Sie die Einstellungen:''' | ||
| Zeile 75: | Zeile 78: | ||
[[Datei:Einstellungsmöglichkeiten für Sticky Navigation in Inhaltselementen .png|links|mini|''Einstellungsmöglichkeiten für Sticky Navigation in Inhaltselementen'' ]] | [[Datei:Einstellungsmöglichkeiten für Sticky Navigation in Inhaltselementen .png|links|mini|''Einstellungsmöglichkeiten für Sticky Navigation in Inhaltselementen'' ]] | ||
| + | |||
| + | |||
| + | |||
| + | |||
| Zeile 85: | Zeile 92: | ||
# '''Überschrift in der Navigation deaktivieren ''' Wenn dieser Haken gesetzt ist, wird das Element nicht in der Sticky-Navigation sichtbar. Nutzen Sie dies z. B. für Überschriften, die nur zur visuellen Gliederung dienen, aber keinen eigenständigen Inhaltsteil repräsentieren. | # '''Überschrift in der Navigation deaktivieren ''' Wenn dieser Haken gesetzt ist, wird das Element nicht in der Sticky-Navigation sichtbar. Nutzen Sie dies z. B. für Überschriften, die nur zur visuellen Gliederung dienen, aber keinen eigenständigen Inhaltsteil repräsentieren. | ||
| − | # '''Alternativen Navigationstitel festlegen''' Statt der H2-Überschrift kannst du einen eigenen, kürzeren oder präziseren Titel für die Navigation eingeben. | + | # '''Alternativen Navigationstitel festlegen''' Statt der H2-Überschrift kannst du einen eigenen, kürzeren oder präziseren Titel für die Navigation eingeben. Ideal für: |
| − | Ideal für: | + | #* Langwierige Überschriften (z. B. „Unsere zukunftsorientierten Forschungsprojekte im Bereich Künstliche Intelligenz“ → „Forschung & KI“). |
| − | * Langwierige Überschriften (z. B. „Unsere zukunftsorientierten Forschungsprojekte im Bereich Künstliche Intelligenz“ → „Forschung & KI“). | + | #* Konsistente Formulierungen (z. B. „Kontakt“ statt „Kontaktformular“). |
| − | * Konsistente Formulierungen (z. B. „Kontakt“ statt „Kontaktformular“). | ||
| − | Tipp: Verwende klare, kurze und eindeutige Titel – sie sollen auf einen Blick verständlich sein. | + | Tipp: Verwende klare, kurze und eindeutige Titel – sie sollen auf einen Blick verständlich sein. </bootstrap_panel> |
| − | ==== Empfehlungen für eine gute Sticky-Navigation ==== | + | <bootstrap_panel heading="==== Empfehlungen für eine gute Sticky-Navigation ===="> |
Die Sticky-Navigation ist kein Ersatz für eine klare Seitenstruktur. Sie funktioniert nur, wenn die Inhalte bereits gut gegliedert sind. Achten Sie daher auf eine sinnvolle Gliederung mit H2-Überschriften – erst dann wird die Navigation sinnvoll. | Die Sticky-Navigation ist kein Ersatz für eine klare Seitenstruktur. Sie funktioniert nur, wenn die Inhalte bereits gut gegliedert sind. Achten Sie daher auf eine sinnvolle Gliederung mit H2-Überschriften – erst dann wird die Navigation sinnvoll. | ||
{| class="wikitable" | {| class="wikitable" | ||
| Zeile 129: | Zeile 135: | ||
❌ „Zusammenarbeit mit internationalen Partnern im Rahmen von EU-Förderprojekten“ | ❌ „Zusammenarbeit mit internationalen Partnern im Rahmen von EU-Förderprojekten“ | ||
| − | ✅ „Internationale Kooperationen“ | + | ✅ „Internationale Kooperationen“ </bootstrap_panel> |
| − | ==== Siehe auch: ==== | + | <bootstrap_panel heading="==== Siehe auch: ===="> |
* [[TYPO3 - Navigation|Navigation]] | * [[TYPO3 - Navigation|Navigation]] | ||
| − | * [[TYPO3 - Burger Menue|Burger Menü]] | + | * [[TYPO3 - Burger Menue|Burger Menü]]</bootstrap_panel></bootstrap_accordion> |
Version vom 7. Oktober 2025, 12:40 Uhr
Allgemeine Informationen
| Anleitung | |
|---|---|
| Informationen | |
| Betriebssystem | Alle |
| Service | TYPO3 |
| Interessant für | Angestellte |
| HilfeWiki des ZIM der Uni Paderborn | |
 | This article is only a draft. Information provided here is most possibly incomplete and/or imprecise. Feel free to help us by expanding it. |
 | This article is a stub. You can help us by expanding it. |
Die Sticky-Navigation befindet sich direkt unter der Bühne und bleibt beim Scrollen sichtbar am oberen Bildschirmrand kleben ("sticky"). Sie dient als primäre Orientierungshilfe für die Inhalte der aktuellen Webseite und organisiert die Seite in logische Abschnitte.
Wichtig: Die Sticky-Navigation ist eine interne Seiten-Navigation – sie hilft Besucher*innen, zwischen verschiedenen Inhaltsteilen einer einzelnen Seite zu springen.
- Wenn die Seite aus mehreren großen inhaltlichen Abschnitten besteht (z. B. „Über uns“, „Projekte“, „Kontakt“).
- Um eine übersichtliche Struktur innerhalb einer Seite zu schaffen.
- Wenn die Zielgruppe durch eine klare Navigation schneller zum gewünschten Inhalt gelangen soll.
- Um inhaltliche Schwerpunkte oder Zielgruppenbereiche sichtbar zu machen.
Die Sticky-Navigation wird automatisch generiert, sobald bestimmte Voraussetzungen erfüllt sind:
- Es müssen mindestens zwei Inhaltselemente mit einer H2-Überschrift vorhanden sein.
- Jedes solche Element generiert automatisch einen Menüpunkt in der Sticky-Navigation.
- Der Text der H2-Überschrift wird standardmäßig als Menüpunkt verwendet.
⚠Die Sticky-Navigation wird nicht angezeigt, wenn weniger als zwei H2-Überschriften vorhanden sind.
Einstellungsmöglichkeiten für Inhaltselemente[Bearbeiten | Quelltext bearbeiten]
Sie können die Darstellung der Sticky-Navigation individuell anpassen – allerdings nur, wenn das jeweilige Inhaltselement diese Option unterstützt.
So finden Sie die Einstellungen:
- Öffnen Sie das Inhaltselement im Bearbeitungsmodus.
- Wechseln Sie zum Reiter „Allgemein“.
- Überschrift in der Navigation deaktivieren Wenn dieser Haken gesetzt ist, wird das Element nicht in der Sticky-Navigation sichtbar. Nutzen Sie dies z. B. für Überschriften, die nur zur visuellen Gliederung dienen, aber keinen eigenständigen Inhaltsteil repräsentieren.
- Alternativen Navigationstitel festlegen Statt der H2-Überschrift kannst du einen eigenen, kürzeren oder präziseren Titel für die Navigation eingeben. Ideal für:
- Langwierige Überschriften (z. B. „Unsere zukunftsorientierten Forschungsprojekte im Bereich Künstliche Intelligenz“ → „Forschung & KI“).
- Konsistente Formulierungen (z. B. „Kontakt“ statt „Kontaktformular“).
Tipp: Verwende klare, kurze und eindeutige Titel – sie sollen auf einen Blick verständlich sein.
Die Sticky-Navigation ist kein Ersatz für eine klare Seitenstruktur. Sie funktioniert nur, wenn die Inhalte bereits gut gegliedert sind. Achten Sie daher auf eine sinnvolle Gliederung mit H2-Überschriften – erst dann wird die Navigation sinnvoll.
| Kriterium | Empfehlung | ||
|---|---|---|---|
| Anzahl der Menüpunkte | Maximal 5–7 Punkte – mehr erschwert die Übersicht | ||
| Länge der Titel | Maximal 3–5 Wörter. Kurz, präzise, verständlich | ||
| Inhaltliche Relevanz | Jeder Menüpunkt sollte einen wichtigen Sinnabschnitt der Seite repräsentieren. | ||
| Konsistenz | Nutze einheitliche Formulierungen (z. B. immer „Veranstaltungen“ statt „Events“ und „Veranstaltungen“). | ||
| Lesbarkeit | Vermeide Fachbegriffe, wenn die Zielgruppe nicht spezialisiert ist. |
Beispiel:
❌ „Zusammenarbeit mit internationalen Partnern im Rahmen von EU-Förderprojekten“
✅ „Internationale Kooperationen“
