Unternavigation nach Klick einblenden

Hallo,

die Webseite hat folgende Seitenstruktur:

1.
2.

2.1
2.2
2.3

3.
4.

4.1
4.2

5.


Was muss ich mit CSS und JavaScript einstellen, damit die Unterseiten nur dann eingeblendet werden, wenn man auf die dazugehörige Oberseite klickt? Ich hatte vor einer ganzen Weile schon einmal eine JavaScript Lösung gefunden. Dabei war aber das Problem, dass sich die Unterseiten nicht wieder ausgeblendet haben (nur, wenn man darauf geklickt hat).

Es soll genau so funktionieren, wie hier:
http://www.schlosskrug-gundorf.de/feierlichkeiten

Das Problem ist nur, dass sich das mit statischen Seiten wesentlich einfacher umsetzten lässt.:) Gibt es eine Lösung in Contao für mein Problem?

Probiers mal mit:

Code:

---

.deine-nav-klasse ul ul {
  display:none;
}

.deine-nav-klasse li.trail > ul,
.deine-nav-klasse li.active > ul {
  display:block;
}

---

Kein Limit beim Modul einstellen.

Hallo valentin,

ich habs so eingetragen:

Code:

---


ul.level_2 li {
display:none;
}

ul.level_2 li.trail, ul.level_2 li.active > ul {
display:block;
}

---

leider werden nur die Unterseiten ausgeblendet (was ja richtig ist) und, wenn ich auf diese klicken nicht wieder eingeblendet.

Hat dein Vorschlag eventuell etwas mit diesem thread zutuen?
https://community.contao.org/de/show...ten-in-Men%FCs

@Maxel: Das ist ein reines CSS-Thema. Peter Müller hat das in seinem Buch "Webseiten erstellen mit Contao 3" exakt beschrieben.

nein mein vorschlag ensprang meinem gehirn. ;)
hast du meine variante ausprobiert?

bei dem thread gehts doch um etwas ganz anderes?

Gesendet von meinem GT-I9505 mit Tapatalk 2

Zitat:

---

Das ist ein reines CSS-Thema. Peter Müller hat das in seinem Buch "Webseiten erstellen mit Contao 3" exakt beschrieben.

---

Dann wird das wohl so sein. Leider habe ich das Buch nicht. Kannst du mit die Lösung hier schreiben?

Zitat:

---

nein mein vorschlag ensprang meinem gehirn. ;)
hast du meine variante ausprobiert?

---

Ja, hat leider nicht funktioniert --> thread #3

Zitat:

---

bei dem thread gehts doch um etwas ganz anderes?

---

Worum geht es denn deiner Meinung nach?;)

Der Post stammt von 2009, betrifft Contao 2.7 und die trail-Klasse ist mittlerweile standardmäßig im Navigationstemplate integriert.

Hab gerade nochmal auf einer Seite nachgesehen, dort habe ich den oben genannten Code so verwendet.

Hast du einen Link zur Seite? Kannst du 1:1 posten, wie du das CSS eingefügt hast?

Hier hast du den Link zur Seite:
http://walradus.mag-page.de

Hier der CSS-Code der Navigations-css-Datei :D

Code:

---

    ul.level_1 li {
        width:9em;
        margin:0.4em;
        padding:0;
        list-style-type:none;
    }


    ul.level_1 a,
    ul.level_1 span {
        height:1.6em;
        display:block;
        margin-bottom:-0.4em;
        margin-left:-2.4em;
        padding-top:0.3em;
        padding-left:0.1em;
        font-weight:bold;
        text-decoration:none;
        color:#000;
    }


    ul.level_1 a:hover,
    ul.level_1 span {
        text-decoration:underline;
        color:#800000;
        border-color:white;
    }


    ul.level_2 li {
        display:none;
    }


    ul.level_2 li.trail,
    ul.level_2 li.active > ul {
        display:block;
    }

---

Also mein Code funktioniert, wär natürlich sinnvoll wenn du die Listenelemente nicht ausblendest sondern nur die Liste selbst ;)

Code:

---

ul.level_2 li {
  display: none;
}

---

Die display:block/none Zuweisungen brauchst du nicht direkt den Ebenen zuweisen. Es reicht wenn du es so machst, wie ich es oben geschrieben habe (z.B. li.active > ul usw). Dies würde dann auch bei weiteren Ebenen funktionieren.

Zitat:

---

Zitat von Maxel

Hallo,

die Webseite hat folgende Seitenstruktur:

1.
2.

2.1
2.2
2.3

3.
4.

4.1
4.2

5.


Was muss ich mit CSS und JavaScript einstellen, damit die Unterseiten nur dann eingeblendet werden, wenn man auf die dazugehörige Oberseite klickt?

---

Hallo,

vielleicht versteh ich jetzt dein Anliegen nicht ganz und lieg damit ganz falsch - aber sowas stellt man doch mit den Start/Stop-Level im Backend ein ...

StartLevel	StopLevel	Hard Limit	wie in der Navigation sichtbar
0	0	Nein	Alle Ebenen
0	1	Nein	Nur die erste Ebene. Unterpunkte erst nach Klick
0	1	Ja	Nur die erste Ebene. Unterebenen nie

Ich habe es jetzt soweit angepasst:

Code:

---

ul.level_2 {
    display:none;
}


ul.level_2 li.trail,
ul.level_2 li.active > ul {
    display:block;
}

---

Irgendwie geht es immer noch nicht... Liegt das an dem Display: none?

Zitat:

---

Hallo,

vielleicht versteh ich jetzt dein Anliegen nicht ganz und lieg damit ganz falsch - aber sowas stellt man doch mit den Start/Stop-Level im Backend ein ...

---

Cooler Ansatz, aber leider wird dann nur die level_2 Ebene angezeigt und auf der Startseite feht die Navigation ganz...

Zitat:

---

Zitat von Maxel

Was muss ich mit CSS und JavaScript einstellen, damit die Unterseiten nur dann eingeblendet werden, wenn man auf die dazugehörige Oberseite klickt?

---

Weil du nach einer CSS-Lösung gefragt hast. Will man z.B. bei Mouseover das Untermenü einblenden muss es im Code vorhanden sein. Da du auch von JavaScript gesprochen hast war es sehr naheliegend, dass du sowas in die Richtung umsetzen möchtest.

Warum machst du es dann nicht über Start/Stoplevel wenn du es in dieser Form benötigst?

Code:

---

#left .mod_navigation ul ul {
  display:none;
}

#left .mod_navigation li.trail > ul,
#left .mod_navigation li.active > ul {
  display:block;
}

---

1:1 einfügen oder Stoplevel verwenden^^

Zitat:

---

Zitat von Maxel

Cooler Ansatz, aber leider wird dann nur die level_2 Ebene angezeigt und auf der Startseite feht die Navigation ganz...

---

??? dann versteh ich's wohl nicht, was du erreichen willst ...
ich muss gestehen, dass ich meine Navis NUR damit umsetze - auch 2 bis 3 Ebenen unterhalb der ersten Ebene! ;)
Und dass die Navigation gar nicht angezeigt werden sollte? Nein, auch dieses Problem habe ich damit nicht.

@valentin_ danke für deinen Hilf! So funktioniert es. Ich hatte das mit der Syntax nicht so richtig ernsst genommen...:o Ist das schon CSS 3?

@derRenner:Ich hab (ausversehen) Start und Stopp Level vertauscht. Dein Lösungsvorschlag funktioniert (so, wie du es geschrieben hast) genauso gut!!! Danke noch mal dafür!

OK, das insgesamt ne ziemlich peinliche Reaktion von mir... :o;)

Nein ist CSS2 ;) http://www.w3schools.com/cssref/css_selectors.asp

Im Contao-Wiki gibt es einen ausführlichen Artikel, der sich mit dem Navigationsmodul eingehend beschäftigt: http://de.contaowiki.org/ModulNavigation

Worth reading!

Genau, da hab ich dann auch nachgelesen, um meinen Fehler zu finden...