Ergebnis 1 bis 14 von 14

Thema: Wie man das Modul Navigationsmenü richtig nutzt

  1. #1
    Contao-Yoda Avatar von MacKP
    Registriert seit
    15.06.2009.
    Ort
    Duisburg
    Beiträge
    13.292
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Beitrag Wie man das Modul Navigationsmenü richtig nutzt

    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
    Geändert von MacKP (23.08.2011 um 16:36 Uhr)

  2. #2
    Contao-Nutzer Avatar von Timo
    Registriert seit
    22.06.2009.
    Beiträge
    75

    Standard 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

  3. #3
    Contao-Yoda Avatar von MacKP
    Registriert seit
    15.06.2009.
    Ort
    Duisburg
    Beiträge
    13.292
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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
    Geändert von MacKP (24.06.2009 um 13:34 Uhr)
    Contao Pool | C-C-A | MetaModels | [Internetseite -> Mediendepot Ruhr]
    [Arbeitet bei -> Paus Design & Medien]
    "I can EXPLAIN it to you, but I can't UNDERSTAND it for you."

  4. #4
    Contao-Nutzer Avatar von gracilis
    Registriert seit
    19.06.2009.
    Ort
    Rostock
    Beiträge
    180
    .per.aspera.ad.astra.

  5. #5
    Contao-Nutzer Avatar von Timo
    Registriert seit
    22.06.2009.
    Beiträge
    75

    Standard

    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

  6. #6
    Contao-Yoda Avatar von MacKP
    Registriert seit
    15.06.2009.
    Ort
    Duisburg
    Beiträge
    13.292
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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
    Contao Pool | C-C-A | MetaModels | [Internetseite -> Mediendepot Ruhr]
    [Arbeitet bei -> Paus Design & Medien]
    "I can EXPLAIN it to you, but I can't UNDERSTAND it for you."

  7. #7
    Contao-Nutzer
    Registriert seit
    27.07.2011.
    Beiträge
    24

    Standard

    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

  8. #8
    Contao-Yoda Avatar von MacKP
    Registriert seit
    15.06.2009.
    Ort
    Duisburg
    Beiträge
    13.292
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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
    Contao Pool | C-C-A | MetaModels | [Internetseite -> Mediendepot Ruhr]
    [Arbeitet bei -> Paus Design & Medien]
    "I can EXPLAIN it to you, but I can't UNDERSTAND it for you."

  9. #9
    Contao-Nutzer
    Registriert seit
    27.07.2011.
    Beiträge
    24

    Standard

    Danke MacKP für die schnelle Antwort
    Zitat Zitat von MacKP Beitrag anzeigen
    ...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

  10. #10
    Contao-Yoda Avatar von MacKP
    Registriert seit
    15.06.2009.
    Ort
    Duisburg
    Beiträge
    13.292
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

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

    Viele Grüße
    Contao Pool | C-C-A | MetaModels | [Internetseite -> Mediendepot Ruhr]
    [Arbeitet bei -> Paus Design & Medien]
    "I can EXPLAIN it to you, but I can't UNDERSTAND it for you."

  11. #11
    Contao-Nutzer
    Registriert seit
    23.08.2011.
    Beiträge
    176

    Standard

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

  12. #12
    Contao-Yoda Avatar von MacKP
    Registriert seit
    15.06.2009.
    Ort
    Duisburg
    Beiträge
    13.292
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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
    Contao Pool | C-C-A | MetaModels | [Internetseite -> Mediendepot Ruhr]
    [Arbeitet bei -> Paus Design & Medien]
    "I can EXPLAIN it to you, but I can't UNDERSTAND it for you."

  13. #13
    Contao-Nutzer
    Registriert seit
    23.08.2011.
    Beiträge
    176

    Standard

    Super, danke.

  14. #14
    Contao-Urgestein Avatar von Tim G
    Registriert seit
    13.02.2010.
    Ort
    Lübeck
    Beiträge
    2.210
    User beschenken
    Wunschliste

    Standard 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-Code:
    <?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:

    PHP-Code:
    <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
    Angehängte Dateien Angehängte Dateien
    Geändert von Tim G (28.08.2011 um 13:07 Uhr)
    http://www.tim-gatzky.de ˙ auch schon wieder 2 Jahre alt - wie die Zeit vergeht... muss mal umbauen.

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Ähnliche Themen

  1. Antworten: 14
    Letzter Beitrag: 17.08.2017, 21:27
  2. Antworten: 8
    Letzter Beitrag: 11.11.2010, 09:49
  3. Nachrichtenarchiv nutzt falsche Links
    Von cuco im Forum Nachrichten/Events/FAQ
    Antworten: 2
    Letzter Beitrag: 02.06.2010, 14:30
  4. Welche Entwicklungsumgebung und Programme nutzt Ihr?
    Von Wichteldesign im Forum Off Topic
    Antworten: 5
    Letzter Beitrag: 29.04.2010, 12:58
  5. Eigenes Modul typ HTML funktionert nicht richtig mit css zusammen
    Von tl_mipro_user im Forum Layout / Templates / Holy Grail
    Antworten: 4
    Letzter Beitrag: 09.04.2010, 08:58

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •