Wie man das Modul Navigationsmenü richtig nutzt

[MacKP]

Seit einiger Zeit sind die Module "Navigation Hauptpunkte" und "Navigation Unterpunkte" nicht mehr nötig. In TYPOlight 2.7 wurden diese sogar ganz entfernt.

Ich habe deshalb mein erstes Tutorial darüber geschrieben, wie man das Modul "Navigationsmenü"(mit Start-/Stoplevel, Hard Limit, Referenzseite) richtig einsetzt.

Benutzertutorial im Wiki öffnen

---
Edit: Link aktualisiert

[Timo]

Horizontale Navigation mit Hovereffekt

Hallo MacKP,

danke für das tolle Tutorial - nur eine Frage bleibt:
Wie funktioniert ein horizontales Menü mit hover Effekt - also genau ein solches Menü wie auf der Typolight.org Seite.
Ich habe typolight 2.7.1 und habe es mit Navigationsmenü (startl=0, Stopl=1) und dem Modul Hovernav probiert allerdings werden die Unterpunkte beim Überfahren der Hauptpunkte gar nicht angezeigt, wenn ich dann einen Hauptpunkt anklicke werden die Unterpunkte auf der Seite dargestellt. Wie aber kann ich zu einer horizontalen Navigation gelangen wie man sie auf der https://contao.org Seite sehen kann also mit hovereffekt?

Vielen Dank.

lg Timo

[MacKP]

Hallo Timo,
das ist alles eine Sache von CSS ;-)
Der Stoplevel 1 ist bei einer Hover Navigation nicht richtig, da dann (kann man im Quelltext sehen) die Unterpunkte ja gar nicht angezeigt werden. Daher können die auch bei einem Hover Effekt gar nicht auftauchen.
Stoplevel also erst mal raus nehmen.
Dann werden alle Navigationspunkte dargestellt. Nun brauchst du nur noch passendes CSS (und für den IE6 nen bissel Javascript).
Hier mal eine kleine Anleitung wie es geht (Technik nennt sich Hybrid Navigation) -> http://www.alistapart.com/articles/hybrid/.

Viele Grüße

[gracilis]

MacKP

dieser hier

http://www.alistapart.com/articles/hybrid/

[Timo]

Danke! Das ist ein gutes Tutorial!
Kann ich aber das modul hovernav nun gar nicht nutzen und muss alles über css gesteuert werden?
Evtl. gelingt besagte Navigation unter Einsatz des Moduls hovernav einfacher??? Die Beschriebung zum Modul hört sich simpel an.

lg

[MacKP]

Ich habe mit dem Modul hovernav noch nicht wirklich gearbeitet.
Aber ich glaube mich zu erinnern, das es im Grunde 2 Verschiedene LIsten aus der Navigation macht. Das finde ich immer suboptimal, da dann die Semantik flöten geht.
Aber wenn du das Modul nutzen möchtest und fragen hast solltest du das in einem anderen Thread klären ;-)

Viele Grüße

[gx-turbo]

hallo
ich bin neu bei contao und auch Neuling in punkto cms.
Ich plane eine eigene, private website mittels eines cms zu erstellen.
Meine cms Favoriten sind bisher Contao und CMS made simple.

Derzeit versuche ich in Contao ein bisschen hineinzuschnuppern, hab eine lokale Installation auf einem Linux server im Heimnetz am laufen.
Ein Punkt, bei dem ich bisher nicht so richtig vorwärts komme, ist die menü Geschichte. Deshalb bin ich auch auf dieses Tutorial und diesen thread gestoßen.

Meine konkrete Frage:
Im Tutorial wird ein modul TL-test_Headernavi verwendet, das offensichtlich horizontal ausgerichtet ist.
Wie konfiguriert man das in Contao? Oder muss man auch dafür (ohne hover effekt) schon css editieren bzw einen Zusatz installieren ?

danke

Gerd

[MacKP]

Hallo gx-turbo,
die Horizontale Ausrichtung kannst du mit CSS erreichen. Dazu brauchst du kein extra Template oder Modul oder sonst was ;-)

Viele Grüße

[gx-turbo]

Danke MacKP für die schnelle Antwort

...die Horizontale Ausrichtung kannst du mit CSS erreichen.

schade , wäre doch ein nettes feature wenn man das einfach so als option anwählen könnte.
Muss mich also in CSS einarbeiten. Gibt sicher auch Beispiele dafür. Falls du da noch n guten link kennst ...
Oder hast du den code aus deinem tutorial parat ?

Grüße, Gerd

[MacKP]

Für jede Navigationsart gibt es genug Beispiele und Tutorials im Interne ;-)

Viele Grüße

[rost]

Benutzertutorial im Wiki öffnen

Der Link scheint tot zu sein. Kann man das Tut jetzt woanders finden?

[MacKP]

Hallo rost,
das ist ja schon uralt... hier mal der aktuelle Link:

http://de.contaowiki.org/ModulNavigation

Danke fürs Bescheid geben. Ich schau mal das ich den oben auch abänder.

Viele Grüße

[rost]

Super, danke.

[Tim G]

Automatische css Klasse aus dem Seitentitel für jedes <li>

Hi,
ich ergänze mal ein kleines Template für das NavigationModul.

Wer kennt das nicht, man möchte eine individuelle Navigation erstellen z.B. jeder Menupunkt eine andere Farbe.
Ein Weg wäre jeder Seite eine eigene Klasse zu geben z.B. den Seitentitel. Das ist händisch recht mühsam und fehlerbehaftet.
Besser gehts über das Template.

Dort innerhalb der Übergabe der aktuellen Klassen der Seite ein

<?php echo standardize($item['title']);; ?>

ergänzen.
Die standardize() Funktion wird im Core zur Generierung des Seitenalias verwendet und wandelt Umlaute um und ersetzt Leerzeichen zu "-".

Damit wird jedem <li> eine Klasse aus dem jeweiligen Seitentitel übergeben. "Über uns" wird z.B. zu "ueber-uns".

Hier noch das ganze nav_default Template:

<ul class="<?php echo $this->level; ?>">
<?php foreach ($this->items as $item): ?>
<?php if ($item['isActive']): ?>
<li class="active<?php if ($item['class']): ?> <?php echo $item['class']; ?> <?php endif; ?> <?php echo standardize($item['title']); ?>" ><span class="active<?php if ($item['class']): ?> <?php echo $item['class']; ?><?php endif; ?>"><?php echo $item['link']; ?></span><?php echo $item['subitems']; ?></li>
<?php else: ?>
<li<?php if ($item['class']): ?> class="<?php echo $item['class']; ?> <?php echo standardize($item['title']); ?>"<?php else: ?> class="<?php echo standardize($item['title']); ?>"<?php endif; ?>><a href="<?php echo $item['href']; ?>" title="<?php echo $item['pageTitle'] ? $item['pageTitle'] : $item['title']; ?>"<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?><?php if ($item['accesskey'] != ''): ?> accesskey="<?php echo $item['accesskey']; ?>"<?php endif; ?><?php if ($item['tabindex']): ?> tabindex="<?php echo $item['tabindex']; ?>"<?php endif; ?><?php if ($item['nofollow']): ?> rel="nofollow"<?php endif; ?><?php echo $item['target']; ?>><?php echo $item['link']; ?></a><?php echo $item['subitems']; ?></li>
<?php endif; ?>
<?php endforeach; ?>
</ul>

(einfach in .html5 umbennenen für Contao 2.10 (ist auch aus der 2.10 rauskompiert))

Grüße Tim