Ergebnis 1 bis 19 von 19

Thema: Horizontale Navigation

  1. #1
    Contao-Nutzer
    Registriert seit
    06.07.2009.
    Beiträge
    11

    Standard Horizontale Navigation

    Hi,

    habe ein kleines Problem bei der Navigationserstellung in Typolight und zwar möchte ich eine Navigation bauen, wie sie die Seite http://www.allianz.de verwendet, also eine Navigation wo beim überfahren der Hauptpunkte die Unterpunkte angezeigt werden.

    Habe das ganze zwar mit CSS ganz gut gelöst, aber irgendwie gefällt es mir nicht, da die Unterpunkte immer ausgeblendet werden.

    Wäre super wenn jemand eine Lösung hätte, wie ich das Menü so realisieren könnte in TypoLight.

    Grüße

    Chris

  2. #2
    Contao-Urgestein Avatar von Toflar
    Registriert seit
    15.06.2009.
    Beiträge
    4.467
    Partner-ID
    8667
    User beschenken
    Wunschliste

    Standard

    Hi Chris

    Du kannst bei TL alle Templates, also auch das der Navi (nav_default.tpl) deinen Wünschen entsprechend anpassen.

    Es gibt auch einige Tutorials im Wiki zum Navimodul.

    Ich verstehe nicht ganz, was nicht funktioniert, deshalb so allgemeine Hinweise...
    Contao Core-Entwickler @terminal42 gmbh
    Wir sind Contao Premium-Partner!
    Für Individuallösungen kannst du uns gerne kontaktieren.
    PS: Heute schon getrakked?

  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 christopher,
    du suchst eine hybrid-Navigation.
    Hier eine Anleitung : http://www.alistapart.com/articles/hybrid/

    So langsam überleg ich ob nicht doch ne Anleitung für Navigationen mit CSS sinnvoll ist. Diese Seite paste ich hier schon zum 20. mal...
    Aber da ich selber das TL-CSS-Framework ncht benutze wäre es nicht so sinnvoll wenn ich das machen würde. Vllt hat da ja mal einer Lust zu.
    Vielleicht hättest du lust das zu machen wenn du das in deine Seite eingebaut hast christopher? Reicht ja wenn das erst mal nur zu Horizontalen Navigationen in der Art ist....

    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."

  4. #4
    Contao-Nutzer
    Registriert seit
    06.07.2009.
    Beiträge
    11

    Standard

    Hi,

    das sieht doch ganz gut aus... vielen Dank!... Joa ne Doku dazu schreiben, kann ich machen ist ja nicht so das Problem, wenn man es eh schonmal gemacht hat.

    Grüße

    Chris

  5. #5
    Contao-Nutzer
    Registriert seit
    06.07.2009.
    Beiträge
    11

    Standard

    Soo bin gerade dabei das im Link beschriebene Menü umzusetzen, leider stehe ich da gerade vor einem kleinen JavaScript Problem.

    Und zwar muss ich ja um das ganze dynamisch zu gestalten, die class on per JavaScript setzen, dies klappt auch soweit ganz gut, nur leider schaffe ich es nicht die class on wieder zu entfernen.

    Meine Funktion sieht bisher so aus,

    Code:
    <script type="text/javascript">
    function setClass(id) {
        document.getElementById(id).className = "on";
    }
    </script>
    damit kann ich es zwar setzen, aber bevor ich etwas setze müsste ich erst noch die klasse wieder aus dem vorherigen <li> Element entfernen. Hat da vielleicht jemand einen Denkanstoß für mich?

    Viele Grüße

    Chris

  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

    Hallo christopher,
    schön das du auch bereit bist das als Tutorial zu machen ;-)

    Äh.. ja, ich hab das selber ohne JavaScript, da der teil ja nur für IE6.0 oder niedriger ist (und da ich nicht gerade die JS leuchte bin und dem ul die id nav nicht gegeben habe, das also nicht so ganz so ansprechen konnte wie in der Vorlage..). Die haben dann immer noch die Möglichkeit auf die Unterseiten zu kommen indem Sie auf die Oberpunkte klicken.

    Für die Klassen on oder off kannst / musst du aber auf jeden Fall das Template bearbeiten.
    Da wird ja auch schon unterschieden:
    PHP-Code:
    <?php if ($item['isActive']): ?>
    <li id="current" class="active [B]on[/B]
    <?php else: ?>
    <li <?php if ($item['class']): ?> class="[B]off[/B]
    Mal so als Beispiel Auszug.

    Viele Grüße
    Geändert von MacKP (07.07.2009 um 22:10 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."

  7. #7
    Contao-Nutzer
    Registriert seit
    06.07.2009.
    Beiträge
    11

    Standard

    Moin,

    vielen Dank für den Anstoß, mein JavaScript Ansatz war wirklich entwas umständlich, habe jetzt das Template entsprechend angepasst und es läuft soweit bis auf 1-2 kleinere Fehler. Wenn ich die Fehler beseitigt habe, werde ich das ganze mal dokumentieren.

    Grüße

    Chris

  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

    Super,
    da bin ich mal gespannt.
    Freu mich drauf ;-)
    Dann kann ich endlich nen anderen Link hier im Forum verbreiten *g*

    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
    06.07.2009.
    Beiträge
    11

    Standard

    Soo leider hat ist jetzt noch ein etwas größeres Problem aufgetreten und zwar funktioniert das ganze zwar auf der ersten Ebene, aber wenn ich dann eine der Unterseiten anklicke, werden logischerweise die anderen Seiten auf dem level nicht mehr angezeigt ...

  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

    Hallo christopher,
    das sind ein paar wenig Informationen...
    Hast du eventuell leinen Link?

    Hast du vielleicht den Stoplevel eingestellt? So eine Navigation sollte ohne Stoplevel sein...
    Ansonsten gib mal bitte die Werte durch, die du bei der Navigation eingestellt hast.

    Und wenn es am CSS liegt könnte es an der Klasse trail liegen die du auch noch mit CSS versorgen musst?

    Viele Grüße

    PS: Vielleicht kannst du ja hier mal schauen: http://www.altstadtschmiede.de/ da habe ich auch diese Art Navigation im Einsatz. Allerdings ohne das JS weil die IE6 User das auch noch anders nutzen können und die Seite eh schon schwierig für den IE ist ;-)

    PPS: Ich teste gerade die möglichkeit IE6 mit JS noch mehr biezubringen.... dadurch geht die Navi auch ohne extra Zeug (also "nur" mit dem extra JS *g*). Hier eine Möglichkeit -> http://code.google.com/p/ie7-js/downloads/list
    Geändert von MacKP (08.07.2009 um 21:48 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."

  11. #11
    Contao-Nutzer
    Registriert seit
    06.07.2009.
    Beiträge
    11

    Standard

    Moin,

    genau so soll das bei mir auch aussehen... eine URL habe ich leider nicht, läuft leider noch lokal ... habe dir mal die entsprechenden auszüge kopiert. Start und Stoplevel sind beide auf 0 gesetzt.

    Hier einmal der HTML Code, der erzeugt wird.

    HTML-Code:
    <ul class="level_1"  id="nav" ><!-- If Clause Added to check the current level of ul element -->
    <li class="active submenu first on"><!-- check the current level of li element and set the class --><span class="active submenu first">Startseite</span><ul class="level_2" ><!-- If Clause Added to check the current level of ul element -->
    <li class="first "><!-- checking the level and adding the class type off to the li element --><a href="index.php/testseite2.html" title="testseite2" class="first" onclick="this.blur();">testseite2</a></li>
    <li class="last "><!-- checking the level and adding the class type off to the li element --><a href="index.php/testseite.html" title="testseite" class="last" onclick="this.blur();">Testseite</a></li>
    </ul>
    </li>
    <li class="submenu off"><!-- checking the level and adding the class type off to the li element --><a href="index.php/allfinanz.html" title="Allfinanz" class="submenu" onclick="this.blur();">Allfinanz</a><ul class="level_2" ><!-- If Clause Added to check the current level of ul element -->
    
    <li class="first "><!-- checking the level and adding the class type off to the li element --><a href="index.php/fggffgdgsfd.html" title="fgfddfgsgfd" class="first" onclick="this.blur();">gfdgfgfsdfg</a></li>
    <li class="last "><!-- checking the level and adding the class type off to the li element --><a href="index.php/fjofg.html" title="fdfggfdgd" class="last" onclick="this.blur();">Tets</a></li>
    </ul>
    </li>
    <li class="off"><!-- checking the level and adding the class type off to the li element --><a href="index.php/immobilien.html" title="Immobilien" onclick="this.blur();">Immobilien</a></li>
    <li class="last off"><!-- checking the level and adding the class type off to the li element --><a href="index.php/onlinerechner.html" title="Onlinerechner" class="last" onclick="this.blur();">Onlinerechner</a></li>
    </ul>
    und hier das CSS...

    Code:
    #nav li{margin: 0;float: left;display: block;padding-right: 15px;list-style-type: none;}
    #nav li.off:hover{margin: 0;float: left;display: block;padding-right: 15px;list-style-type: none;}
    #nav li.off ul,#nav li.on ul{display: none;background: #dee6f6;width: 985px;height: 24px;border-top: 2px solid #e69638;}
    #nav li a{/*for all links in the list*/  color: #f90;  font-weight: bold;  display: block;  height: 15px;  padding-left: 5px;  padding-right: 5px;}
    #nav li.off ul,#nav li.on ul{display: none;  position: absolute;  left: 0;}
    #nav li.on a{border: 1px solid #f90;}
    #nav li.on ul a,#nav li.off ul a{border: 0;}
    #nav li.on ul{display: block;}
    #nav li.on ul a,#nav li.off ul a{float: left;  /*ie doesn't inherit the float*/  border: 0;  color: #f90;  width: auto;  margin-right: 15px;}
    #nav li.on ul{display: block;}
    #nav li.off:hover ul{display: block;  z-index: 6000;  width: 985px;  background: #dee6f5;height: 24px;border-top: 2px solid #e69638;}
    Wäre super, wenn du mir zeigen könntest, wie du das bei dir gemacht hast...

    Grüße

    Chris
    Geändert von christopher (08.07.2009 um 22:33 Uhr)

  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 christopher,
    ich glaub da ist in deinem Template was schief gegangen...
    Dein level_1 ul wird geschlossen und erst danach kommt das submenü.
    Das gute bei dieser Art Menü ist aber eigentlich das die ul richtig ineinander verschachtelt sind.

    Ich hab eigentlich nur eine Navigation gemacht und dann den CSS code von dem Beispiel ein wenig abgeändert... den kannst du ja bei mir ablesen und schauen. Aber wie gesagt: ich nutze Yaml, also ist es etwas Yaml speziell aufgebaut und du solltest das dann nicht einfach kopiere (wegen Lizenz etc.) ;-)

    Bring est mal dein Template wieder in Ordnung, dann kann man weiter schauen.
    Ich hab bei mir auch dem ul nicht die extra Klasse gegeben... geht auch ohne wie man sieht, nur greift dann das JS von der Vorlage nicht.

    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
    06.07.2009.
    Beiträge
    11

    Standard

    Moin,

    habs mir gerade nochmal angeguckt, das level_1 ul wird erst am Ende wieder geschlossen... die anderen beiden </ul> schließen jeweils die level_2 ul.

    Viele Grüße

    Chris

  14. #14
    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

    ups... sorry, hatte ein <ul> übersehen in der 2. Zeile...

    Hätte nen vorschlag wie ich mir das live ansehen könnte:
    Kopier einfach eine Seite (Quelltext) und das CSS, lade die beiden Teile irgendwohin. Dann kann man sich das schon mal ansehen ohne das du TL komplett hochladen musst...

    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."

  15. #15
    Contao-Nutzer
    Registriert seit
    06.07.2009.
    Beiträge
    11

    Standard

    Moinsen,

    stimmt das geht natürlich, habe dir mal die entsprechenden Ausschnitt kopiert und das Stylesheet eingefügt.

    http://project.cbvision.de/testseite.html

    Vielen Dank und viele Grüße

    Chris

  16. #16
    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 seh da im Moment keinen Fehler.. kannst du eventuell noch eine Seite hochladen wo dann das Problem von dir auftaucht?

    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."

  17. #17
    Contao-Nutzer
    Registriert seit
    06.07.2009.
    Beiträge
    11

    Standard

    Moin,

    kein Problem, hier findest du eine Testseite... http://frontendmedia.com/ ... einfach auf einen der Unterpunkte klicken, dann verschwinden sie.

    Grüße

    Chris

  18. #18
    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 christopher,
    das Problem sind deine zusätzlichen Klassen on und off. Wenn der Navigationspunkt nicht mehr direkt angewählt ist, bekommt er die Klasse off. Das kommt dir dann ins gehege...
    Versuch doch besser mit den Klassen zu arbeiten die es schon in TL gibt:
    - active ist wie on
    - trail ist auch wie on, nur das es nicht acive ist, sondern ein Punkt darunter ist on
    - keine extra klasse ist wie off

    Damit kommst du wesendlich weiter und du hast alle Zustände die du braucht ;-)

    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."

  19. #19
    Contao-Nutzer
    Registriert seit
    06.07.2009.
    Beiträge
    11

    Standard

    Moin,

    habs eben mal ausprobiert, scheint zu klappen, morgen werd ich mich mal im Detail damit befassen... vielen Dank für deine Mühe!

Aktive Benutzer

Aktive Benutzer

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

Ähnliche Themen

  1. Horizontale Navigation
    Von vertexino0 im Forum Layout / Templates / Holy Grail
    Antworten: 4
    Letzter Beitrag: 24.09.2010, 07:35
  2. Horizontale Navigation
    Von Nap im Forum Layout / Templates / Holy Grail
    Antworten: 5
    Letzter Beitrag: 03.03.2010, 16:59
  3. Horizontale navigation
    Von JohannesH im Forum Layout / Templates / Holy Grail
    Antworten: 1
    Letzter Beitrag: 19.11.2009, 10:08
  4. horizontale navigation !?
    Von sfx im Forum Layout / Templates / Holy Grail
    Antworten: 2
    Letzter Beitrag: 09.08.2009, 22:37
  5. CSS horizontale Navigation auf 2.7.2
    Von marczw im Forum Layout / Templates / Holy Grail
    Antworten: 22
    Letzter Beitrag: 27.06.2009, 18:00

Lesezeichen

Lesezeichen

Berechtigungen

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